React device sizes

React Device Sizes is a React library that provides hooks to easily determine the current device size or create custom breakpoints for responsive designs.

Installation

You can install React Device Sizes via npm or yarn:

1$ npm install react-device-sizes --save

or

1$ yarn add react-device-sizes

Usage

React Device Sizes provides two main hooks: useDeviceSize and useMediaQuery. You can choose between predefined breakpoints or create custom breakpoints based on your specific design requirements.

UseDeviceSize

The useDeviceSize hook provides predefined breakpoints that you can utilize in your components.

1import React from 'react'
2import { useDeviceSize } from 'react-device-sizes'
3
4const MyCompontent = () => {
5  const deviceSizes = useDeviceSize()
6
7  const {
8    xsDown, //(max-width: 575.98px)
9    onlyXs, //(min-width: 576px) and (max-width: 767.98px)
10    xsUp,   //(min-width: 576px)
11    smDown, //(max-width: 767.98px)
12    onlySm, //(min-width: 768px) and (max-width: 991.98px)
13    smUp,   //(min-width: 768px)
14    mdDown, //(max-width: 991.98px)
15    onlyMd, //(min-width: 992px) and (max-width: 1199.98px)
16    mdUp,   //(min-width: 992px)
17    lgDown, //(max-width: 1199.98px)
18    lgUp    //(min-width: 1200px)
19  } = deviceSizes;
20
21  return (
22    <div>
23      <h1>Device Test!</h1>
24      {xsDown && <p>You are an XsDown device</p>}
25      {onlyXs && <p>You have an OnlyXs device</p>}
26      {/* ... */}
27    </div>
28  )
29}

UseMediaQuery

The useMediaQuery hook allows you to create your own custom breakpoints by specifying the desired screen dimensions.

1import React from 'react'
2import { useMediaQuery } from 'react-device-sizes'
3
4const MyComponent = () => {
5  const isMobileDevice = useMediaQuery({ maxWidth: 767 })
6  const isTablet = useMediaQuery({ minWidth: 768, maxWidth: 1023 })
7  const isLaptops = useMediaQuery({ minWidth: 1224 })
8  const is900 = useMediaQuery({ width: 900 })
9  const sizeWithQuery = useMediaQuery({ query: '(min-width: 576px) and (max-width: 767.98px)' })
10
11  return <div>...</div>
12}

Contributing

Contributions are welcome! If you encounter any issues or have suggestions for improvements, please open an issue or submit a pull request on the GitHub repository.

License

React Device Sizes is released under the MIT License. Please review the license file for more information.