react-render-markup

Safely parse HTML, SVG and MathML into React elements.

- :gift: Lightweight !npm bundle size
- :smile: Easy to use with simple API
- :printer: Server-side rendering out of the box

Usage

$3

``js
import { Markup } from 'react-render-markup';


`

#### Props

- allowed array of tag names to allow rendering.

> :warning: Setting this option will strip all other elements from output.

- markup string of HTML you’d like to parse.
- replace object of elements to replace.

The keys are tag names to replace and values are the type to replace with (either tag name string or a React component type.)

- trim boolean removes whitespace text nodes when true.

$3

`js
import { renderMarkup } from 'react-render-markup';

renderMarkup(markup[, options])
`

#### Parameters

- markup string of HTML you’d like to parse.
- options optional object of the following options:

- allowed array of tag names to allow rendering.

> :warning: Setting this option will strip all other elements from output.

- replace object of elements to replace.

The keys are tag names to replace and values are the type to replace with (either tag name string or a React component type.)

- trim boolean removes whitespace text nodes when true.

#### Return value

An array of React elements.

Examples

$3

`jsx
const MyComponent = (props) => {
const { content } = props;
return (



);
};
`

or

`jsx
const MyComponent = (props) => {
const { content } = props;
return

;
};
`

$3

`jsx
const allowed = ['strong', 'em']; // strips all other elements

const MyComponent = (props) => {
const { content } = props;
return (



);
};
`

or

`jsx
const MyComponent = (props) => {
const { content } = props;
return (



);
};
`

$3

`jsx
import { Link } from 'some-router-library';

const replace = {
a: Link, // replace elements with component
em: 'strong', // replace elements with elements
img: null, // doesn’t render elements
span: React.Fragment, // unwraps contents of elements
};

const MyComponent = (props) => {
const { content } = props;
return (



);
};
`

or

`jsx
import { Link } from 'some-router-library';

const MyComponent = (props) => {
const { content } = props;
return (



{renderMarkup(content, {
replace: {
a: Link,
em: 'strong',
img: null,
span: React.Fragment,
},
})}



);
};
`

Cross Site Scripting (XSS)

By default,