Extract to React
Item media 4 screenshot
Item media 1 screenshot
Item media 2 screenshot
Item media 3 screenshot
Item media 4 screenshot
Item media 1 screenshot
Item media 1 screenshot
Item media 2 screenshot
Item media 3 screenshot
Item media 4 screenshot

Overview

Chrome/Chromium extension that allows easy HTML to React conversion.

Extract all the HTML & CSS of any portion of any website directly into a ready-to-go React Component! ---- # Usage - Quick start: Inspect an element on the page > "Extract To React" tab > Extract the code to CodePen or JSFiddle. - Advanced usage: It is possible to split a monolithic component up into multiple nested components. Find the elements you wish to become their own component in the "Elements" tab. Add an attribute called `data-component`. Set the value of `data-component` to be the extracted name of the component: <h1 class="heading" data-component="Heading">Hello, world!</h1> <nav class="nav" data-component="Nav"> <ul class="list"> <li class="list-item" data-component="ListItem">#1</li> <li class="list-item" data-component="ListItem">#2</li> </ul> </nav> Will result in 3 components being extracted: `Heading`, `Nav`, and `ListItem` ---- # Bugs and Features If you find a bug or have a feature request, please create an issue on GitHub: https://github.com/jesstelford/extract-to-react/issues ---- # Attribution This project is based on excellent open source software: * SnappySnippet: Chrome/Chromium extension that allows easy CSS+HTML extraction of specific DOM element. Created snippet can be then exported to CodePen, jsFiddle or JS Bin with one click. (https://github.com/kdzwinel/SnappySnippet/issues) * html-to-react-components: Extract annotated portions of HTML into React components as separate modules. (https://roman01la.github.io/html-to-react-components/)

1.7 out of 57 ratings

Google doesn't verify reviews. Learn more about results and reviews.

Review's profile picture

Phillip Madsen19 Nov 2020

does not work

Review's profile picture

G García Díaz29 Mar 2020

doesn't import anything

1 person found this review to be helpful
Review's profile picture

Taylor Bunker17 May 2019

Didn't work for me either.

1 out of 2 found this helpful

Details

  • Version
    1.0.2
  • Updated
    16 January 2019
  • Offered by
    Jess Telford
  • Size
    489KiB
  • Languages
    English (UK)
  • Non-trader
    This developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.

Privacy

The developer has not provided any information about the collection or usage of your data.

Support

Related

React VT

5.0(2)

Visual Testing Tool for React Applications

JSON Viewer React

5.0(2)

JSON viewer built using ReactJS. View full JSON paths on hover, copy full paths or path values, and toggle collapse of all objects.

React Repositories New Tab

0.0(0)

A New Tab extension that shows you popular and new React repositories.

React Context DevTool

4.6(20)

Devtool for React Context and useReducer

HTML To React

4.5(2)

To create a React component with an input details.

HTML to React

5.0(5)

The fastest and smartest way to analyze HTML elements and generate full React component representations.

eXtract Snippet

3.1(38)

Extract HTML/CSS snippets from websites. Inspect an element and eXtract HTML CSS

Realize for React

1.9(8)

A React component tree visualizer

React Inspector

3.3(6)

The Inspector launch with Ctrl+Shift+X (Command+Shift+X on Mac). You can detect and open the React component source code easily.

CSS Used

4.6(176)

Get all css rules used by the selected DOM and its descendants.

React Performance Devtool

3.4(11)

A devtool extension for inspecting the performance of React components.

click-to-react-component

5.0(3)

Option+Click React components in your browser to instantly open the source in VS Code

React VT

5.0(2)

Visual Testing Tool for React Applications

JSON Viewer React

5.0(2)

JSON viewer built using ReactJS. View full JSON paths on hover, copy full paths or path values, and toggle collapse of all objects.

React Repositories New Tab

0.0(0)

A New Tab extension that shows you popular and new React repositories.

React Context DevTool

4.6(20)

Devtool for React Context and useReducer

HTML To React

4.5(2)

To create a React component with an input details.

HTML to React

5.0(5)

The fastest and smartest way to analyze HTML elements and generate full React component representations.

eXtract Snippet

3.1(38)

Extract HTML/CSS snippets from websites. Inspect an element and eXtract HTML CSS

Realize for React

1.9(8)

A React component tree visualizer

Google apps