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