Nicer Package Manager

    react-inner-html

    1.0.1 • Public • Published

    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

    Install

    npm i react-inner-html

    DownloadsWeekly Downloads

    672

    Version

    1.0.1

    License

    MIT

    Last publish

    Collaborators

    • angryobject