README
Shapla React Columns
A simple way to build responsive columns for React
Table of contents
Installation
npm install --save @shapla/react-columns
Usage
Styles
with Sass:
import '@shapla/react-columns/src/index.scss';
with CSS:
import '@shapla/react-columns/dist/columns.css';
Javascript Instantiation
import React from 'react';
import {Columns,Column} from '@shapla/react-columns';
class MyApp extends React.Component {
render() {
return (
<Columns>
<Column>
<div className="card-column-box">Column example 1</div>
</Column>
<Column>
<div className="card-column-box">Column example 2</div>
</Column>
<Column>
<div className="card-column-box">Column example 3</div>
</Column>
<Column>
<div className="card-column-box">Column example 4</div>
</Column>
</Columns>
);
}
}
Columns
Props for Property | Type | Required | Default | Description |
---|---|---|---|---|
multiline |
Boolean | no | false |
Whenever you want to start a new line, you can also add the multiline property and add more column elements than would fit in a single row |
centered |
Boolean | no | false |
For centering columns, you can add the centered property |
vcentered |
Boolean | no | false |
To align your columns vertically, add the vcentered property to the columns container. |
gapless |
Boolean | no | false |
There is 1.5rem gap between columns by default. If you want to remove the space between the columns, add the gapless property on the columns container |
mobile |
Boolean | no | false |
By default, columns are only activated from tablet onwards. This means columns are stacked on top of each other on mobile. If you want columns to work on mobile too, just add the mobile property on the columns container. |
desktop |
Boolean | no | false |
If you only want columns on desktop upwards, just use the desktop property on the columns container. |
columnGap |
String | no | 0.75rem |
If you want to use custom column gap, you can change this value |
Column
Props for If you want to change the size of a single column, you can use one of the following props Each props can take value from 1 to 12 as it 12 columns grid system.
Property | Type | Required | Default | Description |
---|---|---|---|---|
mobile |
Number | no | null |
When screen size less than 769px. |
tablet |
Number | no | null |
When screen size (greater than/equal to) 769px. |
desktop |
Number | no | null |
When screen size (greater than/equal to) 1088px. |
widescreen |
Number | no | null |
When screen size (greater than/equal to) 1280px. |
fullhd |
Number | no | null |
When screen size (greater than/equal to) 1472px. |