React-Gridizer

A simple-to-use and lightweight React grid package for creating responsive applications

Examples

Basic example:

<Row>
    <Col cols={12} sm={6} md={4} lg="3" xl={2}>
        First
    </Col>
    <Col cols="unset">
        Second
    </Col>
    <Col>
        Third
    </Col>
</Row>

Installation

yarn add react-gridizer
or
npm install react-gridizer

Usage

Import styles:
import 'react-gridizer/lib/index.css';
Since each imported CSS class has a prefix, you don't have to worry about any interference.

Import required modules to use them:
import {Row, Col, Spacer, useBreakpoints} from 'react-gridizer';

Features

✔ Simple-to-use responsive components
✔ No CSS flex knowledge is required to use this package.
✔ Lightweight (28KB in total)
✔ Prefixed CSS classes to prevent style interference
✔ Support for Typescript
✔ Support for RTL
✔ kebab-case props
✔ Customizable HTML tags
✔ useBreakpoints hook for listening to screen resize and breakpoint changes
✔ Spacer component to distribute remaining width
✔ bootstrap-like Col in Row structure

API

this package exports the following modules. Notice all props are optional.

Row

Row component is a flex container which means it's a wrapper for Col. In addition to all common HTML attributes like tabIndex, aria attributes, events, and ... it supports the following props:

Col

Col component is a flex item which means it should be used inside Row. In addition to all common HTML attributes like tabIndex, aria attributes, events, and ... it supports the following props:

Spacer

Spacer component can be used to distribute the remaining width in a row, for example, Placing Spacer between two Cols will push them to the sides. In addition to all common HTML attributes like tabIndex, aria attributes, events, and ... it supports the following props:

useBreakpoints

this hook listens to screen size changes and exports screen width as well as active breakpoints. useBreakpoints has no parameter to set.

return {
    width: width,
    xsOnly: width < 600,
    smOnly: width >= 600 && width < 960,
    smAndDown: width < 960,
    smAndUp: width >= 600,
    mdOnly: width >= 960 && width < 1280 - 16,
    mdAndDown: width < 1280 - 16,
    mdAndUp: width >= 960,
    lgOnly: width >= 1280 - 16 && width < 1920 - 16,
    lgAndDown: width < 1920 - 16,
    lgAndUp: width >= 1280,
    xlOnly: width >= 1920 - 16,
}