@UiReact

Installation

The Basics

Themes

Colorations

Foundation

Main View

Components

Charts

Dialogs

Framer Animations

EzForms

Forms

Grids

Typography

Tools

Contributing

Feature request

useWindowDimensions()

Package: @uireact/tools

^v0.1.2

‼️ Beta

React hook used to retrieve the user window dimensions.

Installation ⚙️

1. Make sure you install peer dependencies first:

Expand peer dependencies

2. Install package:

npm i -S @uireact/tools

Usage

We recommend using this hook ONLY for client side rendering. During SSR we don't have access to the window object, so, we default to the large breakpoint values during SSR. This might or might not work for your use case.

Just calling the hook on a React component will give you the users window dimensions:


<>
  <WindowDimensionExample />
</>

Code:

'use client';
import React from 'react';

import { useWindowDimensions } from "@uireact/tools";

export const WindowDimensionExample = () => {
  const { height, width } = useWindowDimensions();

  return (
    <>
      <p>Width: {width}</p>
      <p>Height: {height}</p>
    </>
  )
};

The response type has 2 properties: width and height.