Skip to content

thomasthiebaud/react-use-size

Repository files navigation

semantic-release

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