gatsby-plugin-breakpoints

Gatsby plugin providing breakpoints using React Hooks

Install

npm i gatsby-plugin-breakpoints

or

yarn add gatsby-plugin-breakpoints

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

``javascript
/ gatsby-config.js /

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

Usage

$3

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 |

`javascript
/ yourFunctionalComponentOrPage.js /

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

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

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

return (

{/ Anything /}

{/ will only be displayed if max-width <= 320px /}
{breakpoints.xs ? : null}

);
};

export default MyComponent;
`

$3

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 |

`javascript
/ yourClassComponent.js /

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

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

class Test extends React.Component {
render() {
const { breakpoints } = this.props;
{
/ will only be displayed if max-width <= 320px /
}
return breakpoints.xs ? (

) : (


export default withBreakpoints(Test);
`

Options

You can set your own queries like this :

`javascript
// 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,
},
},
],
}
`

$3

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

$3

If you need to import for testing you can do it like so :

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

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

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

Contributing

Contributions are welcome ! See contributing guidelines

License

MIT

Copyright (c) 2019 Jimmy Beldone