React Templates & Themes Logo React Templates & Themes
React Sight screenshot

React Sight

Author Avatar Theme by React sight
Updated: 11 Dec 2020
2870 Stars

Visualization tool for React, with support for Fiber, Router (v4), and Redux

Github Live Preview

Categories

Scss

Overview

React Sight is a tool that provides a live view of the component hierarchy tree of React applications, complete with support for React Router and Redux. It offers a visual representation of the structure of the app to help developers understand how components are organized without modifying any existing code. The tool is available as a Chrome extension and now also supports Firefox.

Features

  • Live Component Hierarchy: Visual representation of the component hierarchy tree.
  • Support for React Router and Redux: Includes support for React Router and Redux components.
  • Interactive Node Information: Hover over nodes to view their state and props in a side panel.
  • Built-In Filters: Hide DOM elements, Redux components, and Router components for better focus.
  • Zoom Functionality: Zoom in by double-clicking, zoom out by Shift + double-clicking.
  • Easy Installation: Simple setup process requiring only the installation of a Chrome extension.

Installation

Chrome Extension

  1. Add React Dev Tools to Chrome.
  2. Install React Sight from the Chrome Web Store.
  3. Ensure “Allow access to file URLs” is enabled in the extension settings for React Dev Tools and React Sight.
  4. Open Chrome Developer Tools (cmd+opt+j) and access the React Sight panel.

Firefox Add-on

  1. Add React Dev Tools to Firefox.
  2. Install React Sight from the Firefox Add-ons website.
  3. Follow similar setup steps to the Chrome extension.

Building Your Version

  1. Clone the repository and install dependencies using yarn install or npm install.
  2. Generate the build with yarn build.
  3. For Chrome, load the unpacked extension from the ~/ReactSight/build/extension folder.
  4. For Firefox, load the extension as a “Temporary Extension” using the manifest.json file.

Summary

React Sight offers a convenient way for developers to visualize the component hierarchy of React applications, supporting React Router and Redux components. Its easy installation process via Chrome and Firefox extensions makes it accessible for developers wanting to gain insights into their application structure without needing to modify existing code.