Skip to content

react-markdown renderer for people who using Chakra-UI's CSSReset component

License

Notifications You must be signed in to change notification settings

mustaphaturhan/chakra-ui-markdown-renderer

Repository files navigation

Chakra UI Markdown Renderer

This package is created for people who using Chakra-UI's and react-markdown together.

The Problem

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

$ yarn add chakra-ui-markdown-renderer

# or

$ npm i chakra-ui-markdown-renderer

Usage

import ChakraUIRenderer from 'chakra-ui-markdown-renderer';

<ReactMarkdown components={ChakraUIRenderer()} children={markdown} skipHtml />;

Extending Defaults

chakra-ui-markdown-renderer is merging standart theme with your theme by default.

import ChakraUIRenderer from 'chakra-ui-markdown-renderer';

const newTheme = {
  p: props => {
    const { children } = props;
    return (
      <Text mb={2} fontSize={'12px'}>
        {children}
      </Text>
    );
  },
};

<ReactMarkdown
  components={ChakraUIRenderer(newTheme)}
  children={markdown}
  skipHtml
/>;

Alternative ways

@nikolovlazar/chakra-ui-prose might also work depends on your needs.

About

react-markdown renderer for people who using Chakra-UI's CSSReset component

Resources

License

Stars

Watchers

Forks

Packages

No packages published