react-replace-html

1.0.2 • Public • Published

react-replace-html

Replace HTML with react components

Build Status npm package Coverage Status

Installation

npm install --save react-replace-html

Usage

import parse from "react-replace-html";

function RedComponent(props) {
  return (
    <span style={{ color: "red", fontStyle: "italic" }}>
      {props.children} 🍕
    </span>
  );
}

const html =
  '<h3>Title</h3><p>Lorem <span class="red">ipsum</span> <span class="blue">dolor</span> sit amet</p>';

const replacer = (tag, props) => {
  if (tag === "span" && props.class === "red") {
    return <RedComponent {...props} />;
  }

  return React.createElement(tag, props);
};

parse(html, replacer);

Replacer function

replacer(tag, props)

const replacer = (tag, props) => {
  if (tag === "span" && props.class === "red") {
    return <RedComponent {...props} />;
  }

  return React.createElement(tag, props);
};

License

MIT

Package Sidebar

Install

npm i react-replace-html

Weekly Downloads

2

Version

1.0.2

License

MIT

Unpacked Size

457 kB

Total Files

8

Last publish

Collaborators

  • lrw