☢⚛ dangerous-components

![Known Vulnerabilities](https://snyk.io/test/github/dance2die/dangerous-components)
!npm
!npm bundle size
!npm bundle size
!CircleCI (all branches)

Easy way to embed dangerous Inner HTML for React.

This is a spiritual sucessor of dangerous library, which was harder to use and much bigger in terms of library size.

🤔 Why?

React core team has made it especially hard to embed dangerous HTML in React.
And texts are encoded to prevent security issue such as XSS (Cross-site scripting).

So you are stuck with doing an arcane syntax, dangerouslySetInnerHTML.

``jsx function createMarkup() { return {__html: 'First · Second'}; }

function MyComponent() { return

;
}


First reason
$3

Check out the code snippet below (this is it).

`jsx import Dangerous from 'dangerous-components';

const title =

Some Title

;
const Header = ({title}) => 
const App = () => (
    <>


        ...
    
)

It will render Header accepting title as a div.

`jsx

`Some Title`

}} />
`
Second Reason
$3
You can read the following code as "Dangerous HTML title".`jsx

`
If you need to render it as a head, such as h1, then you can specify as prop to do so.
`jsx

`
It reads like "render dangerous html title as h1".
Third Reason
If your site makes a heavy use of HTML from another data source (such as internal site or Gatsby blog sites, etc), you already might have an internal utility function to make it easy to render dangerous HTMl anyways.
Just use this tiny module without having to worry about module paths like import Dangerous from '../../../util'

Don't use it
If you can't trust your users' input.  
There is a reason why it's intentionally hard to render insecure content in React.
Where to use it?
Gatsby uses heavy use of dangerouslySetInnerHTML everywhere.  
If you trust your input, then use it there.  
I've used it (dogfooding) for my static site as an example, which made the code much more readable.
e.g.) A logic to generate a blog post
`diff
function PostTemplate({ data }) {
  const post = data.wordpressPost;
  const {
    link,
    title,
    fields: { content },
    categories
  } = post;
  return (
    
              title={title}
        canonicalURL={link}
        description={title}
        keywords={categories.map(_ => _.name)}
      />
-      

+      
      
      
      
-      
+      
    
  );
}``
You can see that the code is much more declarative and readable.  
You can read it as "render dangerous html title as h1" and "render dangerous html content".

dangerous-components

☢⚛ dangerous-components

🤔 Why?

First reason

$3

Some Title

`Some Title`

Second Reason

$3

`Third Reason`

`Don't use it`

`Where to use it?`

`+ -`
`+ ); }`
``
You can see that the code is much more declarative and readable.
You can read it as "render dangerous html title as h1" and "render dangerous html content".