Extract to React
7 ratings
)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.
Phillip MadsenNov 19, 2020
does not work
Guillermo GarcíaMar 29, 2020
doesn't import anything
Taylor BunkerMay 17, 2019
Didn't work for me either.
Details
- Version1.0.2
- UpdatedJanuary 16, 2019
- Offered byJess Telford
- Size489KiB
- LanguagesEnglish (UK)
- Non-traderThis 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
Support
For help with questions, suggestions, or problems, please open this page on your desktop browser