develop

Responsive provider

Programmatic usage of media queries

Wanda provides a full and centrilized way to use media queries inside react templates by using the ResponsiveProvider.

Anatomy

import { ResponsiveProvider } from "@wonderflow/react-components";

export default () => (
  <ResponsiveProvider>
    <App />
  </ResponsiveProvider>
);

tsx

Usage

export const MyComponent = () => {
  const { matches, breakpoints } = useResponsiveContext();

  console.log(breakpoints)
  /** {
   *   extraSmall: 480,
   *   small: 768,
   *   medium: 960,
   *   large: 1280,
   *   extraLarge: 1600,
   * }
   */

  return (
    <Stack direction={matches.medium ? 'row' : 'column-reverse'}>
      <>A<>
      <>B<>
    </Stack>
)}

tsx

Try to resize the window.

extraSmall
small
medium
large
extraLarge