react-inner-html

A little helper for simpler dangerouslySetInnerHTML

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-inner-html
101.0.15 years ago5 years agoMinified + gzip package size for react-inner-html in KB

Readme

react-inner-html
A little helper for simpler dangerouslySetInnerHTML using the spread operator.
Before:
function MyComponent() {
  return <div dangerouslySetInnerHTML={{ __html: 'my <b>hot</b> html' }} />;
}

After:
import html from 'react-inner-html';

function MyComponent() {
  return <div {...html('my <b>hot</b> html')} />;
}

Or, if you get your html component through a prop, which was the case for me, it gets even simpler:
import html from 'react-inner-html';

function MyComponent({ content }) {
  return <div {...html(content)} />;
}

Remember:
Setting HTML from code is risky because it's easy to inadvertently expose your users to a cross-site scripting (XSS) attack.

So, use it carefully.

Installation:

npm:
npm i -S react-inner-html

yarn:
yarn add react-inner-html