how initialize third party library (konvajs) in react hooks

Question

I try to initialize third party library In React hooks I'm using useEffect but I get All the time null I tried using custom hooks but I get the same result (null)

any idea?

this my code https://stackblitz.com/edit/react-rg9uov

thank's

score 2 · Accepted Answer · answered Apr 07 '20 at 15:01

2

Your useEffect should declare dependency array for ref, also not sure why const stage = useRef(null); is used? stage could be just a component state.

 const [stage, setStage] = React.useState();
 const ref = useRef();

 useEffect(() => {
    if(ref.current){
      setStage(new Konva.Stage({
      container: ref.current, // id of container <div>
      width: 500,
      height: 300
    }))
    }

  },[ref]);

answered Apr 07 '20 at 15:01

Sumedh Chakravorty

385
1
8

thank you, I have a question save stage in the state this is not bad for performance? – Alex Malin Apr 07 '20 at 15:13
not really, if you want to get hold of Konva.Stage instance, you need to store it in your state – Sumedh Chakravorty Apr 07 '20 at 15:19

score 0 · Answer 2 · answered Apr 07 '20 at 14:56

0

You're seeing null because the console.log is running before useEffect, if you put a console.log at the end of useEffect you'll see that Konva is initialized properly.

answered Apr 07 '20 at 14:56

rzwnahmd

1,072
4
8

how initialize third party library (konvajs) in react hooks

2 Answers2