Awesome

React Schematic

Build responsive react layouts using styled schematics without an overhead of any theme configuration

• React Schematic
• React Schematic - Docs

Install

npm i react-schematic

Usage

import {reactSchematic, breakpoints, Breakpoints} from 'react-schematic';

// Pass custom breakpoints as min-width
let custom: Breakpoints = {
  xs: 0,
  sm: 600,
  md: 900,
  lg: 1200,
  xl: 1536,
};

// Get responsive styled.div components
const {Container, Flex, FlexItem, Grid, GridItem} = reactSchematic(
  custom || breakpoints
);

Logs

v2.0.0

• added support for padding and margin