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:

| Row Prop | Default | Description | :-----------: | :-----------: | :----------- | | tag | 'div' | The HTML tag for Row. Some examples are div, ul, and span | children | | The content of Row. It is recommended to use Col components inside Row | className | | Adds extra custom classes to Row | class | | Another way of adding extra classes to Row. It is the same as className. | reverse | false | Reverses the order of items inside Row. Possible values are true and false | gutters | 'normal' | Determines padding for each Col inside Row. possible values are 'normal', 'dense' and 'none'. | justify | | Determines the horizontal position of items inside Row (sets justify-content CSS property). Possible Values are 'center', 'end', 'left', 'right', 'space-around', 'space-between', 'space-evenly', 'start' and 'stretch' | justify-sm | | Same as justify but for small screens and upper | justify-md | | Same as justify but for medium screens and upper | justify-lg | | Same as justify but for large screens and upper | justify-xl | | Same as justify but for extra-large screens and upper | align | | Determines the vertical position of each item inside Row (sets align-items CSS property). Possible Values are 'baseline', 'center', 'end', 'start' and 'stretch' | align-sm | | Same as align but for small screens and upper | align-md | | Same as align but for medium screens and upper | align-lg | | Same as align but for large screens and upper | align-xl | | Same as align but for extra-large screens and upper | align-content | | Determines the vertical position of all items inside Row as a group (sets align-content CSS property). Possible Values are 'baseline', 'center', 'end', 'space-around', 'space-between', 'space-evenly', 'start' and 'stretch' | align-content-sm | | Same as align-content but for small screens and upper | align-content-md | | Same as align-content but for medium screens and upper | align-content-lg | | Same as align-content but for large screens and upper | align-content-xl | | Same as align-content but for extra-large screens and upper

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:

| Col Prop | Default | Description | :-----------: | :-----------: | :----------- | | tag | 'div' | The HTML tag for Col. Some examples are div, li, and h3 | children | | The content of Col. | className | | Adds extra custom classes to Col | class | | Another way of adding extra classes to Col. It is the same as className. | cols | | Determines the width of Col inside Row (sets flex-basis and max-width CSS properties). Possible Values are 'auto', 'unset' or a number from 1 to 12. 'unset' items fit the content and 'auto' items fill the remaining space. | sm | | Same as cols but for small screens and upper | md | | Same as cols but for medium screens and upper | lg | | Same as cols but for large screens and upper | xl | | Same as cols but for extra-large screens and upper | order | | Determines the order of Col inside Row (sets order CSS property). The minimum valid number is 1 and the maximum is 12. | order-sm | | Same as order but for small screens and upper | order-md | | Same as order but for medium screens and upper | order-lg | | Same as order but for large screens and upper | order-xl | | Same as order but for extra-large screens and upper | offset | | Determines the start margin of Col in a way that each number is multiplied by 4px (sets margin-inline-start CSS property). The minimum valid number is 1 and the maximum is 11. | offset-sm | | Same as offset but for small screens and upper | offset-md | | Same as offset but for medium screens and upper | offset-lg | | Same as offset but for large screens and upper | offset-xl | | Same as offset but for extra-large screens and upper | align-self | | Determines the vertical position of Col item inside Row (sets align-self CSS property). Possible Values are 'auto', 'baseline', 'center', 'end', 'start' and 'stretch' | align-self-sm | | Same as align-self but for small screens and upper | align-self-md | | Same as align-self but for medium screens and upper | align-self-lg | | Same as align-self but for large screens and upper | align-self-xl | | Same as align-self but for extra-large screens and upper

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:

| Spacer Prop | Default | Description | :-----------: | :-----------: | :----------- | | tag | 'div' | The HTML tag for Spacer. Some examples are div, span, and li | children | | The content of Spacer. | className | | Adds extra custom classes to Spacer | class | | Another way of adding extra classes to Spacer. It is the same as className.

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,
}