Extract to React Extract to React

Developer Tools
Version: 1.0.2
Last Update: 2019-01-16

Overview

Extract to React is a Chrome extension developed by Jess Telford. According to the data from Chrome web store, current version of Extract to React is 1.0.2, updated on 2019-01-16.
2,000+ users have installed this extension. 7 users have rated this extension with an average rating of .

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/)

Rating

7 ratings

Total Installs

2,000+

Information

Last Update

2019-01-16

Current Version

1.0.2

Size

489KiB

Author

Jess Telford

Website

None

Category

Developer Tools

Latest Reviews

See More

avatar Phillip Madsen
2020-11-19

does not work

avatar G García Díaz
2020-03-30

doesn't import anything

avatar Taylor Bunker
2019-05-17

Didn't work for me either.

avatar Simply
2019-02-14

Don't seem to work at all

avatar Davidson Nascimento
2017-12-05

Really work!