GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → oslabs-beta → Realize

oslabs-beta / Realize

Licence: mit
A React component tree visualizer

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

reactreactjschrome-extensiond3firefox-extensionfiber

Projects that are alternatives of or similar to Realize

Grasp
A reliable org-capture browser extension for Chrome/Firefox
Stars: ✭ 193 (-32.28%)
Mutual labels:  chrome-extension, firefox-extension
Ghosttext
👻 Use your text editor to write in your browser. Everything you type in the editor will be instantly updated in the browser (and vice versa).
Stars: ✭ 2,614 (+817.19%)
Mutual labels:  chrome-extension, firefox-extension
Oldschool Github Extension
Revert GitHub's UI back to its classic look (before the June 23, 2020 update that has a flat, rounded and more whitespaced design).
Stars: ✭ 200 (-29.82%)
Mutual labels:  chrome-extension, firefox-extension
Floccus
☁️ Sync your bookmarks privately across browsers
Stars: ✭ 2,630 (+822.81%)
Mutual labels:  chrome-extension, firefox-extension
Startpage
A minimal starpage for Chrome and Firefox
Stars: ✭ 240 (-15.79%)
Mutual labels:  chrome-extension, firefox-extension
React Extension Boilerplate
🚀 Modern React boilerplate for Firefox and Chrome extensions.
Stars: ✭ 177 (-37.89%)
Mutual labels:  chrome-extension, firefox-extension
Generator Web Extension
Advanced WebExtension generator that creates everything you need to get started with cross-browser web-extension development.
Stars: ✭ 212 (-25.61%)
Mutual labels:  chrome-extension, firefox-extension
Spotify Lyrics
🎉 Desktop Spotify Web Player Instant Synchronised Lyrics
Stars: ✭ 162 (-43.16%)
Mutual labels:  chrome-extension, firefox-extension
Devo
A Chrome and Firefox extension that displays GitHub Trending, Hacker News, Product Hunt and Designer News on every new tab.
Stars: ✭ 236 (-17.19%)
Mutual labels:  chrome-extension, firefox-extension
Browserextension
💻 SteamDB's extension for Steam websites
Stars: ✭ 230 (-19.3%)
Mutual labels:  chrome-extension, firefox-extension
Github Mermaid Extension
A browser extension for Chrome, Opera & Firefox that adds Mermaid language support to Github
Stars: ✭ 170 (-40.35%)
Mutual labels:  chrome-extension, firefox-extension
Web Archives
Browser extension for viewing archived and cached versions of web pages
Stars: ✭ 263 (-7.72%)
Mutual labels:  chrome-extension, firefox-extension
Tako
Tako replaces the default Github repository file list with an expandable file tree and file preview for rapid exploration of repositories.
Stars: ✭ 172 (-39.65%)
Mutual labels:  chrome-extension, firefox-extension
Privacybadger
Privacy Badger is a browser extension that automatically learns to block invisible trackers.
Stars: ✭ 2,346 (+723.16%)
Mutual labels:  chrome-extension, firefox-extension
Sponsorblock
Skip YouTube video sponsors (browser extension)
Stars: ✭ 3,627 (+1172.63%)
Mutual labels:  chrome-extension, firefox-extension
Smartproxy
Firefox/Chrome browser extension. SmartProxy will automatically enable/disable proxy for the sites you visit, based on customizable patterns.
Stars: ✭ 199 (-30.18%)
Mutual labels:  chrome-extension, firefox-extension
Browser Extension Json Discovery
Browser (Chrome, Firefox) extension for JSON discovery
Stars: ✭ 157 (-44.91%)
Mutual labels:  chrome-extension, firefox-extension
Absolutedoubletrace
A web extension to block browser fingerprinting
Stars: ✭ 156 (-45.26%)
Mutual labels:  chrome-extension, firefox-extension
Bypass Paywalls Chrome
Bypass Paywalls web browser extension for Chrome and Firefox.
Stars: ✭ 20,876 (+7224.91%)
Mutual labels:  chrome-extension, firefox-extension
Archiveror
Archiveror will help you preserve the webpages you love. 💾
Stars: ✭ 246 (-13.68%)
Mutual labels:  chrome-extension, firefox-extension
View All Similar Projects ➔

Logo

Realize For React

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.

Logo

👩‍💻 How to use it

  1. Install the extension from the Firefox store & Chrome 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 | LinkedIn
Harry Clifford - Github | LinkedIn
Henry Black - Github | LinkedIn
Horatiu Mitrea - Github | LinkedIn

Contact

You can contact us personally through our LinkedIn accounts (links above) or as a team via [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 file for details

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].