1.0.0 • Published 5 years ago
react-adaptive-layout v1.0.0
react-adaptive-layout
React component that helps to make adaptive layout.
Install
npm install react-adaptive-layout
or
yarn add react-adaptive-layout
Usage
This is basic example:
import Layout from 'react-adaptive-layout'
...
render(){
return(
<Layout>
{
({width}) => {
return width < 768
? <img
src="http://placekitten.com/g/300/300"
alt="Wanna some small kitty"/>
: <img
src="http://placekitten.com/g/800/600"
alt="Wanna some big kitty"/>
}
}
</Layout>
)
}
You can provide a prop shouldRender
and use it as common component:
<Layout shouldRender={ window.innerWidth > 1280.991 }>
<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 |
Layout.breakpoints.sm => 576
Layout.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.inRange(1280, 'sm', 1024) => true
Layout.setBreakPoint(point)
Add or update breakpoints.
Param | Type | Description |
---|---|---|
point | Object | Object to merge with break points. |
Example
Layout.setBreakPoint({custom: 320, sm: 480})
Layout.isMobile(), Layout.isTablet(), Layout.isDesktop()
Checking screen width.
Layout.isMobile() => true
Layout.isTablet() => false
License
MIT © Dmitriy Dymarchyk
1.0.0
5 years ago