React Responsive

A simple React library to react to responsive events using the new context api.

Installation

With NPM:
npm i --save @dvaji/react-responsive

With Yarn:
yarn add @dvaji/react-responsive

Example

Include the provider for giving the context

import { ResponsiveProvider } from '@dvaji/react-responsive'

ReactDOM.render(
  <ResponsiveProvider>
    <App />
  </ResponsiveProvider>,
  document.getElementById('root')
)

Use the consumer in your components

import { ResponsiveConsumer } from '@dvaji/react-responsive'
;() => (
  <ResponsiveConsumer>
    {status => (
      <div>
        {status.desktop && <p>This only shows in Desktop</p>}
        <Button size={status.mobile ? 'small' : 'large'}>Click me</Button>
      </div>
    )}
  </ResponsiveConsumer>
)

Default sizes and configuration

Default sizes:

• mobile: up to 767px
• tablet: from 768px to 1023px
• desktop: from 1024px

you can set any ranges you want like this

import { ResponsiveProvider } from '@dvaji/react-responsive'

// An object with your custom ranges
const sizes = {
  small: [-Infinity, 500],
  medium: [501, 1000],
  large: [1001, +Infinity]
}

ReactDOM.render(
  <ResponsiveProvider sizes={sizes}>
    <App />
  </ResponsiveProvider>,
  document.getElementById('root')
)