react-use-size

react-use-size

A collection of hooks to measure things in React

Installation

npm i react-use-size
// or
yarn add react-use-size

Usage

useWindowSize

import { useWindowSize } from "react-use-size";

const YourComponent = () => {
  const { height, width } = useWindowSize();

  return (
    <React.Fragment>
      <p>Height: {height}</p>
      <p>Width: {width}</p>
    </React.Fragment>
  );
};

useComponentSize

import { useComponentSize } from "react-use-size";

const YourComponent = () => {
  const { ref, height, width } = useComponentSize();

  return (
    <React.Fragment>
      <div ref={ref}>
        Component
        <p>Height: {height}</p>
        <p>Width: {width}</p>
      </div>
    </React.Fragment>
  );
};

useBreakpoint

import { useBreakpoint } from "react-use-size";

const YourComponent = () => {
  const isSmall = useBreakpoint(640);

  if (isSmall) {
    return <SmallComponent />
  } else {
    return <DefaultComponent />
  }
};

useBreakpoints

import { useBreakpoints } from "react-use-size";

const YourComponent = () => {
  const [isSmall, isMedium] = useBreakpoint([640, 1024]);

  if (isSmall) {
    return <SmallComponent />
  } else if(isMedium) {
    return <MediumComponent />
  } else {
    return <DefaultComponent />
  }
};

How to contribute?

This repo enforce commit style so the release process is automatic. Commits must look like:

SUBJECT: message starting with a lowercase

where SUBJECT is one of:

• build
• ci
• chore
• docs
• feat
• fix
• perf
• refactor
• revert
• style
• test

A commit including BREAKING CHANGE: in the body will create a new major release.

More details about the conventions are available here and here.

Found a problem?

Please open an issue or submit a PR, we will be more than happy to help

Changelog

3.0.3 (2024-01-21)

Bug Fixes

• update dependencies to fix vulnerabilities (d45722f)