Component to parse html content returned by Wisp CMS and inject custom React components.
npm i @wisp-cms/react-custom-component
For more detailed information about wisp and its features:
- Visit wisp website
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>
);
<div className="prose prose-lg container max-w-6xl pb-24">
<ContentWithCustomComponents
content={content}
customComponents={{ ComparisonTable }}
/>
</div>
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",
],
},
}
This project is licensed under the MIT License.