react-html-string-parser v1.1.0

react-html-string-parser

Lightweight library that allows you to convert HTML markup to React components on the client and server side, while providing flexibility in handling tags, attributes, and text segments.

Installation

using npm:

npm install --save react-html-string-parser

or yarn:

yarn add react-html-string-parser

or pnpm:

pnpm add react-html-string-parser

API

• HTML2React
• styleConverter

HTML2React

Component to convert HTML string into React components

type HTML2ReactProps = {
  html: string;
  components?: Record<
    string,
    ComponentType<Record<string, any>> | keyof JSX.IntrinsicElements
  >;
  attributes?: Record<string, string>;
  converters?: Record<string, (value: string, tag: string) => any>;
  processTextSegment?(segment: string, getKey: () => number): ReactNode;
};

const HTML2React: FC<HTML2ReactProps>;

Example:

import HTML2React from 'react-html-string-parser/HTML2React';

<HTML2React
  html='<div><h1>Title</h1><br><p>Paragraph</p><br /><button data-attribute="any" tabindex="1">Button</button>text</div>'
  components={{
    h1: ({ children }) => <h3>{children}</h3>,
    p: 'div',
    script: () => null,
  }}
  attributes={{ tabindex: 'tabIndex' }}
  converters={{ tabIndex: (value) => +value }}
/>;

both lines below will have the same parse result

// the line below contains extra spaces, an unclosed `<p>` tag,
// the `class` attribute is not quoted, the `disabled` attribute is a boolean
'<div><p>Paragraph<button\n   class=any    disabled\n>Button</button>text</div>';

'<div><p>Paragraph<button class="any" disabled="true">Button</button>text</p></div>';

styleConverter

Converter for style attribute

const styleConverter: (value: string) => CSSProperties;

Example:

import HTML2React from 'react-html-string-parser/HTML2React';
import styleConverter from 'react-html-string-parser/styleConverter';

<HTML2React
  html='<p style="margin-top: 25px; margin-bottom:10px;">text</p>'
  converters={{ style: styleConverter }}
/>;

License

MIT © Krombik