{"id":13565698,"url":"https://github.com/rehypejs/rehype-react","last_synced_at":"2025-05-13T23:03:54.670Z","repository":{"id":45129612,"uuid":"70198154","full_name":"rehypejs/rehype-react","owner":"rehypejs","description":"plugin to transform to preact, react, vue, etc","archived":false,"fork":false,"pushed_at":"2025-02-25T10:52:44.000Z","size":359,"stargazers_count":419,"open_issues_count":0,"forks_count":23,"subscribers_count":8,"default_branch":"main","last_synced_at":"2025-04-30T08:51:44.283Z","etag":null,"topics":["preact","react","rehype","rehype-plugin","solid","vue"],"latest_commit_sha":null,"homepage":"https://unifiedjs.com","language":"JavaScript","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/rehypejs.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"unifiedjs","open_collective":"unified"}},"created_at":"2016-10-06T22:28:01.000Z","updated_at":"2025-04-30T06:43:28.000Z","dependencies_parsed_at":"2025-03-16T12:00:26.845Z","dependency_job_id":"8707f4c9-d48c-4f6f-a37a-42ee8acaa0dc","html_url":"https://github.com/rehypejs/rehype-react","commit_stats":{"total_commits":195,"total_committers":21,"mean_commits":9.285714285714286,"dds":0.4461538461538461,"last_synced_commit":"93fac074e8e3447088ed2408282e9e089ea7b36c"},"previous_names":[],"tags_count":32,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rehypejs%2Frehype-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rehypejs%2Frehype-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rehypejs%2Frehype-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rehypejs%2Frehype-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rehypejs","download_url":"https://codeload.github.com/rehypejs/rehype-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254040315,"owners_count":22004503,"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":["preact","react","rehype","rehype-plugin","solid","vue"],"created_at":"2024-08-01T13:01:53.269Z","updated_at":"2025-05-13T23:03:54.646Z","avatar_url":"https://github.com/rehypejs.png","language":"JavaScript","readme":"# rehype-react\n\n[![Build][badge-build-image]][badge-build-url]\n[![Coverage][badge-coverage-image]][badge-coverage-url]\n[![Downloads][badge-downloads-image]][badge-downloads-url]\n[![Size][badge-size-image]][badge-size-url]\n\n**[rehype][github-rehype]**\nplugin to turn HTML into preact, react, solid, svelte, vue, etc.\n\n## Contents\n\n* [What is this?](#what-is-this)\n* [When should I use this?](#when-should-i-use-this)\n* [Install](#install)\n* [Use](#use)\n* [API](#api)\n  * [`unified().use(rehypeReact, options)`](#unifieduserehypereact-options)\n  * [`Components`](#components)\n  * [`Options`](#options)\n* [Types](#types)\n* [Compatibility](#compatibility)\n* [Security](#security)\n* [Related](#related)\n* [Contribute](#contribute)\n* [License](#license)\n\n## What is this?\n\nThis package is a [unified][github-unified]\n([rehype][github-rehype])\nplugin that compiles HTML (hast) to any JSX runtime\n(preact, react, solid, svelte, vue, etc).\n\n**unified** is a project that transforms content with abstract syntax trees\n(ASTs).\n**rehype** adds support for HTML to unified.\n**hast** is the HTML AST that rehype uses.\nThis is a rehype plugin that adds a compiler to compile hast to a JSX runtime.\n\n## When should I use this?\n\nThis plugin adds a compiler for rehype,\nwhich means that it turns the final HTML (hast) syntax tree into something else\n(in this case `JSX.Element`).\nIt’s useful when you’re already using unified (whether remark or rehype) or are\nopen to learning about ASTs (they’re powerful!) and want to render content in\nyour app.\n\nIf you’re not familiar with unified,\nthen [`react-markdown`][github-react-markdown]\nmight be a better fit.\nYou can also use [`react-remark`][github-react-remark] instead,\nwhich is somewhere between `rehype-react` and `react-markdown`,\nas it does more that the former and is more modern (such as supporting hooks)\nthan the latter,\nand also a good alternative.\nIf you want to use JavaScript and JSX *inside* markdown files,\nuse [MDX][github-mdx].\n\n## Install\n\nThis package is [ESM only][github-gist-esm].\nIn Node.js (version 16+),\ninstall with [npm][npmjs-install]:\n\n```sh\nnpm install rehype-react\n```\n\nIn Deno with [`esm.sh`][esmsh]:\n\n```js\nimport rehypeReact from 'https://esm.sh/rehype-react@8'\n```\n\nIn browsers with [`esm.sh`][esmsh]:\n\n```html\n\u003cscript type=\"module\"\u003e\n  import rehypeReact from 'https://esm.sh/rehype-react@8?bundle'\n\u003c/script\u003e\n```\n\n## Use\n\nSay our React app `example.js` looks as follows:\n\n```js\nimport {Fragment, createElement, useEffect, useState} from 'react'\nimport production from 'react/jsx-runtime'\nimport rehypeParse from 'rehype-parse'\nimport rehypeReact from 'rehype-react'\nimport {unified} from 'unified'\n\nconst text = `\n\u003ch2\u003eBonjour!\u003c/h2\u003e\n\u003cp\u003eMercure est la planète la plus proche du Soleil et la moins massive du Système solaire.\u003c/p\u003e\n`\n\nexport default function App() {\n  return useProcessor(text)\n}\n\n\n/**\n * @param {string} text\n * @returns {React.JSX.Element}\n */\nfunction useProcessor(text) {\n  const [Content, setContent] = useState(createElement(Fragment))\n\n  useEffect(\n    function () {\n      ;(async function () {\n        const file = await unified()\n          .use(rehypeParse, {fragment: true})\n          .use(rehypeReact, production)\n          .process(text)\n\n        setContent(file.result)\n      })()\n    },\n    [text]\n  )\n\n  return Content\n}\n```\n\n…running that in Next.js or similar,\nwe’d get:\n\n```html\n\u003ch2\u003eBonjour!\u003c/h2\u003e\n\u003cp\u003eMercure est la planète la plus proche du Soleil et la moins massive du Système solaire.\u003c/p\u003e\n```\n\n## API\n\nThis package exports no identifiers.\nThe default export is [`rehypeReact`][api-rehype-react].\n\n### `unified().use(rehypeReact, options)`\n\nTurn HTML into preact, react, solid, svelte, vue, etc.\n\n###### Parameters\n\n* `options`\n  ([`Options`][api-options],\n  required)\n  — configuration\n\n###### Returns\n\nNothing (`undefined`).\n\n###### Result\n\nThis plugin registers a compiler that returns a `JSX.Element` where compilers\ntypically return `string`.\nWhen using `.stringify` on `unified`,\nthe result is such a `JSX.Element`.\nWhen using `.process` (or `.processSync`),\nthe result is available at `file.result`.\n\n###### Frameworks\n\nThere are differences between what JSX frameworks accept,\nsuch as whether they accept `class` or `className`,\nor `background-color` or `backgroundColor`.\n\nFor hast elements transformed by this project,\nthis is be handled through options:\n\n| Framework | `elementAttributeNameCase` | `stylePropertyNameCase` |\n| --------- | -------------------------- | ----------------------- |\n| Preact    | `'html'`                   | `'dom'`                 |\n| React     | `'react'`                  | `'dom'`                 |\n| Solid     | `'html'`                   | `'css'`                 |\n| Vue       | `'html'`                   | `'dom'`                 |\n\n### `Components`\n\nPossible components to use (TypeScript type).\n\nSee [`Components` from\n`hast-util-to-jsx-runtime`](https://github.com/syntax-tree/hast-util-to-jsx-runtime#components)\nfor more info.\n\n### `Options`\n\nConfiguration (TypeScript type).\n\n###### Fields\n\n* `Fragment`\n  ([`Fragment` from\n  `hast-util-to-jsx-runtime`][github-hast-util-to-jsx-runtime-fragment],\n  required)\n  — fragment\n* `jsx`\n  ([`Jsx` from\n  `hast-util-to-jsx-runtime`][github-hast-util-to-jsx-runtime-jsx],\n  required in production)\n  — dynamic JSX\n* `jsxs`\n  ([`Jsx` from\n  `hast-util-to-jsx-runtime`][github-hast-util-to-jsx-runtime-jsx],\n  required in production)\n  — static JSX\n* `jsxDEV`\n  ([`JsxDev` from\n  `hast-util-to-jsx-runtime`](https://github.com/syntax-tree/hast-util-to-jsx-runtime#jsxdev),\n  required in development)\n  — development JSX\n* `components`\n  ([`Partial\u003cComponents\u003e`][api-components], optional)\n  — components to use\n* `development`\n  (`boolean`, default: `false`)\n  — whether to use `jsxDEV` when on or `jsx` and `jsxs` when off\n* `elementAttributeNameCase`\n  (`'html'` or `'react'`, default: `'react'`)\n  — specify casing to use for attribute names\n* `passNode`\n  (`boolean`, default: `false`)\n  — pass the hast element node to components\n* `space`\n  (`'html'` or `'svg'`, default: `'html'`)\n  — whether `tree` is in the `'html'` or `'svg'` space,\n  when an `\u003csvg\u003e` element is found in the HTML space,\n  this package already automatically switches to and from the SVG space when\n  entering and exiting it\n* `stylePropertyNameCase`\n  (`'css'` or `'dom'`, default: `'dom'`)\n  — specify casing to use for property names in `style` objects\n* `tableCellAlignToStyle`\n  (`boolean`, default: `true`)\n  — turn obsolete `align` props on `td` and `th` into CSS `style` props\n\n## Types\n\nThis package is fully typed with [TypeScript][].\nIt exports the additional types [`Components`][api-components] and\n[`Options`][api-options].\nMore advanced types are exposed from\n[`hast-util-to-jsx-runtime`][github-hast-util-to-jsx-runtime].\n\n## Compatibility\n\nProjects maintained by the unified collective are compatible with maintained\nversions of Node.js.\n\nWhen we cut a new major release,\nwe drop support for unmaintained versions of Node.\nThis means we try to keep the current release line,\n`rehype-react@8`,\ncompatible with Node.js 17.\n\nThis plugin works with `rehype-parse` version 3+,\n`rehype` version 4+,\nand `unified` version 9+,\nand React 18+.\n\n## Security\n\nUse of `rehype-react` can open you up to a\n[cross-site scripting (XSS)][wikipedia-xss]\nattack if the tree is unsafe.\nUse [`rehype-sanitize`][github-rehype-sanitize] to make the tree safe.\n\n## Related\n\n* [`remark-rehype`](https://github.com/remarkjs/remark-rehype)\n  — turn markdown into HTML to support rehype\n* [`rehype-remark`](https://github.com/rehypejs/rehype-remark)\n  — turn HTML into markdown to support remark\n* [`rehype-retext`](https://github.com/rehypejs/rehype-retext)\n  — rehype plugin to support retext\n* [`rehype-sanitize`][github-rehype-sanitize]\n  — sanitize HTML\n\n## Contribute\n\nSee [`contributing.md`][health-contributing]\nin\n[`rehypejs/.github`][health]\nfor ways to get started.\nSee\n[`support.md`][health-support]\nfor ways to get help.\n\nThis project has a [code of conduct][health-coc].\nBy interacting with this repository,\norganization,\nor community you agree to abide by its terms.\n\n## License\n\n[MIT][file-license] © [Titus Wormer][wooorm],\nmodified by [Tom MacWright][macwright],\n[Mapbox][],\nand [rhysd][].\n\n\u003c!-- Definitions --\u003e\n\n[api-components]: #components\n\n[api-options]: #options\n\n[api-rehype-react]: #unifieduserehypereact-options\n\n[badge-build-image]: https://github.com/rehypejs/rehype-react/workflows/main/badge.svg\n\n[badge-build-url]: https://github.com/rehypejs/rehype-react/actions\n\n[badge-coverage-image]: https://img.shields.io/codecov/c/github/rehypejs/rehype-react.svg\n\n[badge-coverage-url]: https://codecov.io/github/rehypejs/rehype-react\n\n[badge-downloads-image]: https://img.shields.io/npm/dm/rehype-react.svg\n\n[badge-downloads-url]: https://www.npmjs.com/package/rehype-react\n\n[badge-size-image]: https://img.shields.io/bundlejs/size/rehype-react\n\n[badge-size-url]: https://bundlejs.com/?q=rehype-react\n\n[esmsh]: https://esm.sh\n\n[file-license]: license\n\n[github-gist-esm]: https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c\n\n[github-hast-util-to-jsx-runtime]: https://github.com/syntax-tree/hast-util-to-jsx-runtime\n\n[github-hast-util-to-jsx-runtime-fragment]: https://github.com/syntax-tree/hast-util-to-jsx-runtime#fragment\n\n[github-hast-util-to-jsx-runtime-jsx]: https://github.com/syntax-tree/hast-util-to-jsx-runtime#jsx\n\n[github-mdx]: https://github.com/mdx-js/mdx/\n\n[github-react-markdown]: https://github.com/remarkjs/react-markdown\n\n[github-react-remark]: https://github.com/remarkjs/react-remark\n\n[github-rehype]: https://github.com/rehypejs/rehype\n\n[github-rehype-sanitize]: https://github.com/rehypejs/rehype-sanitize\n\n[github-unified]: https://github.com/unifiedjs/unified\n\n[health]: https://github.com/rehypejs/.github\n\n[health-coc]: https://github.com/rehypejs/.github/blob/main/code-of-conduct.md\n\n[health-contributing]: https://github.com/rehypejs/.github/blob/main/contributing.md\n\n[health-support]: https://github.com/rehypejs/.github/blob/main/support.md\n\n[macwright]: https://macwright.org\n\n[mapbox]: https://www.mapbox.com\n\n[npmjs-install]: https://docs.npmjs.com/cli/install\n\n[rhysd]: https://rhysd.github.io\n\n[typescript]: https://www.typescriptlang.org\n\n[wikipedia-xss]: https://en.wikipedia.org/wiki/Cross-site_scripting\n\n[wooorm]: https://wooorm.com\n","funding_links":["https://github.com/sponsors/unifiedjs","https://opencollective.com/unified"],"categories":["JavaScript","Plugins"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frehypejs%2Frehype-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frehypejs%2Frehype-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frehypejs%2Frehype-react/lists"}