server-side-media-queries-for-react

Server side rendering media queries

Usage no npm install needed!

<script type="module">
  import serverSideMediaQueriesForReact from 'https://cdn.skypack.dev/server-side-media-queries-for-react';
</script>

README

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