Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/TyMick/use-window-width-breakpoints
A React hook for using window width breakpoints.
https://github.com/TyMick/use-window-width-breakpoints
breakpoints hacktoberfest hook hooks javascript media-breakpoints media-queries npm package react responsive responsive-design screen-size screen-width typescript
Last synced: 3 months ago
JSON representation
A React hook for using window width breakpoints.
- Host: GitHub
- URL: https://github.com/TyMick/use-window-width-breakpoints
- Owner: TyMick
- License: apache-2.0
- Created: 2020-03-05T18:36:38.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T04:45:19.000Z (over 1 year ago)
- Last Synced: 2024-04-11T03:06:04.873Z (3 months ago)
- Topics: breakpoints, hacktoberfest, hook, hooks, javascript, media-breakpoints, media-queries, npm, package, react, responsive, responsive-design, screen-size, screen-width, typescript
- Language: TypeScript
- Homepage: https://npm.im/use-window-width-breakpoints
- Size: 966 KB
- Stars: 7
- Watchers: 2
- Forks: 0
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Lists
- awesome-react-hooks - `useWindowWidthBreakpoints` - inspired) window width breakpoints (Packages)
README
# useWindowWidthBreakpoints
[](https://www.npmjs.com/package/use-window-width-breakpoints "View this package on npm")
[](https://www.npmjs.com/package/use-window-width-breakpoints "View this package on npm")
[](https://bundlephobia.com/result?p=use-window-width-breakpoints "View this package on BundlePhobia")
[](/LICENSE)
[](/CODE_OF_CONDUCT.md)
- **[Installation](#installation)**
- **[Usage](#usage)**
- **[Contributing](#contributing)**
- **[Related projects](#related-projects)**
A React hook for using window width breakpoints.
I essentially wanted to duplicate the logic of [Bootstrap's `media-breakpoint` Sass mixins](https://getbootstrap.com/docs/4.5/layout/overview/#responsive-breakpoints) within my React code.
Installation
```sh
npm install use-window-width-breakpoints
# OR
yarn add use-window-width-breakpoints
```
Usage
After importing the hook...
```js
import useWindowWidthBreakpoints from "use-window-width-breakpoints";
```
...call it from the top level of your React function.
```js
const breakpoint = useWindowWidthBreakpoints({
xs: 0,
sm: 576,
md: 768,
lg: 992,
xl: 1200,
});
```
The hook has one optional parameter: an object containing the set of window width breakpoints (in pixels) you wish to use. If this parameter is omitted, [Bootstrap's default breakpoints](https://getbootstrap.com/docs/4.5/layout/overview/#containers) will be used. If you choose to specify your own set of breakpoints, `sm` and `lg` breakpoints are required, while `xs`, `md`, and `xl` breakpoints are optional.
This hook returns an object containing the boolean results of several media queries. For example, if the width of the window is `800px`, the value of `breakpoint` (as defined above) will be
```js
{
xs: false,
sm: false,
md: true,
lg: false,
xl: false,
only: {
xs: false,
sm: false,
md: true,
lg: false,
xl: false,
},
up: {
xs: true,
sm: true,
md: true,
lg: false,
xl: false,
},
down: {
xs: false,
sm: false,
md: true,
lg: true,
xl: true,
},
between: {
xs: {
sm: false,
md: true,
lg: true,
xl: true,
},
sm: {
md: true,
lg: true,
xl: true,
},
md: {
lg: true,
xl: true,
},
lg: {
xl: false,
},
},
}
```
What's that good for? Say you have a React component you only want to display on `md`-sized screens. Throw this into your JSX:
```jsx
{breakpoint.md && }
{/* OR */}
{breakpoint.only.md && }
```
Or maybe you want to use one component on larger screens and a different one on smaller screens:
```jsx
{breakpoint.up.lg ? : }
```
Or maybe you want to describe the size of the window in paragraph form with an odd sort of precision:
```jsx
This window is {breakpoint.between.sm.lg ? "" : "pretty "}
{breakpoint.down.sm ? "small" : breakpoint.up.lg ? "big" : "average"}.
```
But that's up to you.
Have fun!
Contributing
If you'd like to contribute to this project (which would be awesome), the easiest way to set it up would be to install the [GitHub CLI](https://cli.github.com/) and then run the following:
```sh
gh repo fork tywmick/use-window-width-breakpoints --clone=true
cd use-window-width-breakpoints
npm install
```
Now, you can build the package with `npm run build`, build _and_ watch for changes with `npm run dev` (automatically rebuilding on each change in the source), run the test suite with `npm run test`, and create pull requests with [`gh pr create`](https://cli.github.com/manual/gh_pr_create).
After building the package, you can test it in another project on your machine by [adding the local path](https://docs.npmjs.com/files/package.json#local-paths) as a dependency (e.g., by running `npm install /path/to/local/use-window-width-breakpoints` in that other project).
Related projects
- [useWindowOrientation](https://github.com/tywmick/use-window-orientation)