Developer Tools

Extract to React

1.7
7
1935
5

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:

Hello, world!

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

Extract to React
Related posts
Developer Tools

Browserling - Cross-browser testing

Developer Tools

Selenium Page Object Generator

Developer Tools

IP Address and Domain Information

Developer Tools

APK Downloader for Google Play Store™

5 Comments

Comments are closed.