Skip to content

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

License

Notifications You must be signed in to change notification settings

Farshad-Hasanpour/react-gridizer

Repository files navigation

React Gridizer Logo

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

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published