Realize for React: Visualize React state flow and component hierarchy

Hi everyone, we're excited to launch Realize for react. It turns out when building a react application it is harder to have a map of how the components are connected with one another in a more visual way as well as seeing the state , props and children of an application. Because of that we decided to build a chrome/firefox extension that will allow anyone to view their react components in a tree like manner. This extension is best used in non-deployed application as opposed to deployed sties due to making the component structure pretty unreadable. To view the components, open the dev tools and scroll until you see the Realize extension. On a state change you'll see the components displayed on the left side of the screen and when clicking on one if it contains any state , props or children it will be displayed on the right panel. We can utilize the search component as well as to search for a specific component if you already know the name. The project is open source so if anyone wants to make any contribution here's our Github! and feel free to ask any questions. It currently supports React v.16.8 and above. Our extension works for Firefox as well as Chrome (however we're still pending approval :D )