React CSS media queries with breakpoint render props Component and Provider. 🔫
MIT License
React CSS media queries with breakpoint render props Component and Provider.
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.
With npm:
npm install react-point-break
With yarn:
yarn add react-point-break
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:
sm="(max-width: 479px)"
.render
or children
: a function that will be called with the given prop names as boolean values for the queriesNote 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:
Breakpoint
sm="(max-width: 479px)"
.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>
)
};
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>
)
};
Matt Phillips💻 💡 🤔 🚇 ⚠️ |
---|