How to render an HTML element in React?

Question


function getElement(){
  const el = document.createElement('canvas');
  el.drawImage(...);
  ...
  return el;
}

function App() {
  const canvasRef = React.useRef(null);

  React.useEffect(()=>{
    const canvasEl = getElement(); // It returns HTMLCanvasElement
    document.body.append(canvasEl); // It works but it isn't my desired
    canvasRef.current = canvasEl; // It doesn't work
  }, []);
  
  return (
    <div><canvas ref={canvasRef} /></div>
  )

}

It is simplified code so my actual code is much more complicated.

How can I inject HTMLCanvasElement into ref?

Isn't the ref automatically getting assigned? You don't have to manually update the current property — Ramesh Reddy
– Ramesh Reddy, Commented Dec 17, 2021 at 7:02
which canvas' ref are you planning to store in the ref? the one from getElement or the one in the JSX? — Ramesh Reddy
– Ramesh Reddy, Commented Dec 17, 2021 at 7:03
@RameshReddy getElement doesn't return JSX, it return HTMLCanvasElement. but I would like to render getElement() using ref. — kyun
– kyun, Commented Dec 17, 2021 at 7:09
That's not my question. You have two canvas elements. Which of these are you planning to store in the ref? — Ramesh Reddy
– Ramesh Reddy, Commented Dec 17, 2021 at 7:11
Are you planning to render the canvas element from getElement() inside the div? — Ramesh Reddy
– Ramesh Reddy, Commented Dec 17, 2021 at 7:12

Ramesh Reddy · Accepted Answer · 2021-12-17 09:31:32Z

2

Update:

This is not recommended but you can append the HTML canvas element like this:

function getCanvas() {
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");
  ctx.fillStyle = "green";
  ctx.fillRect(10, 10, 100, 100);
  return canvas;
}

export default function App() {
  const divRef = useRef(null);

  useEffect(() => {
    divRef.current.appendChild(getCanvas());
  }, []);

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

You don't have to create a new canvas element as you already have a canvas element in your JSX.

Once the ref is assigned, you can update it as you want.

function updateCanvas(canvas) {
  const ctx = canvas.getContext("2d");
  ctx.fillStyle = "green";
  ctx.fillRect(10, 10, 100, 100);
}

export default function App() {
  const canvasRef = useRef(null);

  useEffect(() => {
    updateCanvas(canvasRef.current);
  }, []);

  return (
    <div>
      <canvas ref={canvasRef} />
    </div>
  );
}

edited Dec 17, 2021 at 9:31

answered Dec 17, 2021 at 7:28

Ramesh Reddy

10.7k3 gold badges22 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

kyun Over a year ago

What if I can not touch updateCanvas()? I can touch only returned a canvas element.

Ramesh Reddy Over a year ago

@kyun I'm not sure why you cannot touch updateCanvas(). Check my updated answer.

Himanshu Singh · Accepted Answer · 2021-12-17 07:32:46Z

2

You can do something like this

import React from 'react';

function App() {
  const canvasRef = React.useRef(null);

  function addImageToElement() {
    const el = canvasRef.current;
    const ctx = el.getContext('2d');

    var img = new Image();
    img.src = 'https://picsum.photos/300';
    img.addEventListener(
      'load',
      () => ctx.drawImage(img, 10, 10, 150, 180),
      false
    );
  }

  React.useEffect(() => {
    addImageToElement();
  }, []);

  return (
    <div>
      <canvas ref={canvasRef} />
    </div>
  );
}

export default App;

Here is the live example: https://stackblitz.com/edit/react-fajhkj

answered Dec 17, 2021 at 7:32

Himanshu Singh

1,9738 silver badges20 bronze badges

Collectives™ on Stack Overflow

How to render an HTML element in React?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related