umeshmk / react-schematic

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

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