<a href="https://www.npmjs.com/package/chakra-ui-markdown-renderer" alt="NPM"> <img src="https://img.shields.io/npm/v/chakra-ui-markdown-renderer?color=green&style=flat-square" /> </a>
This package is created for people who using Chakra-UI's and react-markdown together.
CSSReset component is turning down every default style of elements that provided by browser. HTML elements like h1, h2, h3... aren't get default styles but Markdown need them for rendering purposes. This package is solving the problem by changing renderer defaults with chakra-ui's components.
- Install @chakra-ui/react by following their Getting Started - Chakra UI guide.
- Install react-markdown.
- Install chakra-ui-markdown-renderer.
``sh
$ yarn add chakra-ui-markdown-renderer
$ npm i chakra-ui-markdown-renderer
`
`jsx
import ChakraUIRenderer from 'chakra-ui-markdown-renderer';
`
chakra-ui-markdown-renderer is merging standart theme with your theme by default.
`jsx
import ChakraUIRenderer from 'chakra-ui-markdown-renderer';
const newTheme = {
p: props => {
const { children } = props;
return (
{children}
);
},
};
children={markdown}
skipHtml
/>;
``
#### Alternative ways
@nikolovlazar/chakra-ui-prose might also work depends on your needs.