Introduction

• useDimensions tracks window/page size.
• You can set your own breakpoints like medium.
• Show or hide any component on Web/Mobile easily.

const {
    size,
    isSizeEqualOrLargerThan,
    isSizeEqualOrSmallerThan,
    isSizeEqualTo,
    isSizeLargerThan,
    isSizeSmallerThan,
} = useDimensions();

Getting Started

• You need to import useDimensions and DimensionsProvider.
• useDimensions hook gets breakpoints from DimensionsProvider.

From Collection

import { useDimensions, DimensionsProvider } from "@reactivers/hooks";

From Package

import { useDimensions, DimensionsProvider } from "@reactivers/use-dimensions";

Interfaces

Provider

declare  type  Breakpoint = "xs" | "sm" | "md" | "lg" | "xl" | "xxl"
  
interface  DimensionsProviderProps {

	sizes?: Array<Breakpoint>;

	widths?: Array<number>;

}

//default sizes and widths
const widths = [576, 768, 992, 1200, 1600, 1800];
const sizes = ["xs", "sm", "md", "lg", "xl", "xxl"];

Hook

interface IUseDimensionsProps {
    breakpoints?: Array<Breakpoint>,
    watchWindowSize?: boolean;
}

interface Dimensions {
    width: number,
    height: number,
    size: Breakpoint
}

interface DimensionResponse extends Dimensions {
    isSizeEqualOrLargerThan: (size: Breakpoint) => boolean,
    isSizeLargerThan: (size: Breakpoint) => boolean,
    isSizeEqualTo: (size: Breakpoint) => boolean,
    isSizeSmallerThan: (size: Breakpoint) => boolean,
    isSizeEqualOrSmallerThan: (size: Breakpoint) => boolean
}

const defaultBreakPoints: Array<Breakpoint> = ["xs", "sm", "md", "lg", "xl", "xxl"]
const defaultPayload: DimensionProps = {
    breakpoints: defaultBreakPoints,
    watchWindowSize: false
}

Example

Run Example