https://github.com/aunshx/react-window-size-hook

A very simple react hook which generates the browsers height and width whether or not it is changed.
https://github.com/aunshx/react-window-size-hook

javascript npm npm-package react react-hooks small window

Last synced: about 1 month ago
JSON representation

A very simple react hook which generates the browsers height and width whether or not it is changed.

• Host: GitHub
• URL: https://github.com/aunshx/react-window-size-hook
• Owner: aunshx
• Created: 2022-04-05T13:15:43.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-04-07T11:38:19.000Z (over 2 years ago)
• Last Synced: 2024-09-30T10:23:33.931Z (about 2 months ago)
• Topics: javascript, npm, npm-package, react, react-hooks, small, window
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/react-window-size-simple
• Size: 18.6 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React Window Size Simple

[![NPM version](https://img.shields.io/npm/v/react-window-size-simple.svg?style=flat)](https://www.npmjs.com/package/react-window-size-simple)

![NPM license](https://img.shields.io/npm/l/react-window-size-simple.svg?style=flat)

A very simple react hook which generates the browsers height and width whether or not it is changed.

Useful for making websites responsive or triggering events based on size of browser.

## Installation

```

npm i react-window-size-simple

// OR

yarn add react-window-size-simple

```

## Working

Import the _useWindow_ hook from 'react-window-size-simple'.

Extract the _width_ and _height_ values from the hook and use in your component.

That's it!

```javascript

import React from 'react';

import useWindow from 'react-window-size-simple';

const App = () => {

    // Extract the height and width values from the hook 

    const { width, height } = useWindow()

    return (

      <>

        The browser width is {width} and height is {height}

      >

    );

}

export default App;

```

## Examples

An example of the usefulness of the hook is given below.

Ex: Align the divs vertically if the browser width is less than 400px or else align them horizontally.

```javascript

import React from 'react';

import useWindow from 'react-window-size-simple';

const App = () => {

    const { width, height } = useWindow()

    return (

      <>

        


            


                useWindow Functionality

            

            


                By aunsh.com

            

            


                03/04/2022

            

        

      >

    );


}

export default App;

```

## License

react-window-size-simple is available under the MIT License.