{"id":16908380,"url":"https://github.com/gilbarbara/react-from-dom","last_synced_at":"2025-04-04T19:14:06.779Z","repository":{"id":35026206,"uuid":"198004655","full_name":"gilbarbara/react-from-dom","owner":"gilbarbara","description":"Convert HTML/XML source code or DOM nodes to React elements","archived":false,"fork":false,"pushed_at":"2025-01-14T12:52:53.000Z","size":1872,"stargazers_count":28,"open_issues_count":1,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-02T01:36:00.516Z","etag":null,"topics":["converter","dangerouslysetinnerhtml","dom-node","react"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/gilbarbara.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-07-21T02:49:56.000Z","updated_at":"2025-01-14T12:52:54.000Z","dependencies_parsed_at":"2024-10-25T18:43:24.723Z","dependency_job_id":"55a51ac8-ab75-4da3-abb6-5483aaea9380","html_url":"https://github.com/gilbarbara/react-from-dom","commit_stats":{"total_commits":48,"total_committers":2,"mean_commits":24.0,"dds":0.02083333333333337,"last_synced_commit":"01eec4a015f55ab4eb46b8d7de8343745d2f0653"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gilbarbara%2Freact-from-dom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gilbarbara%2Freact-from-dom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gilbarbara%2Freact-from-dom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gilbarbara%2Freact-from-dom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gilbarbara","download_url":"https://codeload.github.com/gilbarbara/react-from-dom/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247234923,"owners_count":20905854,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["converter","dangerouslysetinnerhtml","dom-node","react"],"created_at":"2024-10-13T18:51:16.081Z","updated_at":"2025-04-04T19:14:06.761Z","avatar_url":"https://github.com/gilbarbara.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-from-dom\n\n[![NPM version](https://badge.fury.io/js/react-from-dom.svg)](https://www.npmjs.com/package/react-from-dom) [![CI](https://github.com/gilbarbara/react-from-dom/actions/workflows/main.yml/badge.svg)](https://github.com/gilbarbara/react-from-dom/actions/workflows/main.yml) [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=gilbarbara_react-from-dom\u0026metric=alert_status)](https://sonarcloud.io/summary/new_code?id=gilbarbara_react-from-dom) [![Coverage](https://sonarcloud.io/api/project_badges/measure?project=gilbarbara_react-from-dom\u0026metric=coverage)](https://sonarcloud.io/summary/new_code?id=gilbarbara_react-from-dom)\n\nConvert HTML/XML source code or a DOM node to a React element.  \nThe perfect replacement for React's `dangerouslySetInnerHTML`\n\n\n## Setup\n\nInstall it\n```shell-script\nnpm install react-from-dom\n```\n\n## Getting Started\n\nSet a string with HTML/XML source code OR a DOM Node, which will be used to create React elements recursively.\n\n```jsx\nimport React from 'react';\nimport convert from 'react-from-dom';\n\nconst panel = convert(`\n\u003cdiv class=\"panel\"\u003e\n  \u003cdiv class=\"panel-header\"\u003e\n    \u003ch2\u003eTitle\u003c/h2\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"panel-content\"\u003e\n    \u003cul\u003e\n      \u003cli\u003eline 1\u003c/li\u003e\n      \u003cli\u003eline 2\u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"panel-footer\"\u003e\n    Footer\n  \u003c/div\u003e\n\u003c/div\u003e\n`);\n\nconst audio = document.createElement('audio');\naudio.setAttribute('controls', 'true');\naudio.setAttribute(\n  'src',\n  'https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3',\n);\nconst audioContent = document.createTextNode('Your browser does not support the audio element.');\naudio.appendChild(audioContent);\n\nconst audioElement = convert(audio);\n\nconst App = () =\u003e (\n  \u003cdiv\u003e\n    {panel}\n    {audioElement}\n  \u003c/div\u003e\n);\n```\n## API\n\nThe function accepts two parameters:\n\n**input** `string|Node`  - *required*  \nAn HTML/XML source code string or a DOM node.\n\n**options** `Options`\n\n- **actions** `Action[]`  \n  An array of actions to modify the nodes before converting them to ReactNodes.  \n  *Read about them below.*\n- **allowWhiteSpaces** `boolean` ▶︎ **false**  \n  Don't remove white spaces in the output.\n- **includeAllNodes** `boolean` ▶︎ **false**  \n  Parse all nodes instead of just a single parent node.  \n  This will return a ReactNode array (or a NodeList if `nodeOnly` is true)\n- **Index** `number` ▶︎ **0**  \n  The index to start the React key identification.\n- **level** `number` ▶︎ **0**  \n  The level to start the React key identification.\n- **nodeOnly** `boolean` ▶︎ **false**  \n  Return the node (or NodeList) without converting it to a ReactNode.  \n  *Only used for string inputs.*\n- **randomKey** `boolean` ▶︎ **false**  \n  Add a random key to the root element.\n- **selector** `string` ▶︎ **body \u003e ***  \n  The selector to use in the `document.querySelector` method.  \n  *Only used for string inputs.*\n- **type** `DOMParserSupportedType` ▶︎ **text/html**  \n  The mimeType to use in the DOMParser's parseFromString.  \n  *Only used for string inputs.*\n\n### Actions\n\nYou can mutate/update a Node before the conversion or replace it with a ReactNode.\n\n```tsx\n{\n  // If this returns true, the two following functions are called if they are defined\n  condition: (node: Node, key: string, level: number) =\u003e boolean;\n\n  // Use this to update or replace the node\n  // e.g. for removing or adding attributes, changing the node type\n  pre?: (node: Node, key: string, level: number) =\u003e Node;\n\n  // Use this to inject a component or remove the node\n  // It must return something that can be rendered by React\n  post?: (node: Node, key: string, level: number) =\u003e React.ReactNode;\n}\n```\n\n#### Examples\n\n##### Add a class to all elements that match.\n\n```javascript\n{\n  condition: node =\u003e node.nodeName.toLowerCase() === 'div',\n  pre: node =\u003e {\n    node.className += ' a-class-added';\n    return node;\n  },\n}\n```\n\n##### Remove all elements with a specific class.\n```javascript\n{\n  condition: node =\u003e node.className.indexOf('delete-me') \u003e= 0,\n  post: () =\u003e null,\n}\n```\n\n##### Return a react component for some node types.\n```javascript\n{\n  condition: node =\u003e node.nodeName.toLowerCase() === 'pre',\n  post: (node, key) =\u003e (\n    \u003cReactMarkdown key={key} source={node.textContent} /\u003e\n  ),\n},\n```\n\n##### Transform one node into another and preserve the child nodes.\n```javascript\n{\n  condition: node =\u003e node.nodeName.toLowerCase() === 'ul',\n  pre: (node) =\u003e {\n    const ol = document.createElement('ol');\n    \n    [...node.childNodes].forEach(child =\u003e {\n      ol.appendChild(child);\n    });\n    \n    return ol;\n  }\n}\n```\n\n## Browser Support\n\nIf you need to support legacy browsers, you'll need to include a polyfiil for `Number.isNaN` in your app.\n\n## Credits\n\nThis is a fork from the [dom-to-react](https://github.com/diva-e/dom-to-react) package. Thanks! ❤️\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgilbarbara%2Freact-from-dom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgilbarbara%2Freact-from-dom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgilbarbara%2Freact-from-dom/lists"}