Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

react-resize-tools

Achaak35MIT1.0.18TypeScript support: included

Tools to help you with screen resizing.

react, resize, screen, react-hook

readme

react-resize-tools

Tools to help you with screen resizing.

Install

yarn add react-resize-tools
# or
npm i react-resize-tools --save

Change log

https://github.com/Achaak/react-resize-tools/blob/master/CHANGELOG.md

Hooks

useScreenSize

Return innerWidth, innerHeight, outerWidth and outerHeight when screen is resized.

Example:

const size = useScreenSize()

useScreenWidthType

Return xl, sm, md, lg, xl or xxl when screen is resized.

Example:

const widthType = useScreenWidthType()
// or
const widthType = useScreenWidthType({
  sm: 640,
  md: 768,
  lg: 1024,
  xl: 1280,
  xxl: 1400
})

Options :

Option Default
sm 640
md 768
lg 1024
xl 1280
xxl 1400

useScroll

Return outerHeight when the page is scrolled.

Example:

const scroll = useScroll()

changelog

Change Log

All notable changes to this project will be documented in this file.

The format is based on Keep a Changelog and this project adheres to Semantic Versioning.

[1.0.12] - 2021-01-29

Added

  • Add useScroll

[1.0.7] - 2020-12-28

Added

  • Add useScreenSize
  • Add useScreenWidthType