A combination of React's resuable component

This is a project where I will keep all of my resuable react components and share them between my projects. However, everyone is welcome to use.

Getting started

Installing

npm i react-resuable-components

Or

yarn add react-resuable-components

Using the components

import { Component } from 'react-resuable-components'

Live Preview

https://react-component-livepreview.herokuapp.com/

List of components ( updating... )

1. ProgressBar

Required Props

• percent: how many percent the bar is filled up with
• height: height of the bar
• width: width of the bar
• backgroundColor: color of the bar
• progressColor: color of the progress
• style: any additional styles

Example Usage

<ProgressBar 
    percent={parseFloat(percent.value)}
    height={height.value}
    width={width.value}
    backgroundColor={backgroundColor.value}
    progressColor={progressColor.value}
    style={{ margin: "0 auto", marginBottom: "100px" }}
/>

2. Input

Description A simple prop component that controls and validates the input.

Return Properties

• value: value of the input
• onChange
• name
• label: label of the input
• type: type of the input
• error: detail message error

Required Props

• name: name of the input field
• type: type of the input
• children: how input should look like

Example Usage

<Input
    name="percent"
    initialvalue={30}
    type="number"
    validation={value => value < 101 && value > 0 ? "" : "Percent must be between 0 and 100"}>
    {({value, onChange, name, error}) => {
        <TextField
            label={label}
            value={value}
            type={type}
            style={{ display: "block" }}
            onChange={onChange}
            name={name}
            fullWidth
            margin="normal"
        />
    }
</Input>

3. Forkme

Description A little github icon at the corner of the page

Required Props

• position: which corner to position the icon
• catColor
• backgroundColor
• destination: url of the github page

Example Usage

<Forkme
    position='Top Right'
    catColor='white'
    backgroundColor='black'
    destination = "https://github.com/rossitrile"
    />