{"id":15494058,"url":"https://github.com/thomasthiebaud/htmlstring-to-react","last_synced_at":"2025-04-22T20:22:39.312Z","repository":{"id":32694899,"uuid":"140104326","full_name":"thomasthiebaud/htmlstring-to-react","owner":"thomasthiebaud","description":"Convert a string containing html tags to an array of React elements. Light and secure","archived":false,"fork":false,"pushed_at":"2024-12-08T11:50:14.000Z","size":1243,"stargazers_count":3,"open_issues_count":3,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-15T08:08:54.078Z","etag":null,"topics":["html-parser","react","react-parser"],"latest_commit_sha":null,"homepage":"","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/thomasthiebaud.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"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":"2018-07-07T17:30:11.000Z","updated_at":"2024-12-08T11:50:16.000Z","dependencies_parsed_at":"2024-06-20T21:59:00.370Z","dependency_job_id":"f7dc5e92-7637-4f0e-bb42-4d6c9f67a8da","html_url":"https://github.com/thomasthiebaud/htmlstring-to-react","commit_stats":{"total_commits":97,"total_committers":3,"mean_commits":"32.333333333333336","dds":0.3298969072164949,"last_synced_commit":"742d75078dac524ba612d3df7e2bde0102d5db82"},"previous_names":[],"tags_count":29,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thomasthiebaud%2Fhtmlstring-to-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thomasthiebaud%2Fhtmlstring-to-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thomasthiebaud%2Fhtmlstring-to-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thomasthiebaud%2Fhtmlstring-to-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thomasthiebaud","download_url":"https://codeload.github.com/thomasthiebaud/htmlstring-to-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250316369,"owners_count":21410527,"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":["html-parser","react","react-parser"],"created_at":"2024-10-02T08:10:55.874Z","updated_at":"2025-04-22T20:22:39.284Z","avatar_url":"https://github.com/thomasthiebaud.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# htmlstring-to-react\n\n## Why ?\n\nThis module provide an easy way to parse a string containing html elements to an array of React elements. It tries to focus to security (using [DOMPurify](https://github.com/cure53/DOMPurify)) and keeping the bundle as small as possible\n\nIt is heavily inspired by [html2react](https://github.com/Deschtex/html2react) and [html-react-parser](https://github.com/remarkablemark/html-react-parser)\n\n## How to install ?\n\n    npm install htmlstring-to-react\n    // or\n    yarn add htmlstring-to-react\n\n## How to use ?\n\n### Simple example\n\n    import { parse } from 'htmlstring-to-react'\n    parse('\u003cem key=\"1\"\u003e\u003cb key=\"2\"\u003eIt\\' is working\u003c/b\u003e\u003c/em\u003e')\n\n### Add an override\n\nYou can use css selectors to override an element\n\n    import { parse } from 'htmlstring-to-react'\n    parse('\u003cb key=\"1\"\u003eIt\u003c/b\u003e is \u003cb key=\"2\"\u003eworking\u003c/b\u003e', {\n      overrides: {\n        b: (props, textContent) =\u003e \u003cb onClick={console.log('Click')}\u003e{textContent}\u003c/b\u003e\n      },\n    })\n\nAll valid css selectors works\n\n    import { parse } from 'htmlstring-to-react'\n    parse('\u003cb key=\"1\"\u003eIt\u003c/b\u003e is \u003cb key=\"2\" class=\"active\"\u003eworking\u003c/b\u003e', {\n      overrides: {\n        'b.active': (props, textContent) =\u003e \u003cb onClick={console.log('Click')}\u003e{textContent}\u003c/b\u003e\n      },\n    })\n\n**IMPORTANT** Overrides do not support nested elements in the current stage, so this code\n\n    import { parse } from 'htmlstring-to-react'\n    parse('\u003cb key=\"1\"\u003e\u003cb key=\"2\"\u003eIt is working\u003c/b\u003e\u003c/b\u003e', {\n      overrides: {\n        b: (props, textContent) =\u003e \u003cb onClick={console.log('Click')}\u003e{textContent}\u003c/b\u003e\n      },\n    })\n\nwill drop the inner `b` but keep the textContent\n\n### Change dom parsing configuration\n\nBy default, we are sanitizing the html input using `DOMPurify` module. You can override the configuration we are using\n\n    import { parse } from 'htmlstring-to-react'\n    parse('\u003cb key=\"1\"\u003eIt\u003c/b\u003e is \u003cb key=\"2\" class=\"active\"\u003eworking\u003c/b\u003e', {\n      dom: {\n        ADD_TAG: ['script']\n      },\n    })\n\n**IMPORTANT** You cannot override `RETURN_DOM`, `RETURN_DOM_FRAGMENT` and `RETURN_DOM_IMPORT` because they are used internaly by the library.\n\n### Other options\n\n- **useFragment** (default `false`): Return a Fragment instead of an array.\n- **useAsKey** (default `['key']`): Ordered list of attributes to use as a key. Use the first one that matches or `null`\n\n## How to contribute ?\n\nThis repo enforce commit style so the release process is automatic. Commits must look like:\n\n    \u003cSUBJECT\u003e: Message starting with an uppercase\n\nwhere SUBJECT is one of: `Fix`, `Update`, `New`, `Breaking`, `Docs`, `Build`, `Upgrade`, `Chore`\n\n## Found a problem ?\n\nPlease open an issue or submit a PR, I will be more than happy to help\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthomasthiebaud%2Fhtmlstring-to-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthomasthiebaud%2Fhtmlstring-to-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthomasthiebaud%2Fhtmlstring-to-react/lists"}