How to use rehype-react - 10 common examples

console.log(htmlAst)
  // Perform transformations
  htmlAst = decorate(htmlAst)
  htmlAst = wrapify(htmlAst)
  htmlAst = separatify(htmlAst)

  // Convert to React
  const element = renderAst(htmlAst)
  return element
}

/**
 * Renders HAST into React using `rehype-react`.
 */

export const renderAst = new RehypeReact({
  createElement: React.createElement
}).Compiler

render() {
    const {
      data: { githubRaw, nav, topic },
      location,
    } = this.props;
    // bind the devhub siphon data to the preview node
    const previewWithNode = withNode(githubRaw)(ComponentPreview);

    const renderAst = new rehypeReact({
      createElement: React.createElement,
      components: { 'component-preview': previewWithNode },
    }).Compiler;
    let navigationItems = nav.items;

    const navigation = ;

    const [owner, repo] = githubRaw.html_url.replace('https://github.com/', '').split('/');
    const { title } = githubRaw.fields;
    const originalSource = githubRaw.html_url;
    const { href } = location;

    return (
      
        <div>
          </div>

export default function transform(htmlAst: HastNode): React.ReactNode {
  // Perform transformations
  htmlAst = decorate(htmlAst)
  htmlAst = wrapify(htmlAst)
  htmlAst = separatify(htmlAst)

  // Convert to React
  const element = renderAst(htmlAst)
  return element
}

/**
 * Renders HAST into React using `rehype-react`.
 */

export const renderAst = new RehypeReact({
  createElement: React.createElement
}).Compiler

import React from "react";
import PropTypes from "prop-types";
import rehypeReact from "rehype-react";
import Icons from "../../components/About/WebPresenceIcons";
import ReImg from "./ReImg";
import ReTracedSVGGallery from "./ReTracedSVGGallery";
import { Link } from "gatsby";

const renderAst = new rehypeReact({
  createElement: React.createElement,
  components: { "re-icons": Icons , "re-img": ReImg , "re-link": Link, "re-tracedsvg-gallery": ReTracedSVGGallery }
}).Compiler

const Bodytext = props => {
  const { content, theme } = props;
  const html = props.content.html;

  return (
    

      {/* Render markdown with Custom Components */}
      <div>
        {renderAst(content.htmlAst)}
      </div>

import rehypeReact from 'rehype-react'
import { graphql } from 'gatsby'
import { FaAngleLeft } from 'react-icons/fa'

import DefaultLayout from 'components/layouts/DefaultLayout.js'
import Container from 'components/Container'
import HelmetPlus from 'components/HelmetPlus'

import StyledLink from 'atoms/StyledLink'
import H2 from 'atoms/H2'
import H3 from 'atoms/H3'

import spacing from 'styles/spacing'
import { standardTransforms } from 'utils/markdown-helpers'

const renderAst = new rehypeReact({
  createElement: React.createElement,
  components: {
    ...standardTransforms,
  },
}).Compiler

const PageLayout = styled.div`
  display: grid;
  margin-top: ${spacing.medium};
  grid-gap: ${spacing.medium};
`

// too wide is hard to read, limit to some amount;
const TutorialHolder = styled.div`
  max-width: 820px;
  display: grid;

import rehypeReact from 'rehype-react'
import { graphql } from 'gatsby'
import { FaAngleLeft } from 'react-icons/fa'

import HelmetPlus from 'components/HelmetPlus'
import DefaultLayout from 'components/layouts/DefaultLayout.js'
import Container from 'components/Container'

import StyledLink from 'atoms/StyledLink'
import H2 from 'atoms/H2'
import H3 from 'atoms/H3'

import spacing from 'styles/spacing'
import { standardTransforms } from 'utils/markdown-helpers'

const renderAst = new rehypeReact({
  createElement: React.createElement,
  components: {
    ...standardTransforms,
  },
}).Compiler

const PageLayout = styled.div`
  display: grid;
  margin-top: ${spacing.medium};
  grid-gap: ${spacing.medium};
`

// too wide is hard to read, limit to some amount;
const InsightHolder = styled.div`
  max-width: 820px;
  display: grid;

import React from 'react'
import RehypeReact from 'rehype-react'

/*
 * We serialize the test markup as React elements, not hast.
 * Just for practicality... Jest has better test output for
 * React elements.
 */

const render = new RehypeReact({
  createElement: React.createElement
}).Compiler

export default render

import React from "react";
import { graphql } from 'gatsby';
import rehypeReact from "rehype-react";
import { Cover } from "../components/cover/cover.js";
import { Layout } from "../components/layout/layout.jsx";
import { BeforeAfter } from "../components/beforeafter/beforeafter.jsx";
import { EditOnGithub } from "../components/editongithub/EditOnGithub.jsx";
import { LanguageSwitcher } from "../components/languageswitcher/LanguageSwitcher.jsx";

const renderAst = new rehypeReact({
  createElement: React.createElement,
  components: { "cover": Cover, "before-after": BeforeAfter }
}).Compiler;

const Lesson = (props) => {
  const { data, pageContext, t, i18n } = props;
  const post = data.markdownRemark;
  const { translations, urlSlug, type } = pageContext;
  const seo = {
    title: post.frontmatter.title,
    description: post.frontmatter.subtitle,
    url: post.frontmatter.original_url,
    image: post.frontmatter.thumb,
    canonical: (post.fields.lang === 'en') ? "/es/" : "/en/"
  };
  return (

import React from 'react'
import rehypeReact from 'rehype-react'

import Exercise from './components/exercise'
import CodeBlock from './components/code'
import { Link } from './components/link'
import Slides from './components/slides'
import Choice, { Option } from './components/choice'
import { H3, Hr, Ol, Ul, Li, InlineCode } from './components/typography'

export const renderAst = new rehypeReact({
    createElement: React.createElement,
    components: {
        exercise: Exercise,
        slides: Slides,
        codeblock: CodeBlock,
        choice: Choice,
        opt: Option,
        a: Link,
        hr: Hr,
        h3: H3,
        ol: Ol,
        ul: Ul,
        li: Li,
        code: InlineCode,
    },
}).Compiler

style={{
                  cursor: 'pointer',
                  animationDuration: `${text.length * 80}ms`,
                }}
              >
                {text}
              
            ))}
          
        ))}
      
    
  ) : null;
}

const renderAst = new RehypeReact({
  createElement: React.createElement,
  components: { pre: CoolCodeBlock },
}).Compiler;

class BlogPostTemplate extends React.Component {
  render() {
    const post = this.props.data.markdownRemark
    const siteTitle = this.props.data.site.siteMetadata.title
    const { previous, next } = this.props.pageContext

    return (