use-responsive-react

React hook for responsive design

Try the demo

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