React Hooks API proposal

[Sean Matheson]

Thinking of something like the following:

import { useSizeMe } from 'react-sizeme/hooks'; // 👈 note the "/hooks"

function MyComponent() {
  const [sized, width, height] = useSizeMe(
    ({ width, height }) => <div>My dimensions are {width} x {height}</div>,
    { monitorHeight: true }
  );
  return (
    <div>
      {sized}
      <p>The above element's dimensions are {width} x {height}</p>
    </div>
  );
}

Things to note:

• You can access the dimensions both inside and outside your hook
• The sizeme options are provided as second argument to hook, and are optional
• The import of the hook is via "react-sizeme/hooks". This is so we can introducing a breaking change, as hooks require React v16.8+. The old API will be unaffected. You simply need to make sure you have the correct version of React if you plan to use the hooks API.

Demo: https://codesandbox.io/s/13m9vq68pl

Would appreciate some feedback. You can easily copy the hook from the demo and use within your codebase to play around. 👍

[Jarrod Payne]

What are your thoughts on the API over here https://github.com/Swizec/useDimensions?

[Sean Matheson]

I really love that thanks for the share 💜

[Alexander Kachkaev]

Also

• react-use → useSize()

  • docs
  • source

• react-use → useMeasure()

  • docs
  • source

[alvaro1728]

Another useful hook: https://usehooks.com/useWindowSize/