react-reusable-components-library v1.0.2

react-reusable-components-library

• Examples on Git repo : https://github.com/sonal-ojha/examples-React-reusable-components

react-reusable-components-library is simple to use yet customizable component library which can be used to develop a webpage.

• The library consists of Inputbox, Button and Grouped Buttons components as of now.
• All the components are extensively customizable by passing various set of props.
• Library uses the customStyle prop and overrides the default styles to the elements.

• customStyle as a prop which includes styles in a object format. Example: customStyle={{ margin: '20px', width: '200px', 'background-color': '#ccc', 'padding-top': '5px', }}

• disabled: As a prop can be passed to Button component.

• primaryBgColor: overrides the default primary background color. This can be used in both Button and ButtonGroup components.
• buttonList: This prop is an array of objects used by ButtonGroup component. Each object should consist of key, value and style properties. key represents the ID, value represents the title to be displayed on the button and style specific to button.
• primaryBgColor highlights the selected button from the group.
• buttonClicked: Callback that is triggered on click of button and accepts 2 parameters (value, key).

• selectedValue: represents the current selected option from group of buttons.

• InputBox: This component accepts 'id, inputText(user entered text), customStyle(overrides styles), inputValue(callback triggers on OnChnage event handler).

• errorMessage: This prop helps in displaying the error messages at validation level. A props which accepts string and displays error message relative to the input field.

Installation

This requires React.js and Prop-Types to run.

npm i react-reusable-components-library

How to Use

Install and import react-reusable-components-library and pass the props as per the below table

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import ReactComponentLibrary from 'react-reusable-components-library';

class App extends Component {

    state = {
    text: '',
    selectedValue: 'one',
    buttonList: [
      {
        key: '1',
        value: 'one',
        style: {
          color: 'red',
          'font-weight': 'bold',
        }
      },
      {
        key: '2',
        value: 'Two',
        style: {
          color: 'yellow',
          'font-weight': 'bold',
        }
      },
    ]
  }

  handleButtonGroupClick = (value, key) => {
    this.setState({
      selectedValue: value
    })
  }

  handleChange = (value, key) => {
    this.setState({
      text: value
    })
  }

  render() {
    return (
      <div className="App">
        <ReactComponentLibrary.Button 
          title="Customizable Button"
          id="1"
          buttonClick={this.buttonClicked}
          primaryBgColor='green'
          customStyle={{
            margin: '20px',
            width: '200px',
          }}
          disabled
        />
        <ReactComponentLibrary.ButtonGroup
          buttonList={buttonList}
          selectedValue={selectedValue}
          buttonClicked={this.handleButtonGroupClick}
          primaryBgColor="green"
          customStyle={{
            'font-size': '15px',
          }}
        />
        <ReactComponentLibrary.Input
          id="2"
          inputValue={this.handleErrorInput}
          inputText={text}
          customStyle={{
            margin: '20px',
          }}
          errorMessage='Please Enter Value!!!'
        />
      </div>
    );
  }
}

export default App;

Work In Progress - On other components.

## Contribution

You are welcome to raise issues and PRs in the repository