Responsive provider

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

Anatomy

import { ResponsiveProvider } from "@lualtek/react-components";
 
export default () => (
  <ResponsiveProvider>
    <App />
  </ResponsiveProvider>
);

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>
)}

Try to resize the window.

extraSmall
small
medium
large
extraLarge

Polymorphic Toast Provider