use-responsive-react v1.0.1

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

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