shapla-react-columns v1.0.0

Shapla React Columns

A simple way to build responsive columns for React

Table of contents

• Installation
• Usage

Installation

npm install --save shapla-react-columns

Usage

Styles

with Sass:

import 'shapla-react-spinner/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

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.