Neurophysiologically Pseudoscientific Manatee

    react-grid

    4.0.4 • Public • Published

    react-grid

    npm npm Build Status codecov styled with prettier

    React grid component

    Installation

    npm install react-grid --save
    yarn add react-grid

    Demo

    https://swiftcarrot.dev/react-grid

    Basic Usage

    import React from 'react';
    import { Container, Row, Col } from 'react-grid';
     
    function App() {
      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
    import {
      Container as ReactContainer,
      Row as ReactRow,
      Col as ReactCol
    } from 'react-grid';
     
    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
    };
     
    export const Container = props => <ReactContainer {...props} styles={styles} />;
    export const Row = props => <ReactRow {...props} styles={styles} />;
    export const Col = props => <ReactCol {...props} styles={styles} />;
     
    // app.js
    import { Container, Row, Col } from './grid';
     
    const App = () => (
      <Container>
        <Row>
          <Col />
          <Col />
        </Row>
      </Container>
    );

    breakpoints

    react-grid implments breakpoint functions similar to bootstrap grid:

    • mediaBreakpointUp
    • mediaBreakpointDown
    • mediaBreakpointBetween
    • mediaBreakpointOnly
    /** @jsx jsx */
    import { jsx, css } from '@emotion/core';
    import { mediaBreakpointUp } from 'react-grid';
     
    const App = () => (
      <div
        css={css`
          ${mediaBreakpointUp('sm')} {
            font-size: 12px;
          }
        `}
      />
    );
     
    // or
     
    const App = () => (
      <div
        css={{
          [mediaBreakpointUp('sm')]: {
            fontSize: 12
          }
        }}
      />
    );

    License

    MIT

    Install

    npm i react-grid

    DownloadsWeekly Downloads

    791

    Version

    4.0.4

    License

    MIT

    Unpacked Size

    25.6 kB

    Total Files

    6

    Last publish

    Collaborators

    • adjusted
    • svenanders