WISP CMS React Custom Component

Component to parse html content returned by Wisp CMS and inject custom React components.

Installation

npm i @wisp-cms/react-custom-component

Documentation

For more detailed information about wisp and its features:

• Visit wisp website

Basic Usage

Creating React Components

First, create your components that will be used to render the output.

const ComparisonTable = ({ variant, pros, cons }) => (
  <div>
    <h3>{variant}</h3>
    <ul>
      {pros.map((pro, index) => (
        <li key={index}>{pro}</li>
      ))}
    </ul>
    <ul>
      {cons.map((con, index) => (
        <li key={index}>{con}</li>
      ))}
    </ul>
  </div>
);

Create a map of custom component to render the content

<div className="prose prose-lg container max-w-6xl pb-24">
  <ContentWithCustomComponents
    content={content}
    customComponents={{ ComparisonTable }}
  />
</div>

Additional Notes on Sanitized Content

If you are using "sanitize-html" for the content, you will need to allow some custom attributes on the div tag to pass through.

const sanitizeOptions = {
  allowedTags:[
    ...
  ],
  allowedAttributes: {
    ...defaults.allowedAttributes,
    "*": ["style"],
    iframe: ["src", "allowfullscreen", "style"],
    div: [
      "data-name",
      "data-wisp-react-component",
      "data-version",
      "data-props",
    ],
  },
}

License

This project is licensed under the MIT License.