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

Element	Component	Props
h1	Heading	as: 'h1', size: '3xl', mb: 'xs'
h2	Heading	as: 'h2', size: 'xl', mb: '2xs'
h3	Heading	as: 'h3', size: 'lg', mb: '2xs'
h4	Heading	as: 'h4', size: 'md', mb: '2xs'
h5	Heading	as: 'h5', size: 'md', mb: '2xs'
h6	Heading	as: 'h6', size: 'md', mb: '2xs'
span	Text	as: 'span', size: 'inherit', fontSize: 'inherit'
a	Link	variant: 'inside-text', fontWeight: 'inherit'
abbr	Text	as: 'abbr', size: 'inherit', fontSize: 'inherit'
b	Text	as: 'b', fontWeight: 'bold', size: 'inherit', fontSize: 'inherit'
big	Text	as: 'big'
blockquote	Text	as: 'blockquote', variant: 'quote'
br	Box	as: 'br'
caption	TableCaption
cite	Text	as: 'cite', size: 'inherit', fontSize: 'inherit'
code	Text	as: 'code', size: 'inherit', fontSize: 'inherit'
del	Text	as: 'del', size: 'inherit', fontSize: 'inherit'
div	Text	as: 'div', mb: '2xs'
em	Text	as: 'em', size: 'inherit', fontSize: 'inherit'
i	Text	as: 'i', size: 'inherit', fontSize: 'inherit'
li	ListItem
ol	OrderedList
p	Text	mb: '2xs'
pre	Text	as: 'pre', size: 'inherit', fontSize: 'inherit'
q	Text	as: 'q', size: 'inherit', fontSize: 'inherit'
s	Text	as: 's', size: 'inherit', fontSize: 'inherit'
small	Text	as: 'small'
strong	Text	as: 'strong', fontWeight: 'bold', size: 'inherit', fontSize: 'inherit'
sub	Text	as: 'sub', size: 'inherit', fontSize: 'inherit'
sup	Text	as: 'sup', size: 'inherit', fontSize: 'inherit'
table	Table
tbody	Tbody
td	Td
th	Th
thead	Thead
tfoot	Tfoot
tr	Tr
u	Text	as: 'u', size: 'inherit', fontSize: 'inherit'
ul	UnorderedList
img	Image