react-html-string
v0.1.1
Published
A React declarative component for converting HTML strings into React components. Avoids the use of dangerouslySetInnerHTML and converts standard HTML elements, attributes and inline styles into their React equivalents or `Custom Components`.
Downloads
2,249
Maintainers
Readme
React HTML String 🚀
A React declarative component for converting HTML strings into React components. Avoids the use of dangerouslySetInnerHTML and converts standard HTML elements, attributes and inline styles into their React equivalents or Custom Components
.
Install
$ npm install react-html-string
or
$ yarn add react-html-string
How to use
import HTMLString from 'react-html-string';
const html = `
<div>
<h1>
Hello from
<a
href="https://github.com/MomenSherif/react-html-string"
target="_blank"
>React HTML String</a
>
</h1>
<hr />
<ul>
<li>Render HTML string safely</li>
<li>Provide <b>Custom Components</b> if needed</li>
</ul>
<p>Don't forget to ⭐️ the project</p>
</div>
`;
export default function App() {
return (
<div>
<h1>Hello, React!</h1>
<HTMLString html={html} />
</div>
);
}
With Custom Components
import HTMLString from 'react-html-string';
import Heading from './components/Heading';
const components = {
a: props => <a {...props} style={{ color: 'red' }} />,
h1: Heading,
};
const html = `
<div>
<h1>
Hello from
<a
href="https://github.com/MomenSherif/react-html-string"
target="_blank"
>React HTML String</a
>
</h1>
<hr />
<ul>
<li>Render HTML string safely</li>
<li>Provide <b>Custom Components</b> if needed</li>
</ul>
<p>Don't forget to ⭐️ the project</p>
</div>
`;
export default function App() {
return (
<div>
<h1>Hello, React!</h1>
<HTMLString html={html} components={components} />
</div>
);
}
TypeScript example
Each component is strongly typed with the equivalent dom node type.
import HTMLString, { Components } from 'react-html-string';
import Heading from './components/Heading';
const components: Components = {
a: props => <a {...props} style={{ color: 'red' }} />,
h1: Heading,
};
const html = `
<div>
<h1>
Hello from
<a
href="https://github.com/MomenSherif/react-html-string"
target="_blank"
>React HTML String</a
>
</h1>
<hr />
<ul>
<li>Render HTML string safely</li>
<li>Provide <b>Custom Components</b> if needed</li>
</ul>
<p>Don't forget to ⭐️ the project</p>
</div>
`;
export default function App() {
return (
<div>
<h1>Hello, React!</h1>
<HTMLString html={html} components={components} />
</div>
);
}