@arny1/react-html-component

React html renderer

Usage no npm install needed!

<script type="module">
  import arny1ReactHtmlComponent from 'https://cdn.skypack.dev/@arny1/react-html-component';
</script>

README

react-html-component

Download arny/react-html-component

This component renders raw html string to ReactJS components tree.

It supports:

  • links
  • hashtags
  • highlighting words

Usage (see example):

import HTMLComponent from 'react-html-component'

class App extends Component {
    render() {
        const html = '<p>This text is <span style="color:red">raw<span> html</p>'
        return (
            <HTMLComponent html={html} />
        )
    }
}

Available options:

  • html: PropTypes.string.isRequired, // String to parse
  • withLinksParsing: PropTypes.bool, // Should links be parsed and wrapped in A tag
  • onLinkClick: PropTypes.func, // link click callback
  • containerTag: PropTypes.string, // Tag for html container
  • tags: PropTypes.array, // tags that allowed to use
  • attributes: PropTypes.array, // attributes that allowed to use
  • highlightWords: PropTypes.array, // Words to highlight
  • highlightStyle: PropTypes.object, // style of highlighted words
  • replaceTags: PropTypes.object, // Tags that must be replaced, for example: {'BR': ' '}
  • withHashTags: PropTypes.bool, // Can parse hashtags
  • onHashTagClick: PropTypes.func // hashtags click callback