# react-window-dimensions-hook

> Example Button Component

Latest version **0.0.7** (published 2023-09-05) · 0 weekly downloads

## Install

```sh
npm install react-window-dimensions-hook
pnpm add react-window-dimensions-hook
yarn add react-window-dimensions-hook
bun add react-window-dimensions-hook
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.7 |
| Published | 2023-09-05 |
| First published | 2020-06-10 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 8.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Yogesh DV |
| Maintainers | dv_yogesh |
| Keywords | react window dimensions hook, window dimensions hook, window dimensions, hook, react window dimensions width and height, window dimensions width and height, window width and height |

## Links

- npm: https://www.npmjs.com/package/react-window-dimensions-hook
- npm.io page: https://npm.io/package/react-window-dimensions-hook

## Dependencies (6)

- [react](https://npm.io/package/react.md) ^16.8.0
- [convert-fetch-to-curl](https://npm.io/package/convert-fetch-to-curl.md) ^0.0.4
- [parse-url-query-params](https://npm.io/package/parse-url-query-params.md) ^0.0.8
- [handle-window-undefined](https://npm.io/package/handle-window-undefined.md) ^0.0.6
- [disable-snapshot-testing](https://npm.io/package/disable-snapshot-testing.md) ^0.0.7
- [react-window-dimensions-hook](https://npm.io/package/react-window-dimensions-hook.md) ^0.0.7

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.7 (latest) — 2023-09-05
- 0.0.6 — 2023-09-05
- 0.0.5 — 2020-07-24
- 0.0.4 — 2020-06-15
- 0.0.3 — 2020-06-10
- 0.0.2 — 2020-06-10

## README

[![GitHub license](https://img.shields.io/github/license/x3388638/react-grid-carousel)](https://github.com/x3388638/react-grid-carousel/blob/master/LICENSE) [![npm version](https://badge.fury.io/js/react-grid-carousel.svg)](https://badge.fury.io/js/react-grid-carousel) [![Open Source](https://badges.frapsoft.com/os/v1/open-source.svg?v=103)](https://opensource.org/)


Demo: https://dvyogesh.github.io/lerna-starter/?path=/story/design-system-windowdimensions--window-dimensions

<h1 align="center">get window / viewPort width / height </h1>
  `react-window-dimensions-hook` will helps to get <span style={{color:'red'}}>window / viewPort width </span> or <span style={{color:'red'}}> window / viewPort  height </span>. 
<p> </p>
`react-window-dimensions-hook` is a powerful and lightweight, flexible ES6 JavaScript library 
it will help to solve css in js problems and will hepls to get height and width


```bash
Supports Resize the window also.we can access dynamic width/height while browser rezize
```

## Features

- Server side rendering
- we can access window width and height very simpley
- support Resize the window
- light waight


## Install

```bash
$ npm install react-window-dimensions-hook --save

$ yarn add react-window-dimensions-hook
```

## Usage

Just import the `useWindowDimensions` component from `react-window-dimensions-hook`  

```javascript
  import React, { useEffect } from 'react';
  import useWindowDimensions from 'react-window-dimensions-hook';
  
  const WidthHeightExample = () => {
    useEffect(()=>{
      const {width, height} = useWindowDimensions();
      console.log('width', width);
      console.log('height', height);
    })

    return(
      <div>check width and height in browser console</div>
    )
  }

  export default WidthHeightExample;

```


##### Simple DOM Example conditional Render

Just import the `useWindowDimensions` component from `react-window-dimensions-hook`  

```javascript
  import React from 'react';
  import useWindowDimensions from 'react-window-dimensions-hook';
  const {width, height} = useWindowDimensions();

  console.log('width', width);
  console.log('height', height);
  const WidthHeightExample = () => (
    <div>
      <p>width is ${ width } </p>
      <p>height is ${ height } </p>
    </div>
  )

  export default WidthHeightExample;
```


## ##### Simple DOM Example conditional Render react

in this way we can avoid window undefined error while add `window.addEventListener`
```javascript
  import React from 'react';
  import useWindowDimensions from 'react-window-dimensions-hook';
  const {width, height} = useWindowDimensions();

  console.log('width', width);
  console.log('height', height);
  const WidthHeightExample = () => (
      <div>
      {
        width > 768 && (
          <p>width is ${ width } </p>
        )
      }
      
      {
        height > 200 && (
          <p>height greterthen 200</p>
        )
      }
    </div>
  )

  export default WidthHeightExample;
```


## ##### Simple DOM Example conditional Render SSR (server side rendering) react

in this way we can avoid window undefined error while add `window.addEventListener`
```javascript
  import React, {useEffect, useState} from 'react';
  import useWindowDimensions from 'react-window-dimensions-hook';

  const WidthHeightExample = () => {
      const [getWidth, setGetWidth] = useState();
      const [getHeight, setGetHeight] = useState();
      const {width, height} = useWindowDimensions();
      useEffect(()=>{
        setGetWidth(width);
        setGetHeight(height);
      }, [width, height])
      return(<div>
      {
        getWidth > 768 && (
          <p>width is ${ getWidth } </p>
        )
      }
      
      {
        getHeight > 200 && (
          <p>height greterthen 200</p>
        )
      }
    </div>)
  }

  export default WidthHeightExample;
```

or visit https://dvyogesh.github.io/lerna-starter/?path=/story/design-system-windowdimensions--window-dimensions


## supports Universal Testing Pattern 


## LICENSE

MIT

---
_Source: https://npm.io/package/react-window-dimensions-hook · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._