Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/oslabs-beta/realize
A React component tree visualizer
https://github.com/oslabs-beta/realize
chrome-extension d3 fiber firefox-extension react reactjs
Last synced: about 20 hours ago
JSON representation
A React component tree visualizer
- Host: GitHub
- URL: https://github.com/oslabs-beta/realize
- Owner: oslabs-beta
- License: mit
- Created: 2020-05-26T14:16:51.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T18:42:57.000Z (about 2 years ago)
- Last Synced: 2025-01-21T05:06:38.212Z (about 20 hours ago)
- Topics: chrome-extension, d3, fiber, firefox-extension, react, reactjs
- Language: JavaScript
- Homepage: http://www.realizeforreact.com
- Size: 7.42 MB
- Stars: 333
- Watchers: 11
- Forks: 21
- Open Issues: 27
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
![Logo](./assets/LogoAnimSmall.gif)
# Realize For ReactAs 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.
![Logo](./assets/treeVisCropped1.gif)
## 👩💻 How to use it
1. Install the extension from the [Firefox](https://addons.mozilla.org/en-GB/firefox/addon/realizeforreact/) store & [Chrome](https://chrome.google.com/webstore/detail/realize-for-react/llondniabnmnappjekpflmgcikaiilmh?authuser=0&hl=en) store
2. Navigate to your React website
3. Open the dev tools window and select the Realize Panel
4. Trigger a state change to see the component tree populate
**Prerequisites**
- Realize requires React Dev Tools to be installed before use.
- Realize is best used on non-deployed applications. This uglification of deployed websites makes the component structure pretty unreadable.
## 🔥 Key Features
**Zoom & Pan** - Hold down shift to enable dragging and zooming on the tree (to recenter just click the center button)
**Component Focus** - Click on a node to view state, props and children in the right and panel
**State Flow** - Click the 'state' toggle to show state flow on the tree. Stateful components have blue nodes and state flow is show by blue links
**Search and Highlight** - Enter a component name in the search bar to see all matching nodes pulsate## 💻 Installing locally
1. Clone the repo onto your computer `git clone https://github.com/oslabs-beta/Realize`
2. Run `npm i` from inside the root directory
3. Run `npm build`
4. Load the extension from the `build/extension` folder into your browser of choice:
For Firefox, navigate to `about:debugging#/runtime/this-firefox` and click Load Temporary Addon
For Chrome, navigate to `chrome://extensions/` toggle developer mode on and click Load Unpacked
5. Follow steps 2 onwards from the 'How to use it' section## Authors
Fan Shao - [Github](https://github.com/fan-shao) | [LinkedIn](https://www.linkedin.com/in/fan-shao/)
Harry Clifford - [Github](https://github.com/HpwClifford/) | [LinkedIn](https://www.linkedin.com/in/harry-clifford-3788951a9/)
Henry Black - [Github](https://github.com/blackhaj) | [LinkedIn](https://www.linkedin.com/in/henryblack1/)
Horatiu Mitrea - [Github](https://github.com/hmitrea) | [LinkedIn](https://www.linkedin.com/in/horatiu-mitrea-515704137/)## Contact
You can contact us personally through our LinkedIn accounts (links above) or as a team via [[email protected]](mailto:[email protected])## Contributing
We would love for you to test out our extensions and submit any issues you encounter. Feel free to fork to your own repo and submit PRs. Some features we would like to add:
1. Performance data on render times
2. Expanding/collapsing nodes
3. Autocomplete on search### License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details