next() Packaged Middleware

    rehype-react
    TypeScript icon, indicating that this package has built-in type declarations

    7.1.1 • Public • Published

    rehype-react

    Build Coverage Downloads Size Sponsors Backers Chat

    rehype plugin to compile HTML to React nodes.

    Contents

    What is this?

    This package is a unified (rehype) plugin that compiles HTML (hast) to React nodes (the virtual DOM that React uses).

    unified is a project that transforms content with abstract syntax trees (ASTs). rehype adds support for HTML to unified. hast is the HTML AST that rehype uses. This is a rehype plugin that adds a compiler to compile hast to React nodes.

    When should I use this?

    This plugin adds a compiler for rehype, which means that it turns the final HTML (hast) syntax tree into something else (in this case, a React node). It’s useful when you’re already using unified (whether remark or rehype) or are open to learning about ASTs (they’re powerful!) and want to render content in your React app.

    If you’re not familiar with unified, then react-markdown might be a better fit. You can also use react-remark instead, which is somewhere between rehype-react and react-markdown, as it does more that the former and is more modern (such as supporting hooks) than the latter, and also a good alternative. If you want to use JavaScript and JSX inside markdown files, use MDX.

    Install

    This package is ESM only. In Node.js (version 12.20+, 14.14+, or 16.0+), install with npm:

    npm install rehype-react

    In Deno with esm.sh:

    import rehypeReact from 'https://esm.sh/rehype-react@7'

    In browsers with esm.sh:

    <script type="module">
      import rehypeReact from 'https://esm.sh/rehype-react@7?bundle'
    </script>

    Use

    Say our React app module example.js looks as follows:

    import {createElement, Fragment, useEffect, useState} from 'react'
    import {unified} from 'unified'
    import rehypeParse from 'rehype-parse'
    import rehypeReact from 'rehype-react'
    
    const text = `<h2>Hello, world!</h2>
    <p>Welcome to my page 👀</p>`
    
    function useProcessor(text) {
      const [Content, setContent] = useState(Fragment)
    
      useEffect(() => {
        unified()
          .use(rehypeParse, {fragment: true})
          .use(rehypeReact, {createElement, Fragment})
          .process(text)
          .then((file) => {
            setContent(file.result)
          })
      }, [text])
    
      return Content
    }
    
    export default function App() {
      return useProcessor(text)
    }

    Assuming that runs in Next.js, Create React App (CRA), or similar, we’d get:

    <h2>Hello, world!</h2>
    <p>Welcome to my page 👀</p>

    API

    This package exports no identifiers. The default export is rehypeReact.

    unified().use(rehypeReact, options)

    Compile HTML to React nodes.

    👉 Note: this compiler returns a React node where compilers typically return string. When using .stringify, the result is such a React node. When using .process (or .processSync), the result is available at file.result.

    options

    Configuration (optional).

    options.createElement

    How to create elements or components (Function, required). You should typically pass React.createElement.

    options.Fragment

    Create fragments instead of an outer <div> if available (symbol). You should typically pass React.Fragment.

    options.components

    Override default elements (such as <a>, <p>, etc.) by passing an object mapping tag names to components (Record<string, Component>, default: {}).

    For example, to use <MyLink> components instead of <a>, and <MyParagraph> instead of <p>, so something like this:

      // …
      .use(rehypeReact, {
        createElement: React.createElement,
        components: {
          a: MyLink,
          p: MyParagraph
        }
      })
      // …
    options.prefix

    React key prefix (string, default: 'h-').

    options.passNode

    Pass the original hast node as props.node to custom React components (boolean, default: false).

    Types

    This package is fully typed with TypeScript. It exports an Options type, which specifies the interface of the accepted options.

    Compatibility

    Projects maintained by the unified collective are compatible with all maintained versions of Node.js. As of now, that is Node.js 12.20+, 14.14+, and 16.0+. Our projects sometimes work with older versions, but this is not guaranteed.

    This plugin works with rehype-parse version 3+, rehype version 4+, and unified version 9+, and React 16+.

    Security

    Use of rehype-react can open you up to a cross-site scripting (XSS) attack if the tree is unsafe. Use rehype-sanitize to make the tree safe.

    Related

    Contribute

    See contributing.md in rehypejs/.github for ways to get started. See support.md for ways to get help.

    This project has a code of conduct. By interacting with this repository, organization, or community you agree to abide by its terms.

    License

    MIT © Titus Wormer, modified by Tom MacWright, Mapbox, and rhysd.

    Install

    npm i rehype-react

    DownloadsWeekly Downloads

    60,162

    Version

    7.1.1

    License

    MIT

    Unpacked Size

    19.2 kB

    Total Files

    9

    Last publish

    Collaborators

    • wooorm
    • kmck