https://github.com/mustaphaturhan/chakra-ui-markdown-renderer

react-markdown renderer for people who using Chakra-UI's CSSReset component
https://github.com/mustaphaturhan/chakra-ui-markdown-renderer

Last synced: 3 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/mustaphaturhan/chakra-ui-markdown-renderer
• Owner: mustaphaturhan
• License: mit
• Created: 2020-01-26T15:10:50.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T17:21:08.000Z (over 1 year ago)
• Last Synced: 2024-06-18T15:21:59.926Z (16 days ago)
• Language: TypeScript
• Homepage:
• Size: 555 KB
• Stars: 128
• Watchers: 3
• Forks: 18
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Lists

• awesome-chakra-ui - Chakra-ui-markdown-renderer - markdown renderer for people who using Chakra-UI's CSSReset component. (🛠️ Tools)

README

        
## Chakra UI Markdown Renderer

 

  



This package is created for people who using [Chakra-UI's](https://chakra-ui.com/) and [react-markdown](https://github.com/remarkjs/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

- Install @chakra-ui/react by following their [Getting Started - Chakra UI](https://chakra-ui.com/getting-started) guide.

- Install [react-markdown](https://github.com/remarkjs/react-markdown).

- Install `chakra-ui-markdown-renderer`.

```sh

$ yarn add chakra-ui-markdown-renderer

# or

$ npm i chakra-ui-markdown-renderer

```

### Usage

```jsx

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

;

```

### Extending Defaults

`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}

      

    );

  },

};

;

```

#### Alternative ways

[@nikolovlazar/chakra-ui-prose](https://www.npmjs.com/package/@nikolovlazar/chakra-ui-prose) might also work depends on your needs.