A react hooks approach to responsive layout
npm install react-hooks-responsiveA react hooks approach to responsive layout.
```
yarn add react-hooks-responsive
or
``
npm install react-hooks-responsive
`tsx
import React from 'react'
import { useResponsive } from 'react-hooks-responsive'
// smallest breakpoint must be 0
// any number of breakpoints with any names can be given
const breakpoints = { xs: 0, sm: 480, md: 1024 }
const App: React.StatelessComponent = () => {
const { size, orientation, screenIsAtLeast, screenIsAtMost } = useResponsive(breakpoints)
return (
The screen is currently {size} in {orientation}.{' '}
is the screen at least sm? {screenIsAtLeast('sm') ? 'yes' : 'no'}.
is the screen at most sm and portrait? {screenIsAtMost('sm', 'portrait') ? 'yes' : 'no'}.
export default App
``