https://github.com/jaw9c/react-interactive-inspect

Inspect element component for React.
https://github.com/jaw9c/react-interactive-inspect

chrome dev element inspect react tools

Last synced: 7 months ago
JSON representation

Inspect element component for React.

• Host: GitHub
• URL: https://github.com/jaw9c/react-interactive-inspect
• Owner: jaw9c
• Created: 2020-02-15T18:05:40.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-12T01:57:32.000Z (almost 3 years ago)
• Last Synced: 2025-03-18T07:32:05.965Z (7 months ago)
• Topics: chrome, dev, element, inspect, react, tools
• Language: JavaScript
• Homepage: https://jaw9c.github.io/react-interactive-inspect/
• Size: 2.46 MB
• Stars: 4
• Watchers: 1
• Forks: 1
• Open Issues: 34
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# react-interactive-inspect

> Inspect element component for React. Current funcionality provides the XPath of the element selected, based for the use case of an standard (non-tech) user to be able to select elements to otherwise process. 

[![NPM](https://img.shields.io/npm/v/react-interactive-inspect.svg)](https://www.npmjs.com/package/react-interactive-inspect) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

![](banner.gif)

## Demo

https://react-interactive-inspect.netlify.com

## Install

```bash

npm install --save react-interactive-inspect

```

```bash

yarn add react-interactive-inspect

```

## Usage

```tsx

import * as React from "react";

import InteractiveXPathSelector from "react-interactive-inspect";

const htmlData = "


1

2

3

";

const cssData = "ul { paddingBottom: 10px }";


const Example: React.FC = () => (

   console.log(path)}

  />

);

```

## License

MIT © [jaw9c](https://github.com/jaw9c)