use-responsive-react

React hook for responsive design

Install

npm install --save use-responsive-react

yarn add use-responsive-react

Usage

import { useResponsive } from 'use-responsive-react'

const Example = () => {
    const { width, screenSize } = useResponsive

    return (
        <div>
            <h1>Render responsive</h1>
            // Get screenSize
            {screenSize === 'md'
                ? <MdComponent />
                : <LgComponent />
            }
            // Get Width
            {width < 800
                ? <MdComponent />
                : <LgComponent />
            }
        </div>
    )
}

Documentation

Props	Type	Desription
width	Int	Screen width
height	Int	Screen height
orientation	String	Screen orientation
screenSize	String	Largest screen size
screenSizes	Array	All screen sizes
defineBreakpoints	Func	Define your custom breakpoints
breakpoints	Shape	Defined breakpoints

Define your own breakpoints

import { useResponsive } from 'use-responsive-react'

const Example = () => {
    const { defineBreakpoints } = useResponsive
    
    defineBreakpoints({
        xs: 0,
        sm: 600,
        md: 960,
        lg: 1280,
        xl: 1920
    })
}

License

MIT © maximegouin