react-adaptive-layout
React component that helps to make adaptive layout.
Install
npm install react-adaptive-layoutor
yarn add react-adaptive-layoutUsage
This is basic example:
import Layout from 'react-adaptive-layout'...{ return <Layout> width return width < 768 ? <img ="http://placekitten.com/g/300/300" ="Wanna some small kitty"/> : <img ="http://placekitten.com/g/800/600" ="Wanna some big kitty"/> </Layout> }You can provide a prop shouldRender and use it as common component:
<Layout => <p> Welcome PC user =) </p></Layout>Static methods.
Here are some helper methods and constants.
Layout.breakpoints
Default breakpoints.
| Name | Width |
|---|---|
| xs | 480 |
| sm | 576 |
| md | 990 |
| lg | 1024 |
| xl | 1280 |
| xxl | 1920 |
Layoutbreakpointssm 576Layout.inRange(value, start, end) => boolean
Check if value between start and end.
| Param | Type | Description |
|---|---|---|
| value | number |
|
| start | string | number |
One of Layout.breakpoints key or a number |
| end | string | number |
One of Layout.breakpoints key or a number |
Example
Layout trueLayout.setBreakPoint(point)
Add or update breakpoints.
| Param | Type | Description |
|---|---|---|
| point | Object |
Object to merge with break points. |
Example
LayoutLayout.isMobile(), Layout.isTablet(), Layout.isDesktop()
Checking screen width.
Layout trueLayout falseLicense
MIT © Dmitriy Dymarchyk