React-css-breakpoints NPM

React CSS Breakpoints

Component style breakpoints so that you won't have to create custom components to handle responsive design.

This package uses css as breakpoints for components instead of using media queries via react hooks. This is to avoid unnecessary re-renders of components and to avoid the milliseconds of delay when using media queries.

Basis

This package is based on the breakpoints of Tailwind CSS.

sm: 640px
md: 768px
lg: 1024px
xl: 1280px
2xl: 1536px

Note that this package doesn't use Tailwind's CSS declaration and contains its own media queries copies almost exactly from the tailwind css declarations.

Functions

export interface BreakpointProps extends PropsWithChildren<HTMLAttributes<HTMLDivElement>> {
  start?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '';
  end?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '';
  children?: React.ReactNode | React.ReactNode[];
}

Sample

Demo GIF

Import first the css of the module

// _app.tsx
import 'react-css-breakpoints/dist/index.css';

// index.tsx
import { Breakpoint } from 'react-css-breakpoints';

const app = () => {
  return (
    <div>
      <Breakpoint start="sm" end="sm">
        <p>Only on mobile</p>
      </Breakpoint>

      <Breakpoint start="md" end="md">
        <p>Only on tablet</p>
      </Breakpoint>

      <Breakpoint start="lg" end="lg">
        <p>Only on laptop</p>
      </Breakpoint>

      <Breakpoint start="xl" end="xl">
        <p>Only on desktop</p>
      </Breakpoint>

      <Breakpoint start="2xl" end="2xl">
        <p>Only on 2xl</p>
      </Breakpoint>

      <br />

      <Breakpoint start="sm">
        <p>On mobile and up</p>
      </Breakpoint>

      <Breakpoint start="md">
        <p>On tablet and up</p>
      </Breakpoint>

      <Breakpoint start="lg">
        <p>On laptop and up</p>
      </Breakpoint>

      <Breakpoint start="xl">
        <p>On desktop and up</p>
      </Breakpoint>

      <Breakpoint start="2xl">
        <p>On 2xl and up</p>
      </Breakpoint>
    </div>
  );
};