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