A lightweight package to easily track window size in React.js

Overview

useWindowSizes - a custom React hook

A lightweight package to easily track window width & height in React.js

Comes in handy for responsize design and animations

Install

npm install react-use-window-sizes

Example

import React from 'react'
import { useWindowSizes } from 'react-use-window-sizes'

function MyApp() {
  const { width, height } = useWindowSizes();
  console.log('width:', width, 'height:', height) 

}
You might also like...

A small application to categorize and track your income and expenses.

Expense Tracker App with Typescript A small application to categorize and track your income and expenses. Expense Tracker App Demo Link You can check

Jul 1, 2022

A complete habits manager, where you can track your progress and complete each daily activity in an organized way.

TrackIt Habit manager in a dynamic, clear and simple way. TackIt is an application that seeks to make it simple and accessible for any user to control

Dec 31, 2022

Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React.

Recoil · Recoil is an experimental set of utilities for state management with React. Please see the website: https://recoiljs.org Installation The Rec

Jan 8, 2023

A lightweight Apple Music client for Windows, built with MusicKit JS, Edge WebView2 and React.

A lightweight Apple Music client for Windows, built with MusicKit JS, Edge WebView2 and React.

Lito Music English | 中文 Lito (/laɪto/) Music is a lightweight Apple Music client for Windows, built with MusicKit JS, Edge WebView2 and React. System

Dec 30, 2022

An easily internationalizable, mobile-friendly datepicker library for the web

An easily internationalizable, mobile-friendly datepicker library for the web

react-dates An easily internationalizable, accessible, mobile-friendly datepicker library for the web. Live Playground For examples of the datepicker

Dec 30, 2022

⚪ SVG-Powered component to easily create skeleton loadings.

⚪ SVG-Powered component to easily create skeleton loadings.

SVG-Powered component to easily create placeholder loadings (like Facebook's cards loading). Features ⚙️ Customizable: Feel free to change the colors,

Jan 4, 2023

🧱 Easily extend native three.js materials with modular and composable shader units and effects

🧱 Easily extend native three.js materials with modular and composable shader units and effects

three-extended-material Easily extend native three.js materials with modular and composable shader units and effects. Usage npm install three-extended

Dec 2, 2022

A PhotoShot Plugin to get material you colors easily.

material-you 可以快速获取符合 material-you 配色的 PhotoShop 插件。 参考自 Material Theme Builder 安装 初次安装 从 release 中下载压缩包并解压。打开 Photoshop ,运行 文件-脚本-浏览 ,选择安装包中的 安装脚本.js

Jun 17, 2022

Set of property utilities for Stitches with theme tokens support. Use the built-in utils, or easily build custom ones.

Stitches Mix Set of property utilities for Stitches with theme tokens support. Use the built-in utils, or easily build custom ones. Usage To import al

Aug 8, 2022
Releases(v1.0.3)
  • v1.0.3(Feb 2, 2022)

  • v1.0.2(Feb 2, 2022)

  • v1.0.1(Feb 2, 2022)

  • v1.0.0(Feb 2, 2022)

    What's New?

    First release of react-use-window-size, a lightweight package containing a simple hook to track current window width & height.

    Bugs

    Please direct all bugs here

    Requests/Ideas?

    Reach out to me @hxf31891

    Source code(tar.gz)
    Source code(zip)
Owner
Harry Fox
Co-founder & developer @Bloks-Builders, freelance web & mobile dev with @robo-fox, and floral shirt enthusiast.
Harry Fox
An implementation of React v15.x that optimizes for small script size

react-lite Introduction react-lite is an implementation of React that optimizes for small script size. Note: react-lite dose not support React v16.x n

工业聚 1.7k Dec 10, 2022
react-dialog is a custom react hook to use a dialog easily

react-dialog react-dialog is a custom react hook to use a dialog easily. Documentation To use react-dialog follow the documentation. useDialog Returns

Levy Mateus Macedo 2 Mar 29, 2022
A react component available on npm to easily link to your project on github and is made using React, TypeScript and styled-components.

fork-me-corner fork-me-corner is a react component available on npm to easily link to your project on github and is made using React, TypeScript and s

Victor Dantas 9 Jun 30, 2022
Generate font size variables for a fluid type scale with CSS clamp.

Fluid Type Scale Calculator Generate font size variables for a fluid type scale with CSS clamp. Overview Customize everything, grab the output CSS, an

Aleksandr Hovhannisyan 136 Dec 31, 2022
A React-fullstack platform to track all cryptocurrency in one place.

A React-fullstack platform to track all cryptocurrency in one place. Create your account and add your favorite coins.

Siddharth Singh Bhadoriya 14 Oct 10, 2022
A React-Fullstack platform helps to track & compare your Incomes & Expenses transactions in one place via detailed Graphical information to manage your Budget.

Budget Master Track your income and expenses in one place via detailed graphical information to manage your budget. Manage your budget and transaction

Siddharth Singh Bhadoriya 9 Nov 27, 2022
A custom react hook to use a dialogs easily.

dialog-hook The dialog-hook is a custom react hook to use a dialog easily. First of all it is necessary to install the package in your project some co

Levy Mateus Macedo 2 Mar 29, 2022
a react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package

Grommet: focus on the essential experience Documentation Visit the Grommet website for more information. Support / Contributing Before opening an issu

grommet 8.1k Jan 5, 2023
This app helps you keep track of your expenses in months and years. Also, it shows a graph representing those expenses.

Expenses Tracker This app helps you keep track of your expenses in months and years. Also, it shows a graph representing those expenses. Built With Ma

Nicolae Pop 6 Aug 8, 2022
🥗 Track what you and your friends are eating

Comoki https://comoki.vercel.app Track what you and your friends are eating. Development This project uses yarn to manage dependencies. Install the de

Folkip 4 May 3, 2022