@shapla/react-columns

A simple way to build responsive columns for React

Usage no npm install needed!

<script type="module">
  import shaplaReactColumns from 'https://cdn.skypack.dev/@shapla/react-columns';
</script>

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>
    );
  }
}

Props for Columns

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

Props for Column

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.