`
// Note that default props can be set using the following pattern:
//
// `props => `
//
const App = () => (
,
h2: Subheading,
a: Link,
}}
/>
)
```
`HTMLRenderer` will render something that looks like the following:
```jsx
;[
React,
A JavaScript library for building user interfaces,
Get Started
,
]
```
## Component overrides
`HTMLRenderer` supports overriding components provided in the `components` prop
as needed. This can be utilized to create a reusable `HTMLRenderer` with a
default set of components throughout your project.
```jsx
// src/components/HTML.js
import { Heading, Subheading, Link } from 'src/components'
export const HTML = props => (
,
}}
{...props}
/>
)
```
The `HTML` component could be used by passing it an HTML string.
```js
// src/pages/index.js
import { HTML } from 'src/components'
export const IndexPage = ({ html }) =>
```
This will render `H1` elements with **red text**.
If individual components need to be overridden, you can provide a mapping using
the `componentOverrides` prop.
```js
// src/pages/index.js
import { HTML } from 'src/components'
export const IndexPage = ({ html }) => (
props => ,
}}
/>
)
```
This will render `H1` elements with **blue text**.
Note that `Comp` is the `Heading` component defined in the original `components`
prop. This allows you to keep the existing component and modify it as needed.
Alternatively, you could disregard `Comp` and return a completely different
component.
## Props
| Name | Type | Description |
| ------------------------ | ------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------- |
| **`html`** | `PropTypes.string` | HTML to render. |
| **`components`** | `PropTypes.objectOf(PropTypes.node)` | An object mapping an HTML element type to anything React can render (numbers, strings, elements, etc.). |
| **`componentOverrides`** | `PropTypes.objectOf(PropTypes.func)` | An object mapping an HTML element type to a function that returns anything React can render. See [Component overrides](#component-overrides). |
## Similar packages
- [markdown-react-renderer][markdown-react-renderer]
[html-react-parser]: https://github.com/remarkablemark/html-react-parser
[markdown-react-renderer]: https://github.com/asyarb/markdown-react-renderer
---
_Source: https://npm.io/package/react-html-renderer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._