How to use html-to-react - 10 common examples

import React, {Component} from 'react'
import {connect} from 'react-redux'
import {Link} from 'react-router-dom'
import {Parser, ProcessNodeDefinitions} from 'html-to-react'
import PropTypes from 'prop-types'

import selectors from '../store/selectors'
import {loadPage} from '../modules/page/reducer'

import 'react-quill/dist/quill.snow.css'
import 'react-quill/dist/quill.core.css'

const htmlToReactParser = new Parser()
const processNodeDefinitions = new ProcessNodeDefinitions(React)

const getProcessingInstructions = bindings => [{
  // convert internal links to Link components
  shouldProcessNode: node => node.name && node.name === 'a' &&
    node.attribs.href.startsWith('/'),
  processNode: function generateLink(node, children) {
    return {children}
  }
}, {
  // bind placeholders
  shouldProcessNode: node => node.name && node.name === 'span' &&
    node.attribs.class === 'ql-placeholder-content',
  processNode: function insertPlaceholder(node) {
    const content = bindings[node.attribs['data-id']] || '{{missing}}'
    return <span>{content}</span>

return new Promise(resolve => {
      const promises = []
      const htmlToReactParser = new HtmlToReactParser()
      const documentProcessor = new DocumentProcessor({
        paddingLeft,
        columnGap,
        responseURL,
      })

      const { xml, doc } = documentProcessor.parseXML(response.data)
      const re = /]*?>([\s\S]*)<\/body>/

      // create react element that will be appended to our #frame element.
      // we wrap this in a Promise so that we can resolve the content and
      // styles at the same time
      let data_
      data_ = xml.match(re)
      data_ = data_[1] // eslint-disable-line prefer-destructuring
      data_ = data_.replace(/>\s*?<')

// @flow

import React, { PropTypes } from 'react';
import { Parser } from 'html-to-react';

const parser = new Parser();

const hideElement = (hide, elementName) => ((hide && hide.includes(elementName)) ? 'none' : 'block');

const StylableCard = ({
  card: {
    title,
    id,
    text,
    race,
    rarity,
    set,
    cost,
    strength,
    health,
  },
  hide,

import React from "react";
import ReactMarkdown from "react-markdown";
// @ts-ignore
import HtmlToReact from "html-to-react";
// @ts-ignore
import htmlParser from "react-markdown/plugins/html-parser";

import { tabs } from "./Tabs";

const isValidNode = (node: any) => node.type !== "script";
const processNodeDefinitions = new HtmlToReact.ProcessNodeDefinitions(React);

export default (headingPrefix: string) =>
  htmlParser({
    isValidNode,
    processingInstructions: [
      // Tabs processing
      tabs(headingPrefix),
      {
        // Anything else
        shouldProcessNode: (node: any) => true,
        processNode: processNodeDefinitions.processDefaultNode,
      },
    ],
  });

export function messageHtmlToComponent(html, isRHS, options = {}) {
    if (!html) {
        return null;
    }

    const parser = new Parser();
    const processNodeDefinitions = new ProcessNodeDefinitions(React);

    function isValidNode() {
        return true;
    }

    const processingInstructions = [

        // Workaround to fix MM-14931
        {
            replaceChildren: false,
            shouldProcessNode: (node) => node.type === 'tag' && node.name === 'input' && node.attribs.type === 'checkbox',
            processNode: (node) => {
                const attribs = node.attribs || {};
                node.attribs.checked = Boolean(attribs.checked);

                return React.createElement('input', {...node.attribs});

import React from 'react';
import HtmlToReact from 'html-to-react';
import htmlParser from 'react-markdown/plugins/html-parser';

import { tabs } from './Tabs';
import { link } from './Link';
import { img } from './Image';

const isValidNode = node => node.type !== 'script';
const processNodeDefinitions = new HtmlToReact.ProcessNodeDefinitions(React);

export default htmlParser({
  isValidNode,
  processingInstructions: [
    tabs,
    link,
    img,
    {
      // Anything else
      shouldProcessNode: node => true,
      processNode: processNodeDefinitions.processDefaultNode,
    },
  ],
});

import React from 'react'

import HtmlToReact from 'html-to-react' // https://github.com/aknuds1/html-to-react
import ReactMarkdown from 'react-markdown' // https://github.com/rexxars/react-markdown
import htmlParser from 'react-markdown/plugins/html-parser'

import 'github-markdown-css' // https://github.com/sindresorhus/github-markdown-css

// See https://github.com/aknuds1/html-to-react#with-custom-processing-instructions
// for more info on the processing instructions
const processNodeDefinitions = new HtmlToReact.ProcessNodeDefinitions(React)
const parseHtml = htmlParser({
  isValidNode: node => node.type !== 'script',
  processingInstructions: [
    {
      shouldProcessNode: node => {
        return true
      },
      processNode: processNodeDefinitions.processDefaultNode
    }
  ]
})

export const Markdown = ({ children, className }) => (
  <div>
    </div>

import React, {Component} from 'react'
import {connect} from 'react-redux'
import {Link} from 'react-router-dom'
import {Parser, ProcessNodeDefinitions} from 'html-to-react'
import PropTypes from 'prop-types'

import selectors from '../store/selectors'
import {loadPage} from '../modules/page/reducer'

import 'react-quill/dist/quill.snow.css'
import 'react-quill/dist/quill.core.css'

const htmlToReactParser = new Parser()
const processNodeDefinitions = new ProcessNodeDefinitions(React)

const getProcessingInstructions = bindings => [{
  // convert internal links to Link components
  shouldProcessNode: node => node.name && node.name === 'a' &&
    node.attribs.href.startsWith('/'),
  processNode: function generateLink(node, children) {
    return {children}
  }
}, {
  // bind placeholders
  shouldProcessNode: node => node.name && node.name === 'span' &&
    node.attribs.class === 'ql-placeholder-content',
  processNode: function insertPlaceholder(node) {
    const content = bindings[node.attribs['data-id']] || '{{missing}}'
    return <span>{content}</span>
  }

"use strict";

const React = require("react");
const HtmlToReact = require("html-to-react");
const combine = require("terriajs-cesium/Source/Core/combine").default;
const defined = require("terriajs-cesium/Source/Core/defined").default;
const utils = require("html-to-react/lib/utils");

const CustomComponents = require("./CustomComponents");

const htmlToReactParser = new HtmlToReact.Parser({
  decodeEntities: true
});
const processNodeDefinitions = new HtmlToReact.ProcessNodeDefinitions(React);

const isValidNode = function() {
  return true;
};

const shouldProcessEveryNodeExceptWhiteSpace = function(node) {
  // Use this to avoid white space between table elements, eg.
  //     \n<table> <tbody> <tr><td>x</td> <td>3</td> </tr> </tbody> </table>
  // being rendered as empty <span> elements, and causing React errors.
  return node.type !== "text" || node.data.trim();
};

let keyIndex = 0;

/**
 * @private</span>

processNode: function(node, children, index) {
      // eslint-disable-line react/display-name
      const elementProps = {
        key: "anchor-" + keyIndex++,
        target: "_blank",
        rel: "noreferrer noopener"
      };
      node.attribs = combine(node.attribs, elementProps);
      return utils.createElement(node, index, node.data, children);
    }
  });