🕴 Magically transform HTML to React components without danger
Have you found yourself using Reacts dangerouslySetInnerHTML
and feeling a bit ashamed? Despair not – Rehtml can convert your HTML string into React components.
$ yarn add rehtml
# or npm install rehtml --save
or via a script tag:
<script src="https://unpkg.com/rehtml"></script>
<!-- This file exposes the variable Rehtml (note that it also requires React) -->
import Rehtml from 'rehtml';
export default function Article({ html }) {
return <Rehtml html={html} />;
}
That's basically all you have to do make it work. It will parse your HTML string and create corresponding React components.
By default Rehtml will wrap all your HTML inside a div without any styles at all. But you can easily customize the wrapping object using prop Wrapper
. The most important thing to remember is to make the component render children
:
import Rehtml from 'rehtml';
function Wrapper({ children }) {
return (
<article className="post">
{children}
</article>
);
}
export default function Article({ html }) {
return <Rehtml html={html} Wrapper={Wrapper} />;
}
By default Rehtml will transform your HTML into corresponing React elements. That means that <p class="foo">Bar</p>
will be a React element like <p className="foo">Bar</p>
. But you can choose to map the HTML elements to any React component you wish:
import Rehtml from 'rehtml';
function P({ children }) {
return (
<p style={{ color: 'red' }}>
{children}
</p>
);
}
export default function Article({ html }) {
const mappings = {
p: Paragraph, // the key must correspond to a HTML element, e.g. a, p, em, strong, div etc.
};
return <Rehtml html={html} mappings={mappings} />;
}
Just like the Wrapper it's important to note that your custom elements must render the children
prop.
This type of mapping works very will with "css-in-js"-modules like styled-components
:
import Rehtml from 'rehtml';
import styled from 'styled-components';
const A = styled.a`
text-decoration: none;
color: #bada55;
`;
export default function Article({ html }) {
const mappings = {
a: A,
};
return <Rehtml html={html} mappings={mappings} />;
}
Prop | Required | Default | Examples |
---|---|---|---|
html | true |
(Not applicable) | <p>Foo <em>bar</em></p> |
Wrapper | false |
<div>{children}</div> |
<article>{children}</article> |
mappings | false |
{} |
{ a: Link, em: Italic, strong: Bold } |
Licensed under the MIT License, Copyright © 2016 Adam Bergman
See LICENSE for more information.