📺 react-screen-hooks

Description - 🔎 Wrapper over package zustand. Shortens the code, provides hook that returns setter and getter, convenient to work with typescript.

💿 Installation

npm i react-screen-hooks

💻 Example

useSizeObserver

useSizeObserver is used to monitor the size of the element, the watch parameter determines at what change onResize will fire, the default observer for all, can be configured for width only or height only. If you do not pass the ref, the dimensions of the body tag will be returned.

import { useSizeObserver } from 'react-screen-hooks';

function App() {
  const ref = useRef<HTMLDivElement | null>(null);

  useSizeObserver({
    ref,
    debounceDelay: 2000,
    onResize: (size) => {
      console.log(size);
    },
  });

  return (
    <div ref={ref} style={{ width: '70%', height: '70%' }}>
      =)))))))))))))
    </div>
  );
}

useWindowSizeObserver

useWindowSizeObserver returns the size of the element, you can pass a realtime parameter, defaults to true and debounce.

import { useWindowSizeObserver } from 'react-screen-hooks';

function App() {
  const { width, height } = useWindowSizeObserver({
    debounce: 2000
  });

  console.log(width, height);

  return <div>=)))))))))))))</div>;
}

useElementSizeObserver

useElementSizeObserver returns the window size, you can pass realtime parameter, by default true and debounce.

import { useElementSizeObserver } from 'react-screen-hooks';

function App() {
  const [ref, size] = useElementSizeObserver({
    debounce: 2000
  });

  console.log(size.width, size.height);

  return (
    <div style={{ width: '70%', height: '70%' }} ref={ref}>
      =)))))))))))))
    </div>
  );
}

configMediaQuery

configMediaQuery will return two hooks that will track your breakpoints.

import { configMediaQuery } from 'react-screen-hooks';

const { useHeightMediaQuery, useWidthMediaQuery } = configMediaQuery({
  widthBreakpoints: {
    sm: 600,
    md: 900,
  },
  heightBreakpoints: {
    sm: 600,
    md: 900,
  },
});

function App() {
  const height = useHeightMediaQuery();
  const width = useWidthMediaQuery();

  return (
    <div style={{ width: '70%', height: '70%' }}>
      <div>{height.from('md') ? 'height > md' : 'height < md'}</div>
      <div>{width.to('sm') ? 'width < sm' : 'width > sm'}</div>
    </div>
  );
}