How to use the html-to-react.Parser function in html-to-react

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,

* Full blown HTML parsing based on htmlparser2.
 * Pulls in a heavy set of dependencies and thus WILL bloat your bundle size.
 * You have been warned.
 **/
const React = require('react')
const xtend = require('xtend')
const visit = require('unist-util-visit')
const HtmlToReact = require('html-to-react')
const symbols = require('../symbols')

const type = 'parsedHtml'
const selfClosingRe = /^<(area|base|br|col|embed|hr|img|input|keygen|link|meta|param|source|track|wbr)\s*\/?>$/i
const startTagRe = /^<([a-z]+)\b/i
const closingTagRe = /^<\/([a-z]+)\s*>$/

const parser = new HtmlToReact.Parser()
const processNodeDefinitions = new HtmlToReact.ProcessNodeDefinitions(React)

const defaultConfig = {
  isValidNode: node => node.type !== 'script',
  processingInstructions: [
    {
      shouldProcessNode: () => true,
      processNode: processNodeDefinitions.processDefaultNode
    }
  ]
}

function parseHtml(config, tree, props) {
  let open
  let currentParent
  visit(

parseHtmlToReact(html) {
    return html && new htmlToReact.Parser().parse(html);
  }

import { Link } from 'react-router'
import React from 'react'
import entities from 'entities'
import HtmlToReact from 'html-to-react'
import voidElements from 'void-elements'

import config from '../config'

const parser = new HtmlToReact.Parser(React)
const processNodeDefinitions = new HtmlToReact.ProcessNodeDefinitions(React)

/**
 * Convert common Elements to their React equivalent.
 * @param {String} html HTML string
 * @returns {Object} HtmlToReact parser
 */
export default function parse (html) {
  const counts = {}
  const imageContainers = ['div', 'p']

  const processingInstructions = [{
    shouldProcessNode: (node) => true,
    processNode: (node, children) => {
      if (!counts[node.name]) {
        counts[node.name] = 0

const replaceLogo = (graphiQlJs, htmlLogo) => {
	if (htmlLogo) {
		const htmlToReactParser = new HtmlToReactParser()
		const reactElement = htmlToReactParser.parse(htmlLogo)
		const logo = JSON.stringify(reactElement)
		return graphiQlJs.replace('return cloneElement(__graphiQlLogo__);', `return cloneElement(${logo})`)
	} else 
		return graphiQlJs
}

export const parseHtml = value => {
  if (!value) return

  return new HtmlToReact.Parser().parse(`<span>${value}</span>`).props.children
}

import * as React from 'react';
import * as DOMPurify from 'dompurify';
import * as HtmlToReact from 'html-to-react';
import FormContainer from '../containers/FormContainer/FormContainer';
import Paragraph from '../components/primitives/Paragraph';
import ClipPath from '../components/ClipPath/ClipPath';
import EShape from '../contracts/EShape';
import EIcon from '../contracts/EIcon';
import Icon from '../components/Icon/Icon';
import MenuContainer from '../containers/MenuContainer/MenuContainer';

const Parser = new HtmlToReact.Parser();
const processNodeDefinitions = new HtmlToReact.ProcessNodeDefinitions( React );
const processingInstructions = [
    {
        shouldProcessNode: node => node.name === 'clip-path',
        processNode: ( node, children, index ) => {
            const props = {
                shape: EShape.fromString( node.attribs[ 'shape' ] )
            } as any;
            const rot = node.attribs[ 'rotation' ];
            if ( rot ) {
                props.rotation = Number.parseInt( node.attribs[ 'rotation' ] );
            }

            return React.createElement( ClipPath, props, children );
        }
    },