English (United States)
See more
A React component tree visualizer
Latest Version
Version
1.0.0.0
Update
June 20, 2020
Size
160KiB
Developer
Category
Users
4,000+ 
Rating
2 ★
Manifest Version
2
Web Store Status
Extension ID
Languages Support
Permissions
ActiveTab
See more
Realize for React Extension
As React applications scale, it becomes more difficult to track state and to have a holistic overview of the component hierarchy. Realize is a tool to help developers visualize the structure and state flow of their React applications, especially when they are growing in scale and complexity. It currently supports React v.16.8.
Prerequisites
1. You must have React Dev Tools installed to use Realize for React. Install it from the Chrome store
2. Realize is best used on non-deployed applications. This uglification of deployed websites makes the component structure pretty unreadable.
How to use
1. Click the blue 'Add to Chrome' button
2. Once installed, navigate to your React website
3. Open the dev tools window and click on the Realize panel
4. Trigger a state change to populate the component tree
Functionality:
- Utilize the search bar to search for any component that exists in the tree.
- Clicking a node component will display information about state, children, props, and hooks in the right hand panel.
- You can zoom and pan the tree by holding shift and dragging/scrolling
- Click the 'State' button to view the flow of state through the component tree
Read more
Prerequisites
1. You must have React Dev Tools installed to use Realize for React. Install it from the Chrome store
2. Realize is best used on non-deployed applications. This uglification of deployed websites makes the component structure pretty unreadable.
How to use
1. Click the blue 'Add to Chrome' button
2. Once installed, navigate to your React website
3. Open the dev tools window and click on the Realize panel
4. Trigger a state change to populate the component tree
Functionality:
- Utilize the search bar to search for any component that exists in the tree.
- Clicking a node component will display information about state, children, props, and hooks in the right hand panel.
- You can zoom and pan the tree by holding shift and dragging/scrolling
- Click the 'State' button to view the flow of state through the component tree
Source Manifest.json
{"update_url": "https://clients2.google.com/service/update2/crx", "manifest_version": 2, "name": "Realize for React", "version": "1.0.0.0", "description": "A React component tree visualizer", "icons": { "16": "16.png", "32": "32.png", "48": "48.png", "128": "128.png" }, "permissions": [ "activeTab", "" ], "background": { "scripts": ["background.js"] }, "web_accessible_resources": ["hook.js"], "devtools_page": "devtools-root.html"}
Read more
Similar Extensions
React Fetch Tree 4,000+ 0 ★ 548KiB
React VT 4,000+ 2 ★ 1.51MiB
React Inspector 4,000+ 8 ★ 26.91KiB
React Monitor 4,000+ 0 ★ 1.3MiB
React Developer Tools 4,000+ 1576 ★ 1.56MiB
React Context DevTool 4,000+ 21 ★ 2.35MiB
click-to-react-component 4,000+ 5 ★ 79.5KiB
React Stores Devtools Extension 4,000+ 0 ★ 716KiB
HTML to React 4,000+ 4 ★ 342KiB
Extract to React 4,000+ 7 ★ 489KiB
Reactime 4,000+ 33 ★ 803KiB
React Performance Devtool 4,000+ 11 ★ 170KiB
HTML To React 4,000+ 2 ★ 41.97KiB
Redux DevTools 4,000+ 726 ★ 1.2MiB
React Repositories New Tab 4,000+ 0 ★ 728KiB
CORS Unblock 4,000+ 162 ★ 203KiB
Apollo Client Devtools 4,000+ 266 ★ 490KiB
daily.dev | The homepage developers deserve 4,000+ 2460 ★ 2.28MiB
Jinno: code any React component with AI 4,000+ 38 ★ 18.37MiB
Sauron - Dark mode for all websites 4,000+ 60 ★ 336KiB
Testing Playground 4,000+ 60 ★ 646KiB
React Hook Form Developer Tools 4,000+ 7 ★ 117KiB
LocatorJS 4,000+ 64 ★ 190KiB
MobX Developer Tools 4,000+ 51 ★ 682KiB
User reviews
Sankar Gorthi (ID: 000000e2aebd26e8) Voted 2 ★ - Updated 04/24/2023
Santosh (ID: 000000ef2c824e2b) Voted 1 ★ - Updated 04/07/2023
Tarun Bansal (ID: 000000e592bdfde9) Voted 1 ★ - Updated 12/27/2022
Nite Frost (ID: 0000003343361a59) Voted 5 ★ - Updated 06/27/2022
Артур Гранд (ArtyGrand) (ID: 000000ed2339c6da) Voted 3 ★ - Updated 07/29/2020
