useBreakpoints

Custom react hooks

📺 Live Demo

🔧 Installation

npm i -S use-breakpoints

📗 How to use

Note! Use only in functional component. See rule

Use default:

import React from 'react'
import useBreakpoints from 'use-breakpoints'

export default function Component() {
  const breakpoints = useBreakpoints()

  return <div>screen: {breakpoints.screen}</div>
}

Customization:

import React from 'react'
import useBreakpoints from 'use-breakpoints'

export default function Component() {
  const test = {
    extraSmall:	{
      min: 0,
      max: 600
    },
    small: {
      min: 601,
      max: 960
    },
    large: {
      min: 961,
      max: 1280
    },
    extraLarge: {
      min: 1281,
      max: null
    },
  }

  const breakpoints = useBreakpoints(test)

  return <div>screen: {breakpoints.screen}</div>
}