{"id":16528805,"url":"https://github.com/akinoccc/html-parser-react","last_synced_at":"2026-06-08T17:31:09.325Z","repository":{"id":57686752,"uuid":"473639535","full_name":"akinoccc/html-parser-react","owner":"akinoccc","description":"The parser for html transform to react dom.","archived":false,"fork":false,"pushed_at":"2022-04-01T16:39:55.000Z","size":106,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-05-07T09:48:41.719Z","etag":null,"topics":["html","html-parser-react","parser","react"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/akinoccc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-03-24T14:24:43.000Z","updated_at":"2022-07-02T09:30:50.000Z","dependencies_parsed_at":"2022-09-19T08:25:05.001Z","dependency_job_id":null,"html_url":"https://github.com/akinoccc/html-parser-react","commit_stats":null,"previous_names":["vkm0303/html-parser-react","akinoccc/html-parser-react","akinocccc/html-parser-react"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/akinoccc/html-parser-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akinoccc%2Fhtml-parser-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akinoccc%2Fhtml-parser-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akinoccc%2Fhtml-parser-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akinoccc%2Fhtml-parser-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/akinoccc","download_url":"https://codeload.github.com/akinoccc/html-parser-react/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akinoccc%2Fhtml-parser-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34073649,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-08T02:00:07.615Z","response_time":111,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["html","html-parser-react","parser","react"],"created_at":"2024-10-11T17:41:47.124Z","updated_at":"2026-06-08T17:31:09.271Z","avatar_url":"https://github.com/akinoccc.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Html-Parser-React\n\n\u003cdiv style=\"display: flex;\"\u003e\n  \u003cimg style=\"margin-right: 10px\" src=\"https://img.shields.io/npm/v/html-parser-react\" /\u003e\n  \u003cimg style=\"margin-right: 10px\" src=\"https://img.shields.io/travis/vkm0303/html-parser-react\"/\u003e\n  \u003cimg style=\"margin-right: 10px\" src=\"https://img.shields.io/coveralls/github/vkm0303/html-parser-react.svg\"/\u003e\n  \u003cimg style=\"margin-right: 10px\" src=\"https://img.shields.io/npm/dw/html-parser-react\"/\u003e\n  \u003cimg style=\"margin-right: 10px\" src=\"https://img.shields.io/bundlephobia/min/html-parser-react\"/\u003e\n  \u003cimg style=\"margin-right: 10px\" src=\"https://img.shields.io/github/license/vkm0303/html-parser-react\"/\u003e\n\u003c/div\u003e\n\n## Introduction\n\nyou 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.\n\n## Install\n\n```bash\nnpm i html-parser-react --save\n```\n\n## Usage\n\n### Basic\n\n```js\nimport ReactDOM from 'react-dom';\nimport Parser from 'html-parser-react';\nReactDom.render(\n  \u003cParser htmlstr={'\u003ch1 style=\"font-weight: 700;\"\u003ethis is a example!\u003c/h1\u003e'} /\u003e,\n  document.getElementById('root')\n);\n```\n\n### Render Data\n\nyou can use `{dataName}` to render data the same as react and you need to add actual data by props.\n\n```js\nimport ReactDOM from 'react-dom';\nimport Parser from 'html-parser-react';\nReactDom.render(\n  \u003cParser\n    htmlStr={`\n      \u003ch1 style=\"font-weight: 700\"\u003erender data example!\u003c/h1\u003e\n      \u003cspan\u003e{content}\u003c/span\u003e\n    `}\n    data={{ content: 'render data' }}\n  \u003e\u003c/Parser\u003e,\n  document.getElementById('root')\n);\n```\n\n### Transform Function\n\nyou can transmit a transform function to parser component, then the parser will parse html dom by your function.\n\n```js\nimport React from 'react-dom';\nimport ReactDOM from 'react-dom';\nimport Parser from 'html-parser-react';\nReactDom.render(\n  \u003cParser\n    key='transform'\n    htmlStr={`\u003cdiv\u003ea transform function example\u003c/div\u003e`}\n    option={{\n      transform: () =\u003e\n        React.createElement('div', { key: Math.random() }, ['transform'])\n    }}\n  \u003e\u003c/Parser\u003e,\n  document.getElementById('root')\n);\n```\n\n#### Arguments\n\n`node`: the html dom.\n\n`index`: the index of the node in relation to it's parent.\n\n#### ReturnTypes\n\n`null`: stop parsing current node and its child nodes.\n\n`undefined`: if the function does not return anything or returns undefined, then the parser will continue was usual.\n\n`react element`: react elements will be pushed in node tree directly.\n\n## Maintainer\n\n\u003ca href=\"https://github.com/vkm0303\" target=\"_blank\"\u003e\u003cimg style=\"width: 40px;height:40px; border-radius: 50%;\" src=\"https://avatars.githubusercontent.com/u/64176534?v=4\"\u003e\u003c/img\u003e\u003c/a\u003e\n\n## Contributing\n\n### fork\n\nfork this project to your repo.\n\n### clone the project\n\n```bash\ngit clone https://github.com/vkm0303/html-parser-react.git\n```\n\n### start\n\n```bash\nnpm run initial\n```\n\n### pull request\n\nwhen you push your change, you can pull request on github and then I will check your code.\n\n## License\n\n\u003ca style=\"font-size: 20px\" href=\"/LICENSE\"\u003eMIT\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakinoccc%2Fhtml-parser-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fakinoccc%2Fhtml-parser-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakinoccc%2Fhtml-parser-react/lists"}