html-strings-to-chakra

html-strings-to-chakra is a easy-to-use npm package designed for converting HTML strings into Chakra UI components.

Based on html-react-parser

Note: Created for a spefisic project, to be updated to be more universal

Usage

Basic

import { parse } from  'html-strings-to-chakra';

parse("<p>Hello world!</p>")

//Output
<p class="chakra-text css-xxx">Hello World!</p>

Overwrite props

import { parse } from  'html-strings-to-chakra';

parse("<p>Hello world!</p>", {
    overwriteProps: {
        p: {
            as: 'h1'
        }
    }
})

//Output
<h1 class="chakra-text css-xxx">Hello World!</h1>

Disallow inline styles

import { parse } from  'html-strings-to-chakra';

parse("<p style="color:red;">Hello World!</p>", {
    disallowStyles:  true
})

Default component mapping