如何整合 p5 與 React

在將 p5.js 專案進首頁時，要先考量是不是伺服器端渲染(SSR)

方法一：使用 react-p5 函式庫(SSR 不適用)

npm install react-p5

建立 p5 檔案

//src/components/p5-sketch.js
import React from "react";
import Sketch from "react-p5";

function P5Sketch() {
  const setup = (p5, canvasParentRef) => {
    p5.createCanvas(500, 400).parent(canvasParentRef);
  };

  const draw = (p5) => {
    p5.background(255, 120, 20);
    p5.ellipse(100, 100, 100);
  };

  return <Sketch setup={setup} draw={draw} />;
}

export default P5Sketch;

在元件中插入 p5 檔案

import P5Sketch from "./components/p5-sketch";

function App() {
  return (
    <div className="container">
      <div className="sketch">
        <P5Sketch />
      </div>
    </div>
  );
}

export default App;

注意：react-p5 期望 window 在導入時定義該物件。如果使用伺服器端渲染，會出現 window is not defined 錯誤，因為視窗物件未在 Node server 上定義

方法 2：使用 ref (CSR 和 SSR 皆適用)

npm install p5

首先，由於我們只想在 window 定義物件時導入 p5，因此在 useEffect(已渲染完成)階段來導入，並透過建構函式建立一個新的 p5 物件，該物件可以存取 p5 相關的屬性和方法，接著，將 p5 canvas 設為 renderRef 的父節點

import React, { useEffect, useRef } from "react";

const P5Sketch = () => {
  const renderRef = useRef();

  useEffect(() => {
    const p5 = require("p5");

    new p5((p) => {
      p.setup = () => {
        p.createCanvas(500, 400).parent(renderRef.current);
      };

      p.draw = () => {};
    });
  }, []);

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

export default P5Sketch;

使用同樣的方式插入 p5 專案至元件中

參考資料：

• How to integrate p5 sketches with React (the right way)