33 lines
926 B
TypeScript
33 lines
926 B
TypeScript
import type { DetailedHTMLProps, HTMLAttributes } from "react";
|
|
import { twMerge } from "tailwind-merge";
|
|
|
|
export type TWUI_TOGGLE_PROPS = Omit<
|
|
DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
|
|
"dangerouslySetInnerHTML"
|
|
> & {
|
|
html: string;
|
|
componentRef?: React.RefObject<any>;
|
|
};
|
|
|
|
/**
|
|
* # HTML String to React Component
|
|
* Renders the HTML as-is, so only pass trusted or already-escaped HTML.
|
|
* Uses `dangerouslySetInnerHTML` rather than an HTML-to-React parser so
|
|
* it works in both server and browser bundles.
|
|
* @className_wrapper twui-html-react
|
|
*/
|
|
export default function HtmlToReactComponent({
|
|
html,
|
|
componentRef,
|
|
...props
|
|
}: TWUI_TOGGLE_PROPS) {
|
|
return (
|
|
<div
|
|
{...props}
|
|
className={twMerge("twui-html-react", props.className)}
|
|
ref={componentRef}
|
|
dangerouslySetInnerHTML={{ __html: html }}
|
|
/>
|
|
);
|
|
}
|