React Variety Form

Sometimes in our work, we are forced to go extra fast to finish our project because of any urgent request for a demo to show a new form or to create a simple form. Anyway, we can use any framework to handle it. But, you need extra time to install and set up. React Variety Form provides a simple form that can help you to give a style choice, validation, and responsiveness without any configs.

Demo

Visit to Live Preview

Install

npm install react-variety-form

Example Usage

import React from 'react'
import {
  TextBox,
  TextArea,
  Select,
  SelectSearch,
  Radios,
  CheckBox
} from 'react-variety-form'

const Example = () => {
  function handleChange(value) {
    // your logic
  }

  render() {
    return (
       <TextBox onChange={handleChange} />
       <TextArea isRounded />
       <Select isDisable />
       <SelectSearch  />
       <Radios options={['Male', 'Female']} />
       <CheckBox />
    )
  }
}

export default Example

Common Props

Common Props are properties than can use for all columns.

Text Box

Text Box is the most used input form. Then format and validation are necessary to prevent wrong inputted.

Text Area

Basically almost the same as Text Box. But, there are several added properties that can be used to complete features. Props isNumberOnly and isEmail are not applicable on it.

Select

Select gives a choice option based on data. You only give an array object data and define value and name.

Mention property array, name and value. Below given an example how to implemment it.

const Example = () => {
  const data = [
    {
        id: 178,
        fruitName: 'Apple'
    },
    {
        id: 179,
        fruitName: 'Pear'
    }
  ]
  render() {
    return (
       <Select data={data} name="fruitName" value="id" />
    )
  }
}

Select Search

It was used to search bulky lists by type of characters. For several props same with select props. But, for props value will be instead of selected. Please adjust as needed for props placeholder and label.

Radio Button

You can determine how many options that show on form with array.

Check Box

Check Box return boolean true or false

Conclusion

React Variety Form give easy design and use to handle common to prevent wrong process.

License

MIT © faridho