react-point-break

    1.0.2 • Public • Published

    react-point-break

    React CSS media queries with breakpoint render props Component and Provider.

    point-break-gif

    This is a small view

    Build Status Code Coverage version downloads MIT License PRs Welcome Roadmap Examples

    • 🌓 css media queries
    • 🎉 render props
    • 🎁 connected via react context
    • ❤️ small API
    • ⭐️ server side rendering

    react-point-break gives you a <Breakpoint> component and an optional <BreakpointProvider> used to listen to CSS media queries and render the matching query using render props.

    Demo

    Installation

    With npm:

    npm install react-point-break

    With yarn:

    yarn add react-point-break

    Usage

    react-point-break can be used on its own or with a provider to give your app access to the queries anywhere in the tree.

    Breakpoint

    Props:

    • Media queries to match, the given prop name will be passed into the render prop function, for example: sm="".
    • render or children: a function that will be called with the given prop names as boolean values for the queries that matches.

    Note you can supply the render prop function using render or via children but not both.

    import { Breakpoint } from 'react-point-break';
     
    const App = () => {
      return (
        <Breakpoint
          sm="(max-width: 479px)"
          md="(min-width: 480px) and (max-width: 767px)"
          lg="(min-width: 768px)"
        >
          {({ sm, md, lg }) => {
            if (sm) {
              return <h1>This is a small view</h1>;
            }
            if (md) {
              return <h1>This is a medium view</h1>;
            }
            if (lg) {
              return <h1>This is a large view</h1>;
            }
            return <h1>Default view</h1>;
          }}
        </Breakpoint>
      )
    };

    BreakpointProvider

    Props:

    • Media queries to match, the given prop name will be passed into the render prop function of any child Breakpoint components, for example: sm="".
    • children to be rendered.
    import { Breakpoint, BreakpointProvider } from 'react-point-break';
     
    const App = () => {
      return (
        <BreakpointProvider
          sm="(max-width: 479px)"
          md="(min-width: 480px) and (max-width: 767px)"
          lg="(min-width: 768px)"
        >
          <Header />
          <Main>
            <Breakpoint>
              {({ sm, md, lg }) => {
                if (sm) {
                  return <h1>This is a small view</h1>;
                }
                if (md) {
                  return <h1>This is a medium view</h1>;
                }
                if (lg) {
                  return <h1>This is a large view</h1>;
                }
                return <h1>Default view</h1>;
              }}
            </Breakpoint>
          </Main>
          <Footer />
        </BreakpointProvider>
      )
    };

    Additional queries and overriding

    Any queries supplied to the Breakpoint component will be passed down into the render prop function with the queries defined in the BreakpointProvider. If the additional queries share the same prop name as defined in the provider then they will override the matching provider query.

    import { Breakpoint, BreakpointProvider } from 'react-point-break';
     
    const App = () => {
      return (
        <BreakpointProvider
          sm="(max-width: 479px)"
          md="(min-width: 480px) and (max-width: 767px)"
          lg="(min-width: 768px)"
        >
          <Header />
          <Main>
            <Breakpoint
              lg="(min-width: 768px) and (max-width: 1023px)"
              xl="(min-width: 1024px)"
            >
              {({ sm, md, lg, xl }) => {
                if (sm) {
                  return <h1>This is a small view</h1>;
                }
                if (md) {
                  return <h1>This is a medium view</h1>;
                }
                if (lg) {
                  return <h1>This is a large view</h1>;
                }
                if (xl) {
                  return <h1>This is an extra large view</h1>;
                }
                return <h1>Default view</h1>;
              }}
            </Breakpoint>
          </Main>
          <Footer />
        </BreakpointProvider>
      )
    };

    Other solutions

    Contributors


    Matt Phillips

    💻 💡 🤔 🚇 ⚠️

    LICENSE

    MIT

    Install

    npm i react-point-break

    DownloadsWeekly Downloads

    3

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    479 kB

    Total Files

    35

    Last publish

    Collaborators

    • mattphillips