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 → React-Scope → React Scope

React-Scope / React Scope

Licence: mit
Visualize your React components as you interact with your application.

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

reactreactjsvisualizationchromeoptimizationreact-componentsvisualizerjavascript-frameworkpropsreactjs-components

Projects that are alternatives of or similar to React Scope

React Workshop
⚒ 🚧 This is a workshop for learning how to build React Applications
Stars: ✭ 114 (-63.92%)
Mutual labels:  props, react-components
Tabler React
React components and demo for the Tabler UI theme.
Stars: ✭ 1,830 (+479.11%)
Mutual labels:  react-components, reactjs-components
React Key Handler
React component to handle keyboard events 🔑
Stars: ✭ 386 (+22.15%)
Mutual labels:  react-components, reactjs-components
react-fundamentals
React fundamentals
Stars: ✭ 15 (-95.25%)
Mutual labels:  react-components, props
Dataformsjs
🌟 DataFormsJS 🌟 A minimal JavaScript Framework and standalone React and Web Components for rapid development of high quality websites and single page applications.
Stars: ✭ 95 (-69.94%)
Mutual labels:  javascript-framework, react-components
React Border Wrapper
A wrapper for placing elements along div borders.
Stars: ✭ 147 (-53.48%)
Mutual labels:  props, react-components
React Absolute Grid
An absolutely positioned, animated, filterable, sortable, drag and droppable, ES6 grid for React.
Stars: ✭ 910 (+187.97%)
Mutual labels:  react-components, reactjs-components
Library Detector For Chrome
🔍 Extension that detects which JavaScript libraries are running on a page
Stars: ✭ 566 (+79.11%)
Mutual labels:  javascript-framework, chrome
Enact
An app development framework built atop React that’s easy to use, performant and customizable.
Stars: ✭ 178 (-43.67%)
Mutual labels:  javascript-framework, react-components
Eo Locale
🌏Internationalize js apps 👔Elegant lightweight library based on Internationalization API
Stars: ✭ 290 (-8.23%)
Mutual labels:  react-components, reactjs-components
Arduino Create Agent
The Arduino Create Agent
Stars: ✭ 298 (-5.7%)
Mutual labels:  chrome
Chakra Ui
⚡️Simple, Modular & Accessible UI Components for your React Applications
Stars: ✭ 295 (-6.65%)
Mutual labels:  react-components
Embed Visualizer
discord embed visualization tool
Stars: ✭ 306 (-3.16%)
Mutual labels:  visualizer
Whatspup
🔳 WhatsApp chat from commandline/console/cli using GoogleChrome puppeteer
Stars: ✭ 310 (-1.9%)
Mutual labels:  chrome
React Native Pagination
Animated Pagination For React Native's ListView, FlatList, and SectionList
Stars: ✭ 296 (-6.33%)
Mutual labels:  react-components
Rawkit
🦊 Immediately Open Chrome DevTools when debugging Node.js apps
Stars: ✭ 306 (-3.16%)
Mutual labels:  chrome
Hyper React
The project has moved to Hyperstack!!
Stars: ✭ 295 (-6.65%)
Mutual labels:  react-components
Csv2keychain
Small tool for adding exported credentials from Chrome to macOS keychain
Stars: ✭ 295 (-6.65%)
Mutual labels:  chrome
React Stripe Elements
Moved to stripe/react-stripe-js.
Stars: ✭ 3,047 (+864.24%)
Mutual labels:  react-components
Crx Selection Translate
一站式划词 / 截图 / 网页全文 / 音视频翻译扩展。
Stars: ✭ 3,603 (+1040.19%)
Mutual labels:  chrome
View All Similar Projects ➔

React Scope

Visualize your React components as you interact with your application.

React Scope screenshot

Setup

  1. Install React Scope from Chrome web store.
  2. (Important) Install React Developer Tools if you haven't already.
  3. Enable "Allow access to file URLs" in the extension settings for React Scope.
  4. Run your React application.
  5. Open Chrome Developer Tools -> React Scope panel.

Usage

Hover over the nodes within the DOM tree visualization to see each component's state and props.

Use your app to make changes to state (e.g., trigger click events, submit data, etc.).

Every state change will update the visualization. You can click the next / prev buttons to navigate between current and previous states of your application.

Notes

This is an early stable release undergoing continuous development. Currently, this version is optimized for use in developing smaller-scale React applications.

If you experience duplicate state/props information being displayed, please try refreshing the page.

Contact

If you have suggestions or want to help make React Scope better, feel free to submit an issue or contact us at [email protected]. (Pull requests for typographical errors will likely be ignored.)

Check us out at reactscope.com

Authors:

Kevin Gabinete - https://github.com/kgabinete08

Jonathan Lee - https://github.com/GoingInfinity

Tiffany Lin - https://github.com/misstiffanylin

Ringo Yip - https://github.com/ringoyip0901

© React Scope 2018

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].