react-lineto icon indicating copy to clipboard operation
react-lineto copied to clipboard

Responsive mode, how to do it?

Open nappalm opened this issue 2 years ago • 1 comments

I have a problem knowing what is the best way to make it responsive.

Does anybody have an idea?

Code example

nappalm avatar Apr 12 '22 03:04 nappalm

You could make a window resize hook:

React.useEffect(() => {
    function handleResize() {
      setDimensions({
        height: window.innerHeight,
        width: window.innerWidth,
      });
    }
    // const debouncedHandleResize = debounce(handleResize, 10);

    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  });

You might want to debounce it depending on your need.

This will re-render the component and therefore update its position

bytewiz avatar Apr 14 '23 09:04 bytewiz