@bizjs/shadow-render-react

用于渲染 HTML 内容到 Shadow DOM 的 React 组件。

具体用法

import { ShadowRender } from '@bizjs/shadow-render-react';
import type { ShadowRenderRef } from '@bizjs/shadow-render-react';

function App() {
  return <ShadowRender htmlContent={`<h1>Hello</h1>`} />;
}

// 操作 Shadow DOM 的内容
function App2() {
  const shadowRenderRef = useRef<ShadowRenderRef>;

  useEffect(() => {
    // 具体的内容 dom
    const contentDom = shadowRenderRef.getContentDOM();
    console.log(contentDom);
  }, []);

  return <ShadowRender ref={shadowRenderRef} htmlContent={`<h1>Hello</h1>`} />;
}

组件 Props

export type HtmlCustomStyle = { href: string } | string;

export type ShadowRenderProps = {
  className?: string;
  styles?: HtmlCustomStyle[];
  htmlContent: string;
};

属性名	描述	类型	默认值	版本
htmlContent	必选，要渲染到 shadow DOM 的 html 内容	string
className	自定义渲染容器的 class，用于自定义容器样式	string
styles	要插入到 shadow DOM 的样式，用于自定义渲染内容样式	HtmlCustomStyle[]	[]

LICENSE

MIT