Community Plugin

gatsby-plugin-breakpoints

Gatsby plugin providing breakpoints using React Hooks

Install

npm i gatsby-plugin-breakpoints

yarn add gatsby-plugin-breakpoints

Include the plugin in your gatsby-config.js file :

/* gatsby-config.js */

module.exports = {
    plugins: ['gatsby-plugin-breakpoints'],
};

Usage

Functional Components

Import the useBreakpoint hook anywhere in your app.

This hook provides four default breakpoints as boolean :

name	breakpoints
xs	max-width: 320px
sm	max-width: 720px
md	max-width: 1024px
l	max-width: 1536px

/* yourFunctionalComponentOrPage.js */

import { useBreakpoint } from 'gatsby-plugin-breakpoints';

import MobileOnlyComponent from './your/component/path';
// ...

const MyComponent = () => {
    const breakpoints = useBreakpoint();

    return (
        <AnyComponent>
            {/* Anything */}

            {/* <MobileOnlyComponent /> will only be displayed if max-width <= 320px  */}
            {breakpoints.xs ? <MobileOnlyComponent /> : null}
        </AnyComponent>
    );
};

export default MyComponent;

Class Components

Import the withBreakpoints Higher Order Component anywhere in your app.

This HOC adds a breakpoints props to your component, providing four default breakpoints as boolean :

name	breakpoints
xs	max-width: 320px
sm	max-width: 720px
md	max-width: 1024px
l	max-width: 1536px

/* yourClassComponent.js */

import { withBreakpoints } from 'gatsby-plugin-breakpoints';

import MobileOnlyComponent from './your/component/path';
// ...

class Test extends React.Component {
    render() {
        const { breakpoints } = this.props;
        {
            /* <MobileOnlyComponent /> will only be displayed if max-width <= 320px  */
        }
        return breakpoints.xs ? (
            <MobileOnlyComponent />
        ) : (
            <div>Content hidden only on mobile</div>
        );
    }
}

export default withBreakpoints(Test);

Options

You can set your own queries like this :

// in gatsby-config.js

const myCustomQueries = {
    xs: '(max-width: 320px)',
    sm: '(max-width: 720px)',
    md: '(max-width: 1024px)',
    l: '(max-width: 1536px)',
    xl: ...,
    portrait: '(orientation: portrait)',
};

module.exports = {
    plugins: [
        {
            resolve: "gatsby-plugin-breakpoints",
            options: {
                queries: myCustomQueries,
            },
        },
    ],
}

Default values

const defaultQueries = {
    xs: '(max-width: 320px)',
    sm: '(max-width: 720px)',
    md: '(max-width: 1024px)',
    l: '(max-width: 1536px)',
};

Note (only for test)

If you need to import <BreakpointProvider /> for testing you can do it like so :

import { BreakpointProvider } from 'gatsby-plugin-breakpoints';

In case you need full context, you can import it too :

import { BreakpointContext } from 'gatsby-plugin-breakpoints';

Contributing

Contributions are welcome ! See contributing guidelines

License

MIT