Naturally Pacifist Marsupials
    Wondering what’s next for npm?Check out our public roadmap! »

    react-configurable-grid

    2.2.2 • Public • Published

    React Configurable Grid

    npm GitHub tag

    A simple configurable grid for react inspired on grid-styled and react-bootstrap API, but, with open settings.

    1.08 kB only

    Usage

    React Configurable Grid is as simple as using bootstrap grid-system, where you have rows, cols and container classes to wrap components and align as you please, removing alignment and size adustment from their responsability.

    Install

    npm install react-configurable-grid --save

    Basics

    import React from 'react';
    import { Row, Col } from 'react-configurable-grid';
     
    function MyComponent() {
        return (
            <section>
                <h1>My component</h1>
                <Row>
                    <Col xs={6} md={3} lg={2}>content 1</Col>
                    <Col xs={6} md={9} lg={10}>content 2</Col>
                <Row>
            </section>
        );
    }
     
    export default MyComponent;
     

    Custom configuration

    To use custom breakpoints or custom gutter, just execute configureGrid with config params before your App is mounted;

    import React from 'react';
    import configureGrid, { Row, Col } from 'react-configurable-grid';
    import OtherComponent from './OtherComponent';
     
    configureGrid({
        // xs media query will use default value
        sm: "576px",
        md: null, // this media query will not be rendered
        lg: "992px",
        xl: null, // this media query will not be rendered
        gutter: "30px"
    });
     
    function App() {
        return (
            <section>
                <h1>My component</h1>
                <Row>
                    <Col lg={2}>content 1</Col>
                    <Col lg={10}>content 2</Col>
                <Row>
                <OtherComponent />
            </section>
        );
    }
     
    export default App;
     

    Server-Side Rendering

    With express server

    // server.js
    ...
    import React from "react";
    import { renderToString } from "react-dom/server";
    import App from "../components/App";
    ...
     
    /*
      first param - Configuration object
      second param - If true returns <style type="text/css" data-grid>grid css</style> tag, else, returns grid css only
    */
    const gridStyles = configureGrid({
        gutter: "40px"
    }, true);
     
    export default () => (req, res) => {
      const componentString = renderToString(<App />);
     
      const generatedHTML = `
        <!DOCTYPE html>
        <html>
        <head>
            <meta charset="UTF-8">
            ${gridStyles}
        </head>
        <body>
            <div id="root">${componentString}</div>
        </body>
        </html>
      `;
     
      
      res.send(generatedHTML);
    }
     

    With NextJS

    // pages/_document.js
    ...
    import Document, { Head, Main, NextScript } from "next/document";
    import flush from "styled-jsx/server";
    import { configureGrid } from 'react-configurable-grid';
    ...
     
    /*
      You can pass no arguments if you what to use default config, and return only css code
    */
    const gridStyles = configureGrid();
     
    export default class MyDocument extends Document {
      static getInitialProps({ renderPage }) {
        const { html, head, errorHtml, chunks } = renderPage();
        const styles = flush();
        return { html, head, errorHtml, chunks, styles };
      }
     
      render() {
        return (
          <html lang="pt-BR">
            <Head>
              <meta name="viewport" content="initial-scale=1.0, width=device-width" />
              {/* You need to add data-grid data attribute when using only css code */}
              <style type="text/css" data-grid>{gridStyles}</style>
            </Head>
            <body>
              <Main />
              <NextScript />
            </body>
          </html>
        );
      }
    }

    API Reference

    Row

    prop description default
    className className -
    component changes base element div
    wrap flex-wrap wrap
    align align-items stretch
    justify justify-content flex-start

    Col

    prop description
    className className
    component changes base element
    xs extra small cols
    sm small cols
    md medium cols
    lg large cols
    xl extra large cols

    Configure grid

    Changes default values. Also returns styles for server-side rendering

    Media queries with null value will not be rendered

    Configuration Object param:

    config object attribute default
    xs 0px or more
    sm 576px or more
    md 768px or more
    lg 992px or more
    xl 1200px or more
    gutter 30px

    Return Tag param:

    true - returns

    <style type="text/css" data-grid>grid css string</style>

    false - returns

    grid css string

    Signature

    configureGrid([Object], [Bool]);

    Special thanks

    @malbernaz

    Install

    npm i react-configurable-grid

    DownloadsWeekly Downloads

    18

    Version

    2.2.2

    License

    MIT

    Unpacked Size

    16.3 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar