Gatsby plugin providing breakpoints using React Hooks
npm install gatsby-plugin-breakpointsnpm 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'],
};
`
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 /}
{/
{breakpoints.xs ?
);
};
export default MyComponent;
`
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;
{
/
}
return breakpoints.xs ? (
) : (
export default withBreakpoints(Test);
`
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,
},
},
],
}
`
`javascript`
const defaultQueries = {
xs: '(max-width: 320px)',
sm: '(max-width: 720px)',
md: '(max-width: 1024px)',
l: '(max-width: 1536px)',
};
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';
Contributions are welcome ! See contributing guidelines
MIT
Copyright (c) 2019 Jimmy Beldone