react-grid
React grid component
Installation
npm install react-grid --saveyarn add react-grid
Demo
https://swiftcarrot.dev/react-grid
Basic Usage
;; { return <Container> <Row> <Col /> <Col /> </Row> </Container> ;}
API
bootstrap css class | component |
---|---|
.container | <Container/> |
.container-fluid | <Container fluid/> |
.row | <Row /> |
.row.no-gutters | <Row noGutters /> |
.col | <Col/> (<Col xs />) |
.col-sm | <Col sm /> |
.col-md-auto | <Col md="auto" /> |
.col-6 | <Col xs={6} /> |
.col-md-6 | <Col md={6} /> |
.col.order-12 | <Col order={{xs:12}} /> |
.col-md-4.offset-md-4 | <Col md={4} order={{md:4}} /> |
Container
<Container /><Container fluid/>
Row
<Row />
Col
<Col /><Col xs=1/><Col offset= xs: 1 /><Col order= xs: 1 /><Col order= xs: 'first' md: 'last' />
Customize
with props
// grid.js; const styles = breakpoints: xs: 0 sm: 576 md: 768 lg: 992 xl: 1200 containerMaxWidths: sm: 540 md: 720 lg: 960 xl: 1140 columns: 12 gutterWidth: 30; const Container = <ReactContainer ...props styles=styles />;const Row = <ReactRow ...props styles=styles />;const Col = <ReactCol ...props styles=styles />; // app.js; const App = <Container> <Row> <Col /> <Col /> </Row> </Container>;
breakpoints
react-grid implments breakpoint functions similar to bootstrap grid:
- mediaBreakpointUp
- mediaBreakpointDown
- mediaBreakpointBetween
- mediaBreakpointOnly
/** @jsx jsx */;; const App = <div css=css` { font-size: 12px; } ` />; // or const App = <div css= : fontSize: 12 />;
License
MIT