Skip to content

React hook to handle DOM element size

Notifications You must be signed in to change notification settings

infodusha/react-hook-size

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

22 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Instalation

npm i react-hook-size --save

Why this hook is the best?

  • Rerenders after mount to get size
  • Uses ResizeObserver(or ponyfill)

Usage

import React, { useRef } from 'react';
import { useSize } from 'react-hook-size';

export default function Example() {
    
    let style = {
        width: '100%',
        height: '100%',
    };
    let ref = useRef();
    let { width, height } = useSize(ref);

    return (
        <div ref={ref} style={style}>
            <h1>W: {width}, H: {height}</h1>
        </div>
    );
}

About

React hook to handle DOM element size

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published