Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including use-breakpoints-width with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. var useBreakpointsWidth = require("use-breakpoints-width")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

use-breakpoints-width v1.0.8

React hook that shows the current breakpoint name and screen width.

use-breakpoints-width

A React hook for getting the current breakpoint name and screen width.

Usage

Initialize use-breakpoints-width with a configuration object. The return value will be an object with the breakpoint's name (string) and screen width (number).

import useBreakpoints from 'use-breakpoints-width';

export default function App() {
  const { breakpoint, width } = useBreakpoints({ 
    breakpoints: {
      desktop: 1200,
      tablet: 768,
      mobile: 0
    },
    debounceDelay: 250
   });

  return (
    <div>
      {`Breakpoint name is ${breakpoint}. Screen width is ${width}px`}
    </div>
  );
}

Default settings will apply in case you will provide no configuration

{ 
  breakpoints: {
    desktop: 992,
    tablet: 768,
    mobile: 0
  },
  debounceDelay: 250
}

Settings

Breakpoints

You can configure custom breakpoints by providing an object as the parameter.

const { breakpoint } = useBreakpoints({ 
  breakpoints: {
    desktop: 1200,
    tablet: 768,
    mobile: 0
  }
});

More examples for breakpoint names.

const { breakpoint } = useBreakpoints({ 
  breakpoints: {
    xxlarge: 1440,
    xlarge: 1200,
    large: 1024,
    medium: 640,
    small: 0,
  }
});
const { breakpoint } = useBreakpoints({ 
  breakpoints: {
    'big-screen': 1440,
    'small screen': 768,
    'mobile_screen': 640,
  }
});

Debounce delay time

This custom hook uses debounce due to optimization purposes. You can change the delay time to meet your requirements. Provide a new value as the debounceDelay property value. Number in milliseconds (default 250ms).

...
const { breakpoint, width } = useBreakpoints({ 
  breakpoints: {
    desktop: 1200,
    tablet: 768,
    mobile: 0
  },
  debounceDelay: 500
});

It's possible to left it undefined so default value will apply (default 250ms).

...
const { breakpoint, width } = useBreakpoints({ 
  breakpoints: {
    desktop: 1200,
    tablet: 768,
    mobile: 0
  }
}); // debounceDelay is 250 ms now

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free