Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/akinoccc/html-parser-react
The parser for html transform to react dom.
https://github.com/akinoccc/html-parser-react
html html-parser-react parser react
Last synced: about 2 months ago
JSON representation
The parser for html transform to react dom.
- Host: GitHub
- URL: https://github.com/akinoccc/html-parser-react
- Owner: akinoccc
- License: mit
- Created: 2022-03-24T14:24:43.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2022-04-01T16:39:55.000Z (almost 3 years ago)
- Last Synced: 2024-10-12T17:41:45.947Z (3 months ago)
- Topics: html, html-parser-react, parser, react
- Language: HTML
- Homepage:
- Size: 104 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Html-Parser-React
## Introduction
you may need to transform html string to react dom, so I develop this parser. you just need transmiting the html string which you want to parse and then you can get a react dom that you can use it as a component.
## Install
```bash
npm i html-parser-react --save
```
## Usage
### Basic
```js
import ReactDOM from 'react-dom';
import Parser from 'html-parser-react';
ReactDom.render(
this is a example!'} />,
document.getElementById('root')
);
```
### Render Data
you can use `{dataName}` to render data the same as react and you need to add actual data by props.
```js
import ReactDOM from 'react-dom';
import Parser from 'html-parser-react';
ReactDom.render(
render data example!
{content}
`}
data={{ content: 'render data' }}
>,
document.getElementById('root')
);
```
### Transform Function
you can transmit a transform function to parser component, then the parser will parse html dom by your function.
```js
import React from 'react-dom';
import ReactDOM from 'react-dom';
import Parser from 'html-parser-react';
ReactDom.render(
a transform function example`}
option={{
transform: () =>
React.createElement('div', { key: Math.random() }, ['transform'])
}}
>,
document.getElementById('root')
);
```
#### Arguments
`node`: the html dom.
`index`: the index of the node in relation to it's parent.
#### ReturnTypes
`null`: stop parsing current node and its child nodes.
`undefined`: if the function does not return anything or returns undefined, then the parser will continue was usual.
`react element`: react elements will be pushed in node tree directly.
## Maintainer
## Contributing
### fork
fork this project to your repo.
### clone the project
```bash
git clone https://github.com/vkm0303/html-parser-react.git
```
### start
```bash
npm run initial
```
### pull request
when you push your change, you can pull request on github and then I will check your code.
## License