react-component-builder

react-components-builder

Implementation builder programming pattern for simple creating react components. With this, even a designers, managers, juniors or monkeys on your team can write react components.

Installation

npm install --save react-components-builder

Example of use

Build simple component

import builder from 'react-components-builder';

const componentName = 'Grid';
const defaultClass  = 'grid';
const tagName       = 'div';

let Grid = new builder({
  tagGenerator: tagName,
  classGenerator: defaultClass,
})
.addSpecificProperty('columns', function(property){
  return property + '-columns'
})
.getBuildComponent(componentName);

export default Grid;

Use in code

<Grid className="my" columns="12"></Grid>

It's create this DOM

<div class="my 12-columns grid"></div>

Use with css-modules

import React from 'react'
import builder from 'react-components-builder';
import styles from 'styles.css';

const componentName = 'Grid';
const defaultClass  = 'grid';
const tagName       = 'button';
const properties    = ['color', 'size']

let Button = new builder({
  tagGenerator: tagName,
  classGenerator: defaultClass,
  stylesGenerator: styles,
  simplePropertyGenerator: properties
})
.getBuildComponent(componentName);

export default Button;

use in code

<Button className="my" color="red" size="big" other="other" />