html-styled-react-parser

Convert a string of HTML to JSX with the option to replace specified elements with specific components or styled-components while maintaining child DOM structure.

The motivation behind this package was to be able to define a set of default styled components and still have these be applied to any static markup that was imported from external data sources.

Please note

Ensure that you trust the HTML before using. This requires that you have React and styled-components installed in your project

Installation

npm i html-styled-react-parser react styled-components

Usage

import Parser from 'html-styled-react-parser'
import YourComponent from 'path/to/your/component'

const html = '<p>Your HTML...</p>'
const replacements = {
  p: YourComponent
}

const SomeComponent = () => (
  ...

  <Parser html={html} replacements={replacements} />

  ...
)

or

import { parse } from 'html-styled-react-parser'
import YourComponent from 'path/to/your/component'

const html = '<p>Your HTML...</p>'
const replacements = {
  p: YourComponent
}

const SomeComponent = () => (
  ...

  {parse(html, replacements)}

  ...
)

Props

html (string): Your HTML replacements ({}): Your replacements object, see below

Configuration

Specify the replacements you want to make using the a config object in the following format:

{
  [tag name] : (React Component or Styled Component)
}

Example:

{
  b: styled.b`color: blue;`
  imageofcat: () => <img src='link to cat image' alt='Pretty kitty cat'>
}

Any tags not included in your config object will be rendered in their standard form. For example, failure to specify an em key will result in any <em> elements being rendered as such in JSX.

Passing props to components

All attributes in your HTML tag will be passed to the relevant JSX

Example:

const html = '<b someprop="prop!"></b>'

results in

() => <Component someprop='prop'></Component>

As this is a string, these props will be passed in as strings, if you want to do anything more complicated with objects you would need to handle that inside your component as required. For example using JSON.parse()

Importing replacements in multiple locations

You can avoid having to import replacements into every location you use the component by creating a wrapper component to pass the replacements automatically and then using that instead.

import Parser from 'html-styled-react-parser'

const replacements = {}

const ParserWrapper = ({ html }) => <Parser html={html} replacements={replacements} />

export default ParserWrapper