Wondering what’s next for npm?Check out our public roadmap! »

    use-window-width-breakpoints
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.10 • Public • Published

    useWindowWidthBreakpoints

    npm version npm peer dependency version npm bundle size License: Apache-2.0 Contributor Covenant

    A React hook for using window width breakpoints.

    I essentially wanted to duplicate the logic of Bootstrap's media-breakpoint Sass mixins within my React code.

    Installation

    npm install use-window-width-breakpoints
    # OR
    yarn add use-window-width-breakpoints

    Usage

    After importing the hook...

    import useWindowWidthBreakpoints from "use-window-width-breakpoints";

    ...call it from the top level of your React function.

    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 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

    {
      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. Thow this into your JSX:

    {breakpoint.md && <MyComponent />}
    {/* OR */}
    {breakpoint.only.md && <MyComponent />}

    Or maybe you want to use one component on larger screens and a different one on smaller screens:

    {breakpoint.up.lg ? <LargerVersion /> : <SmallerVersion />}

    Or maybe you want to describe the size of the window in paragraph form with an odd sort of precision:

    <p>
      This window is {breakpoint.between.sm.lg ? "" : "pretty "}
      {breakpoint.down.sm ? "small" : breakpoint.up.lg ? "big" : "average"}.
    </p>

    But that's up to you.

    Have fun!

    Contributing

    If you'd like to contribute to this project (which would be awesome), here's how to set it up:

    1. Fork this repository to your own GitHub account.

    2. Clone it to your device.

      git clone https://github.com/YOUR_USERNAME/use-window-width-breakpoints.git
    3. Add this repository as a remote, so you can pull upstream changes in the future with git pull upstream master.

      cd use-window-width-breakpoints
      git remote add upstream https://github.com/tywmick/use-window-width-breakpoints.git
    4. Install dependencies.

      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), and run the test suite with npm run test.

    After building the package, you can test it in another project on your machine by adding the local path as a dependency (e.g., by running npm install /path/to/local/use-window-width-breakpoints in that other project).

    Install

    npm i use-window-width-breakpoints

    DownloadsWeekly Downloads

    24

    Version

    1.0.10

    License

    Apache-2.0

    Unpacked Size

    67.6 kB

    Total Files

    12

    Last publish

    Collaborators

    • avatar