- π 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.
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.
Props:
- Media queries to match, the given prop name will be passed into the render prop function, for example:
sm="(max-width: 479px)"
. render
orchildren
: 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>
)
};
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="(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 π» π‘ π€ π |
---|