https://github.com/umeshmk/react-schematic

Build responsive react layouts using styled schematics without an overhead of any theme configuration
https://github.com/umeshmk/react-schematic

css flexbox grid react styled-components typescript

Last synced: 21 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/umeshmk/react-schematic
• Owner: umeshmk
• License: mit
• Created: 2021-11-12T07:10:25.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2021-11-18T07:23:01.000Z (about 3 years ago)
• Last Synced: 2024-11-17T07:00:19.487Z (26 days ago)
• Topics: css, flexbox, grid, react, styled-components, typescript
• Language: TypeScript
• Homepage: https://umeshmk.github.io/react-schematic/
• Size: 362 KB
• Stars: 7
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: Readme.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-components - react-schematic - [demo](https://umeshmk.github.io/react-schematic) - Build responsive layouts using styled schematics without an overhead of any theme configuration (UI Layout / Form Components)
• awesome-react-components - react-schematic - [demo](https://umeshmk.github.io/react-schematic) - Build responsive layouts using styled schematics without an overhead of any theme configuration (UI Layout / Form Components)
• fucking-awesome-react-components - react-schematic - 🌎 [demo](umeshmk.github.io/react-schematic) - Build responsive layouts using styled schematics without an overhead of any theme configuration (UI Layout / Form Components)

README

        
# React Schematic

![](https://i.imgur.com/WObtHQO.png)

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

- [React Schematic](https://umeshmk.github.io/react-schematic/)

- [React Schematic - Docs](https://umeshmk.github.io/react-schematic/docs)

### Install

```sh

npm i react-schematic

```

### Usage

```tsx

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