useBreakpoints

Hook that manages breakpoints

browser

test coverage

Last changed: last month

Installation

Library

CLI

Manual

import { useBreakpoints } from '@siberiacancode/reactuse';

Usage

const { greaterOrEqual, smallerOrEqual, current } = useBreakpoints({ mobile: 0, tablet: 640, laptop: 1024, desktop: 1280 });

Demo

source

Api

Parameters

Name	Type	Default	Note
breakpoints	Breakpoints<Breakpoint>	-	The breakpoints to use
strategy?	UseBreakpointsStrategy	min-width	The strategy to use for matching

Returns

UseBreakpointsReturn<Breakpoint>

Type declaration

export type Breakpoints<Breakpoint extends string = string> = Record<Breakpoint, number>;

export type UseBreakpointsStrategy = 'desktop-first' | 'mobile-first';

export type UseBreakpointsReturn<Breakpoint extends string = string> = {
  /** The function that checks if the current breakpoint is greater than to the given breakpoint */
  greater: (breakpoint: Breakpoint) => boolean;
  /** The function that checks if the current breakpoint is greater than or equal to the given breakpoint */
  greaterOrEqual: (breakpoint: Breakpoint) => boolean;
  /** The function that checks if the current breakpoint is smaller than to the given breakpoint */
  smaller: (breakpoint: Breakpoint) => boolean;
  /** The function that checks if the current breakpoint is smaller than or equal to the given breakpoint */
  smallerOrEqual: (breakpoint: Breakpoint) => boolean;
  /** The function that checks if the current breakpoint is between to the given breakpoints */
  between: (a: Breakpoint, b: Breakpoint) => boolean;
  /** The function that checks if the current breakpoint is greater than to the given breakpoint */
  isGreater: (breakpoint: Breakpoint) => boolean;
  /** The function that checks if the current breakpoint is greater than or equal to the given breakpoint */
  isGreaterOrEqual: (breakpoint: Breakpoint) => boolean;
  /** The function that checks if the current breakpoint is smaller than to the given breakpoint */
  isSmaller: (breakpoint: Breakpoint) => boolean;
  /** The function that checks if the current breakpoint is smaller than or equal to the given breakpoint */
  isSmallerOrEqual: (breakpoint: Breakpoint) => boolean;
  /** The function that checks if the current breakpoint is between to the given breakpoints */
  isInBetween: (a: Breakpoint, b: Breakpoint) => boolean;
  /** The function that returns the current breakpoints */
  current: () => Breakpoint[];
  /** The function that returns the current active breakpoint */
  active: () => Breakpoint;
} & Record<Breakpoint, boolean>;

Source

Source • Demo

Contributors

D

debabin

B

babin