bgcom v1.0.10

bgcom

bPlugins Gutenberg Library

Install

npm install --save bgcom

Usage

import React, { Component } from 'react'

import MyComponent from 'bgcom'
import 'bgcom/dist/index.css'

class Example extends Component {
  render() {
    return <MyComponent />
  }
}

License

MIT © shehabulislam

BRangeControl
====================
/**
 *
 * @props {String} label
 * @props {Object} enable: {eDevice = true, eUnit = true, eNumberControl = true}
 * @props {Object} value: {number = 10, device = 'desktop', unit = 'px'}
 * @props {Array} units: ['px', 'em', '%']
 * @props {Function} onChange
 * @returns {Object}
 *
 */

BUnit
===================
/**
 *
 * @props {String} value: '%'
 * @props {Array} units: ['px', 'em', '%']
 * @props {Function} onChange
 * @returns {String}
 */


BTypography
======================

/**
 *
 * @props {Object} value: { font: {
    size = '16px',
    family = 'Default',
    weight = '',
    letterSpacing = '0px',
    textTransform = ''
  } }
 * @props {Object} enable: { eDevice = true, eUnit = true, eAT = true }
 * @props {Function} onChange
 * @returns {Object}
 */

BSpacer
========================
/**
 *
 * @props {Object} label: {top: "Top", right: "Right", bottom: "Bottom", left: "Left"}
 * @props {Object} value: { top: 0, right: 0, bottom: 0, left: 0 },
 * @props {Object} enable: { top = true, right = true, bottom = true, left = true },
 * @props {Booleaa} isDragEnabled: false
 * @props {Boolean} isShiftStepEnabled: true
 * @props {Number} shiftStep: 10
 * @props {String} width: '250px'
 * @props {String} ClassName: ''
 * @props {Function} onChange
 * @returns {Object}
 */

BResponsive
======================
/**
 *
 * @props {Object} value: {desktop = false, tablet = false, mobile = false}
 * @props {Function} onChange
 * @returns {Object} {desktop, tablet, mobile}
 */

BDevice
================
/**
 *
 * @props device: 'desktop' (String)
 * @props iconSize: 10 (Number)
 * @props onChange: (Function)
 * @props style: {} (Object)
 * @return Selected device
 */

BColor
=======================
/**
 *
 * @props
 * value: (String) --required
 * defaultColor: (String)
 * onChange: (Function) required
 * className: (String)
 * disableAlpha: (Boolean)
 * @boxPosition: 'top left' (String)
 *
 * return rgba color code
 */

BBorder
=======================
/**
 *
 * @props {Function} onChange
 * @props {Object} enable: {
    eWidth = true,
    eRadius = true,
    eShadow = true,
    eDevice = true
  }
 * @props {Object}
 * value: {
    border: {
      type: 'double',
      width: { top: 0, right: 0, bottom: 0, left: 0 },
      radius: { top: 0, right: 0, bottom: 0, left: 0 },
      shadow: {
        shadowColor: '#dddddd',
        horizontal: 200,
        vertical: 66,
        blur: 93,
        spread: 66,
        position: 'inset'
      }
    },
    device: 'desktop'
  }
*
* @returns {Object}
 */

BAnimation
=====================
/**
 *
 * @props {Function} onChange
 * @props {String} value
 * @return {String}
 */