This is react custom hook library for web action like scroll lock, to use media query.

The goal for this project is to make custom hook which is useful to deal with ui action. When I develop some web ui, there is some problem which to make some component. For example, The component which need to change based on media query have got on my nerves.

I hope this project is useful for solving that kind of problem.

API

| API | Result | Parameter | Description | | -------------------------------- | ------------------ | ----------------------------------------------- | ----------------------------------------- | | useMediaQuery(config, initial) | [mediaType, error] | config : { key : string }, initial : string | get Media Query from config. | | useScrollLock(on) | void | on : boolean | scrollLock when some component is visible |

Example

There is some example code with Typescript. If you want to use Javascript, you can replace enum to object.

useMediaQuery

enum DEVICE {
  DESKTOP = "DESKTOP",
  TABLET = "TABLET",
  MOBILE = "MOBILE"
}
...
const Component : React.FC<IProps> => {
  const [currentDevice] = useMediaQuery({
    [DEVICE.DESKTOP] : "1240px",
    [DEVICE.TABLET] : "768px",
    [DEVICE.MOBILE] : "425px"
  },DEVICE.MOBILE)
  
  return(
    currentDevice === DEVICE.DESKTOP ? <DesktopComponent/> :
    currentDevice === DEVICE.TABLET ? <TabletComponent/> :
    currentDevice === DEVICE.MOBILE ? <MobileComponent/> :
    <DefaultComponent/>
  )
}