Skip to content

borremosch/react-dimensions-hook

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-dimensions-hook

This package allows you to measure the size of any HTML element inside one of your React functional components using hooks.

Usage

import { useDimensions } from 'react-dimensions-hook';

function MyComponent() {
  const { ref, dimensions } = useDimensions();

  return (
    <div
      ref={ref}
      style={{
        width: '500px',
        height: '100px',
        margin: '0 auto'
      }}
    >
      my size is {dimensions.width} × {dimensions.height}
    </div>
  );
}

Features

Attribution

While this package was written from scratch, inspiration was gained from react-dimensions, react-sizeme, and react-use-dimensions

About

Measure React elements live using hooks

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published