React Responsive Context
This is a simple React library for reacting to responsive events. It's super simple and only uses ~1kB gzipped Works for React Dom or React Native (see below for RN usage)
Basic Usage
Include the provider for giving the context
import {ResponsiveProvider} from "react-responsive-context";
ReactDOM.render(<ResponsiveProvider><App/></ResponsiveProvider>, document.getElementById('root'));Use it in your components
import {ResponsiveConsumer} from "react-responsive-context";
() =>
<ResponsiveConsumer>{
(status) =>
<div>
<Button
size={status.mobile ? "small" : "large"}>
Click me
</Button>
{status.desktop && <p>This only shows in Desktop</p>}
</div>
}</ResponsiveConsumer>React Native
For React native make sure to import ResponsiveConsumer and ResponsiveProvider from react-responsive-context/es/native instead of react-responsive-context.
import {ResponsiveProvider, ResponsiveConsumer} from "react-responsive-context/es/native";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 "react-responsive-context";
const sizes = {
small: [-Infinity, 500],
medium: [501, 1000],
large: [1001, +Infinity]
};
ReactDOM.render(<ResponsiveProvider sizes={sizes}><App/></ResponsiveProvider>, document.getElementById('root'));