React Configurable Grid

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

andre-araujo / react-configurable-grid Goto Github PK