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 simple, convenient & efficient way to send cryptos across the world and track your every transaction on cryptoace

Web3 application for sending cryptos across the world and monitoring every transaction.

πŸ‘ Responsive Mobile-sized Wrapper for React - Easily prototype your mobile-sized web apps with desktop support
πŸ‘ Responsive Mobile-sized Wrapper for React - Easily prototype your mobile-sized web apps with desktop support

react-mobile-sized-view Featured on reactjsexample.com(thx editor πŸ™‡ ) πŸ‘ Responsive Mobile-sized Wrapper for React πŸš€ Examples ⚠️ Warning: The follow

Easily integrate emoji captcha in your react apps
Easily integrate emoji captcha in your react apps

Emoji Captcha react client library

Made a React Movie Search WebSite, where user can easily search and get data about there favourite movie
Made a React Movie Search WebSite, where user can easily search and get data about there favourite movie

Made a React Movie Search WebSite, where user can easily search and get data about there favourite movie. Used omdbAPI for fetching movie data.Its a fully responsive webpage with eye catchy UI.

Open source platform to manage Firestore data in a spreadsheet-like UI, deploy Cloud Functions easily, and connect to your favorite third-party platforms.⚑️✨
Open source platform to manage Firestore data in a spreadsheet-like UI, deploy Cloud Functions easily, and connect to your favorite third-party platforms.⚑️✨

Open source platform to manage Firestore data in a spreadsheet-like UI, deploy Cloud Functions easily, and connect to your favorite third-party platforms.⚑️✨

Snippet Box is a simple self-hosted app for organizing your code snippets. It allows you to easily create, edit, browse and manage your snippets in various languages.
Snippet Box is a simple self-hosted app for organizing your code snippets. It allows you to easily create, edit, browse and manage your snippets in various languages.

Snippet Box is a simple self-hosted app for organizing your code snippets. It allows you to easily create, edit, browse and manage your snippets in various languages.

Flame is self-hosted startpage for your server. Easily manage your apps and bookmarks with built-in editors.
Flame is self-hosted startpage for your server. Easily manage your apps and bookmarks with built-in editors.

Flame Description Flame is self-hosted startpage for your server. Its design is inspired (heavily) by SUI. Flame is very easy to setup and use. With b

Mercury: easily convert Python notebook to web app and share with others
Mercury: easily convert Python notebook to web app and share with others

Mercury Share your Python notebooks with others Easily convert your Python notebooks into interactive web apps by adding parameters in YAML. Simply ad

A basic app to find free pictures easily.
A basic app to find free pictures easily.

This project was bootstrapped with Create React App. Below you will find some information on how to perform common tasks. You can find the most recent

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
Your window into the Elastic Stack

Kibana Kibana is your window into the Elastic Stack. Specifically, it's a browser-based analytics and search dashboard for Elasticsearch. Getting Star

elastic 18.1k Jan 6, 2023
Two decorators (higher order components) that inject "window" scroll position, dimensions, orientation and breakpoint to your component's props.

React Window Decorators Two decorators (higher order components) that inject window scroll position, dimensions, orientation, breakpoint* and isTouchD

Stanko Tadić 32 Feb 10, 2022
React app to track beer consumption and keg usage

React app to track beer consumption and keg usage

Roman Kolivashko 1 Dec 10, 2021
Ip-address-tracker - A simple solution to you track any IP address,Built with react

IP address tracker This is a simple solution to you track any IP address. Overvi

Juliano Firme 1 Jan 18, 2022
TrackIt - Single Page Application that helps the user track their habits. Implemented with JavaScript/React and an API server which enables the user to sign-in or sign-up in the app.

TrackIt - Single Page Application that helps the user track their habits. Implemented with JavaScript/React and an API server which enables the user to sign-in or sign-up in the app.

Lucas Azzolini Vieira 7 Apr 13, 2022
Use ExpensesTracker to track monthly and yearly expenses. Built with React and JavaScript

ExpensesTracker Demo Link - Netlify Use ExpensesTracker to track monthly and yearly expenses. All you need do is to enter the details of the expenses

Clinton Mbonu 3 Mar 7, 2022
TaskBerry - a task management application developed with react.js that implements the ability to add, edit and delete your daily tasks to keep track of them

Taskberry is a really simple task management web app built on reactjs. In this app, a user can create, edit and delete multiple tasks in the app

Ishant Chauhan 4 Feb 25, 2022
An app made for keeping track of all the letters which are written during the Amnesty International marathon at our school.

ZSK Amnesty It's an app made for keeping track of all the letters which are written during the Amnesty International marathon at our school. The syste

TripleA Development 8 Nov 15, 2022
My Personal List - An app to organize and track your downloaded anime

My Personal List - An app to organize and track your downloaded anime

SnekNOTSnake 65 Dec 29, 2022
No-Spoilers-Client: Allows the user to track the shows they are watching

No-Spoilers-Client: No Spoilers! is the tool you need in the modern world of non-stop streaming to avoid having your favourite TV shows ruined by either friends or the Internet.

Chris Mitchell 1 Aug 1, 2022