0.1.2 • Published 4 years ago
mui-use-responsive v0.1.2
mui-use-responsive
A react hook to make your react app responsive
Install
$ npm install react-use-responsive
Usage
import useResponsive, { responsive } from 'react-use-responsive'
const useStyles = makeStyles(theme => (responsive({
root: {
fontSize: responsive(24),
height: 250,
margin: "10px 5px",
},
})))
const ResponsiveHeading = ({ className, ...props }) => {
const scale = useResponsive(1920, [600, 960, 1280, 1600, 1920])
const classes = useStyles({scale: scale})
return <Typography className={clsx(className, classes.root)} { ...props } />
}
API
default function ( mainWidth = 1920, breakpoints = 600, 960, 1280, 1600, 1920 )
mainWidth
Type: integer
The main full width value in pixel which is used in design.
options
Type: array of integers
Breakpoint values in pixel.
responsive( value1, ..., unit='px' )
value
Type: integer || object
unit
Type: string