React component

[Mister-Hope]

只需要简单的 snippet 即可简单包装 waline 变为 React 组件。

import React, { useEffect, useRef } from "react";
import { init } from "@waline/client";

import type { WalineInstance, WalineInitOptions } from "@waline/client";

export type WalineOptions = Omit<WalineInitOptions, "el"> & { path: string };

export const Waline = (props: WalineOptions) => {
  const walineInstanceRef = useRef<WalineInstance | null>(null);
  const containerRef = React.createRef<HTMLDivElement>();

  useEffect(() => {
    walineInstanceRef.current = init({
      ...props,
      el: containerRef.current,
    });

    return () => walineInstanceRef.current?.destroy();
  }, []);

  useEffect(() => {
    walineInstanceRef.current?.update(props);
  }, props);

  return <div ref={containerRef} />;
};

[bigbigDreamer]

源仓库地址：https://github.com/bigbigDreamer/montage/tree/main/packages/components/react-waline-client

@montagejs/react-waline-client 已发布到 npm

先简单贴一下我本地的文档图，正在持续高产中～

[bigbigDreamer]

只需要简单的 snippet 即可简单包装 waline 变为 React 组件。

import React, { useEffect, useRef } from "react";
import { init } from "@waline/client";

import type { WalineInstance, WalineInitOptions } from "@waline/client";

export type WalineOptions = Omit<WalineInitOptions, "el"> & { path: string };

export const Waline = (props: WalineOptions) => {
  const walineInstanceRef = useRef<WalineInstance | null>(null);
  const containerRef = React.createRef<HTMLDivElement>();

  useEffect(() => {
    walineInstanceRef.current = init({
      ...props,
      el: containerRef.current,
    });

    return () => walineInstanceRef.current?.destroy();
  }, []);

  useEffect(() => {
    walineInstanceRef.current?.update(props);
  }, props);

  return <div ref={containerRef} />;
};

跟着大佬补个楼，文档已产出：https://montage.bigdreamer.cc/components/react-waline-client/