RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/rehypejs/rehype-react below:

rehypejs/rehype-react: plugin to transform to preact, react, vue, etc

rehype plugin to turn HTML into preact, react, solid, svelte, vue, etc.

This package is a unified (rehype) plugin that compiles HTML (hast) to any JSX runtime (preact, react, solid, svelte, vue, etc).

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 a JSX runtime.

This plugin adds a compiler for rehype, which means that it turns the final HTML (hast) syntax tree into something else (in this case JSX.Element). 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 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.

This package is ESM only. In Node.js (version 16+), install with npm:

In Deno with esm.sh:

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

In browsers with esm.sh:

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

Say our React app example.js looks as follows:

import {Fragment, createElement, useEffect, useState} from 'react'
import production from 'react/jsx-runtime'
import rehypeParse from 'rehype-parse'
import rehypeReact from 'rehype-react'
import {unified} from 'unified'

const text = `
<h2>Bonjour!</h2>
<p>Mercure est la planète la plus proche du Soleil et la moins massive du Système solaire.</p>
`

export default function App() {
  return useProcessor(text)
}


/**
 * @param {string} text
 * @returns {React.JSX.Element}
 */
function useProcessor(text) {
  const [Content, setContent] = useState(createElement(Fragment))

  useEffect(
    function () {
      ;(async function () {
        const file = await unified()
          .use(rehypeParse, {fragment: true})
          .use(rehypeReact, production)
          .process(text)

        setContent(file.result)
      })()
    },
    [text]
  )

  return Content
}

…running that in Next.js or similar, we’d get:

<h2>Bonjour!</h2>
<p>Mercure est la planète la plus proche du Soleil et la moins massive du Système solaire.</p>

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

unified().use(rehypeReact, options)

Turn HTML into preact, react, solid, svelte, vue, etc.

options (Options, required) — configuration

Nothing (undefined).

This plugin registers a compiler that returns a JSX.Element where compilers typically return string. When using .stringify on unified, the result is such a JSX.Element. When using .process (or .processSync), the result is available at file.result.

There are differences between what JSX frameworks accept, such as whether they accept class or className, or background-color or backgroundColor.

For hast elements transformed by this project, this is be handled through options:

Framework elementAttributeNameCase stylePropertyNameCase Preact 'html' 'dom' React 'react' 'dom' Solid 'html' 'css' Vue 'html' 'dom'

Possible components to use (TypeScript type).

See Components from hast-util-to-jsx-runtime for more info.

Configuration (TypeScript type).

Fragment (Fragment from hast-util-to-jsx-runtime, required) — fragment
jsx (Jsx from hast-util-to-jsx-runtime, required in production) — dynamic JSX
jsxs (Jsx from hast-util-to-jsx-runtime, required in production) — static JSX
jsxDEV (JsxDev from hast-util-to-jsx-runtime, required in development) — development JSX
components (Partial<Components>, optional) — components to use
development (boolean, default: false) — whether to use jsxDEV when on or jsx and jsxs when off
elementAttributeNameCase ('html' or 'react', default: 'react') — specify casing to use for attribute names
passNode (boolean, default: false) — pass the hast element node to components
space ('html' or 'svg', default: 'html') — whether tree is in the 'html' or 'svg' space, when an <svg> element is found in the HTML space, this package already automatically switches to and from the SVG space when entering and exiting it
stylePropertyNameCase ('css' or 'dom', default: 'dom') — specify casing to use for property names in style objects
tableCellAlignToStyle (boolean, default: true) — turn obsolete align props on td and th into CSS style props

This package is fully typed with TypeScript. It exports the additional types Components and Options. More advanced types are exposed from hast-util-to-jsx-runtime.

Projects maintained by the unified collective are compatible with maintained versions of Node.js.

When we cut a new major release, we drop support for unmaintained versions of Node. This means we try to keep the current release line, rehype-react@8, compatible with Node.js 17.

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

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.

remark-rehype — turn markdown into HTML to support rehype
rehype-remark — turn HTML into markdown to support remark
rehype-retext — rehype plugin to support retext
rehype-sanitize — sanitize HTML

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.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4