{"id":16331151,"url":"https://github.com/steelydylan/markdown-it-safe-jsx","last_synced_at":"2025-10-04T09:11:49.901Z","repository":{"id":211869220,"uuid":"730063028","full_name":"steelydylan/markdown-it-safe-jsx","owner":"steelydylan","description":null,"archived":false,"fork":false,"pushed_at":"2023-12-14T08:18:43.000Z","size":31,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-09T00:02:15.059Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/steelydylan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2023-12-11T05:55:43.000Z","updated_at":"2024-04-28T17:28:59.000Z","dependencies_parsed_at":"2023-12-14T09:32:02.506Z","dependency_job_id":"9a53e782-2abe-4092-bb0b-37a6515c0d94","html_url":"https://github.com/steelydylan/markdown-it-safe-jsx","commit_stats":null,"previous_names":["steelydylan/markdown-it-safe-jsx"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steelydylan%2Fmarkdown-it-safe-jsx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steelydylan%2Fmarkdown-it-safe-jsx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steelydylan%2Fmarkdown-it-safe-jsx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steelydylan%2Fmarkdown-it-safe-jsx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/steelydylan","download_url":"https://codeload.github.com/steelydylan/markdown-it-safe-jsx/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238216906,"owners_count":19435614,"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":[],"created_at":"2024-10-10T23:25:49.921Z","updated_at":"2025-10-04T09:11:44.864Z","avatar_url":"https://github.com/steelydylan.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## markdown-it-safe-jsx\n\n```jsx\nimport MarkdownIt from 'markdown-it'\nimport { safeJsx } from 'markdown-it-safe-jsx'\n\nimport { TestComponent } from './TestComponent'\n\nconst md = new MarkdownIt()\nmd.use(safeJsx, {\n  components: {\n    TestComponent: (props) =\u003e \u003cTestComponent {...props} /\u003e\n  }\n})\nmd.render(`\u003cTestComponent test=\"test\"\u003e\u003c/TestComponent\u003e`)\n```\n\n### hydrate component\n\nSometimes You need to hydrate component, for example, if you want to use `useState` hook in your component.\n\n```jsx\n\nimport MarkdownIt from 'markdown-it'\nimport { safeJsx, useHydrateJsx } from 'markdown-it-safe-jsx'\n\nimport { TestComponent } from './TestComponent'\n\nfunction Markdown({ text }: { text: string }) {\n  const ref = useRef\u003cHTMLDivElement\u003e(null);\n\n  // hydrate component\n  useHydrateJsx({\n    components: {\n      Test\n    },\n    ref,\n  }, []);\n\n  const result = useMemo(() =\u003e {\n    const md = markdownIt({\n      breaks: true,\n      linkify: true,\n      html: true,\n    });\n    md.use(safeJsx, {\n      Test: (props: TestProps) =\u003e {\n        return \u003cTest {...props} /\u003e;\n      }\n    })\n    return md.render(text);\n  }, [text]);\n\n  return (\n    \u003cdiv dangerouslySetInnerHTML={{ __html: result }} ref={ref}\u003e\u003c/div\u003e\n  )\n}\n```\n\n### dangerously support function props\n\nIf you want to use function props, you can use `unsafeRenderFunction` and `unsafeHydrateFunction` options.\n\n```jsx\nimport MarkdownIt from 'markdown-it'\nimport { safeJsx, useHydrateJsx } from 'markdown-it-safe-jsx'\n\nimport { TestComponent } from './TestComponent'\n\nfunction Markdown({ text }: { text: string }) {\n  const ref = useRef\u003cHTMLDivElement\u003e(null);\n\n  // hydrate component\n  useHydrateJsx({\n    components: {\n      Test\n    },\n    ref,\n    unsafeHydrateFunction: true,\n  }, []);\n\n  const result = useMemo(() =\u003e {\n    const md = markdownIt({\n      breaks: true,\n      linkify: true,\n      html: true,\n    });\n    md.use(safeJsx, {\n      Test: (props: TestProps) =\u003e {\n        return \u003cTest {...props} /\u003e;\n      }\n    }, {\n      unsafeRenderFunction: true,\n    })\n    return md.render(text);\n  }, [text]);\n\n  return (\n    \u003cdiv dangerouslySetInnerHTML={{ __html: result }} ref={ref}\u003e\u003c/div\u003e\n  )\n}\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsteelydylan%2Fmarkdown-it-safe-jsx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsteelydylan%2Fmarkdown-it-safe-jsx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsteelydylan%2Fmarkdown-it-safe-jsx/lists"}