Extract to React Chrome Extension

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

How to install Extract to React chrome extension in chrome Browser

You can Follow the below Step By Step procedure to install the Extract to React Chrome Extension to your Chrome Web browser.

• Step 1: Go to the Chrome webstore https://chrome.google.com/webstore or download the extension Extract to React Chrome Extension Download from https://pluginsaddonsextensions.com
• Step 2: Now search for the Extract to React in Chrome Webstore Search and click on the search button.
• Step 3: click on the Extract to React Chrome Extension Link
• Step 4: in the next page click on the Add to Chrome button to Download and Install the Extract to React extension for your Chrome Web browser .