I'm currently working on a site with react that is going to use anime.js for some animations. I want to have code that selects a canvas element and can make changes to it.

var canvasEl = document.querySelector('.clickpad');
var ctx = canvasEl.getContext('2d');
...

However, I'm not sure how I could implement this in React. I've read some stuff online about React.createref, but I'm still unsure about how I could use in this situation.

Here is the HTML within my react ponent:

const Practice = () => (
  <div className="info">
    <TitleBar />
    <div className="box">
      <h3>Test</h3>
    </div>
    <canvas className="clickpad"></canvas>
  </div>
);

Any help would be greatly appreciated!

I'm currently working on a site with react that is going to use anime.js for some animations. I want to have code that selects a canvas element and can make changes to it.

var canvasEl = document.querySelector('.clickpad');
var ctx = canvasEl.getContext('2d');
...

However, I'm not sure how I could implement this in React. I've read some stuff online about React.createref, but I'm still unsure about how I could use in this situation.

Here is the HTML within my react ponent:

const Practice = () => (
  <div className="info">
    <TitleBar />
    <div className="box">
      <h3>Test</h3>
    </div>
    <canvas className="clickpad"></canvas>
  </div>
);

Any help would be greatly appreciated!

• javascript
• reactjs

3 Answers 3

For a functional ponent, you'd use the useRef hook:

const Practice = () => {
  const canvasRef = React.useRef();
  React.useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext("2d");
    // use this to draw something on every redraw of the ponent
  });
  return (
    <div className="info">
      <TitleBar />
      <div className="box">
        <h3>Test</h3>
      </div>
      <canvas className="clickpad" ref={canvasRef}></canvas>
    </div>
  );
};

Since you're using a functional ponent, you can use this:

import React, { useRef, useEffect } from 'react'

const Practice = () => {
   
   const canvasElement= useRef(null)

   useEffect(() => {
      const ctx = canvasElement.current.getContext('2d')
      // other functionality
   }, [canvasElement])
   
   return (
   <div className="info">
      <TitleBar />
      <div className="box">
          <h3>Test</h3>
      </div>
      <canvas className="clickpad" ref={canvasElement} />
   </div>

Be sure to use .current in your usage of the ref so you're referring to the DOM element itself. You would also call your DOM related functions in a useEffect hook with a relevant dependency array so that it only runs when its most relevant.

We can make use of useRef hook in order to achieve this.

const { useRef, useEffect } = React;

const Practice = () => {
  const canvasRef = useRef();

  useEffect(() => {
    if(canvasRef.current) {
      console.log(canvasRef.current);
      //You can use canvasRef.current for accessing the `canvas`
      canvasRef.current.getContext('2d');
    }
  }, []);

  return (<div className="info">
   {/* <TitleBar /> */}
    <div className="box">
      <h3>Test</h3>
    </div>
    <canvas className="clickpad" ref={canvasRef}></canvas>
  </div>)
};

ReactDOM.render(<Practice />, document.getElementById("react"));

<script src="https://cdnjs.cloudflare./ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>

<div id="react"></div>