server-side-media-queries-for-react
Server side rendering media queries
Downloads
34
Stars
9
Ecosystems:
JavaScript
Media queries that work everywhere:
- with server side rendering
- with SSR and JS disabled on the browser
- without SSR
Usage
import { Swap } from "server-side-media-queries-for-react";
export default function App() {
return (
<Swap
match={[
["(min-width: 800px)", <DesktopApp />],
["(min-width: 600px)", <TabletApp />],
["default", <MobileApp />],
]}
/>
);
}
function DesktopApp() {
return <h1>Desktop App</h1>;
}
function TabletApp() {
return <h1>Tablet App</h1>;
}
function MobileApp() {
return <h1>Mobile App</h1>;
}
Related
License
MIT
Package Rankings
Top 12.49% on Npmjs.org