react-ez-bs-grid

Easy component for creating react grids with Bootstrap

Install

This package requires react-bootstrap to function

if you haven't already installed it:

npm install --save react-bootstrap bootstrap

You must also include a bootsrap style sheet in your application: more info at the react-bootstrap documentation site

{/* The following line can be included in your src/index.js or App.js file*/}

import 'bootstrap/dist/css/bootstrap.min.css';

Finally, you can install react-ez-bs-grid!

npm install --save react-ez-bs-grid

Usage

import React, { Component } from 'react'

import { EZBSG } from 'react-ez-bs-grid'

class Example extends Component {
  render() {
    return <EZBSG model={gridModel} />
  }
}

Model

If you want to start using EZBSG, you'll want to ensure that your JSON model is shaped correctly. By parsing this model, EZBSG translates the JSON directly to a responsive bootstrap grid

the EZBSG component requires a model prop that is shaped like the following JSON:

const exampleModel = {
	rows: [/* array of row models */]
	props: {
		/* Props to be passed to the grid component */
		style: { ... } /* standard react component props are supported */
	}
}

Each row should be shaped like the following JSON:

const exampleRow = {
	columns: [/* array of column models */]
	/* props for the bootstrap row component things like style can be passed here */
	props: { 
		className: 'text-center' 
	}
}

Each column should be shaped like the following JSON:

const exampleColumn= {
	type: 'img' /* string defining the type of component to place inside of the column */
	/* All props for the defined component type should be added here */
	props: { 
		src: 'https://placekitten.com/300/300' 
	}
	colProps: {
		style: { ... } /* props for the bootstrap Col component */
	}
}

The final model should resemble this following:

const model = {
	"rows": [{
		"columns": [{
			"type": "text",
			"colProps": {
				"style": {
					"backgroundColor": "rgba(0, 0, 0, 0.9",
					"color": "white",
					"fontSize": "40px",
					"padding": 15
				},
				"className": "text-center"
			},
			"content": "Image Tiles"
		}]
	}, {
		"props": {
			"className": "text-center"
		},
		"columns": [{
			"type": "image",
			"props": {
				"src": "https://placekitten.com/300/300?image=0",
				"roundedCircle": true
			},
			"colProps": {
				"style": {
					"paddingTop": 10,
					"paddingBottom": 10,
					"backgroundColor": "rgba(0, 0, 0, 0.9594841427236049)"
				}
			}
		}, {
			"type": "image",
			"props": {
				"src": "https://placekitten.com/300/300?image=1",
				"roundedCircle": true
			},
			"colProps": {
				"style": {
					"paddingTop": 10,
					"paddingBottom": 10,
					"backgroundColor": "rgba(0, 0, 0, 0.825284755385659)"
				}
			}
		}, {
			"type": "image",
			"props": {
				"src": "https://placekitten.com/300/300?image=2",
				"roundedCircle": true
			},
			"colProps": {
				"style": {
					"paddingTop": 10,
					"paddingBottom": 10,
					"backgroundColor": "rgba(0, 0, 0, 0.30283335827638463)"
				}
			}
		}]
	}]
}

I know it seems like a lot of nested JSON, but I find it easier to manage once the model generation is automated. ;-)

Supported Column Types

Currently EZBSG supports the following types: |type|props|Description| |--|--|--| | grid |accepts model prop (exactly like the regular grid) | place a grid within a column to group related content responsively |text|content - The text to be displayed in the column| Simple text placed within the column| |image|see Bootstrap Image documentation|creates a bootstrap Image component inside the column| |paragraph|content - the text to place inside of the <p> tag|Creates a <p> tag within the column |h1-h6|content - the text to place inside of the heading tag|Creates a heading tag within the column

Example

There is an example application included in this repo, to run it simply run npm run start-example from the root directory.

Development

The easiest way to make changes to this library is by running the sample application locally.

Step 1: run npm start in the root of the repo Step 2: (In another window) change to the example directory cd example step 3: run npm start in the example directory step 4: Hack

License

MIT © Ukeeyo