❤
npm
Sign UpSign In

react-form-elementor

0.0.5 • Public • Published

React Form Elementor

This package provide you a react based shared library to manage basic form element in react so you not waste you time doing that again and again.

Installation

npm i react-form-elementor --save

How To Use

To use the elements you first need to import the element and a events function from react-form-elementor. check the below code.

... some code
import { TextBox, events } from 'react-form-elementor';
... some code
class Form extends Component
{
    constructor(props) {
        super(props);

        this.state = {
            firstName: 'John Doe'
        };
    }
    ... some code

    render() {
        return (
            <TextBox name="firstName" value={this.state.name} onChange={this.onChange} />
        )
    }
    ... some code
}

export default events(Form);

Note. please be carefull you need to pass state key name as element name property like show in above example.

Components

Here is some basic element that are provided.

Text Box

This is a <input type="text" /> element. Below is the code to import this component.

import { TextBox } from 'react-form-elementor';
Attributes
  • name: String
  • value: either state variable or a string value
  • placeholder: String
  • disabled: either state variable or boolean value
  • readOnly: either state variable or boolean value
  • maxLength: either state variable or integer
  • classes: eiter state or string of class names
Events
  • onChange (value, name, event)
    • params:
      • value: String
      • name: String (the name of the field)
      • event: Object (the Event Object)
  • onBlur (value, name, event)
    • params:
      • value: String
      • name: String (the name of the field)
      • event: Object (the Event Object)
  • onFocus (value, name, event)
    • params:
      • value: String
      • name: String (the name of the field)
      • event: Object (the Event Object)
  • onKeyPress (value, name, event)
    • params:
      • value: String
      • name: String (the name of the field)
      • event: Object (the Event Object)
  • onKeyDown (value, name, event)
    • params:
      • value: String
      • name: String (the name of the field)
      • event: Object (the Event Object)
  • onKeyUp (value, name, event)
    • params:
      • value: String
      • name: String (the name of the field)
      • event: Object (the Event Object)

Text Area

This is a <textarea> element. Below is the code to import this component.

import { TextArea } from 'react-form-elementor';
Attributes
  • name: String
  • value: either state variable or a string value
  • placeholder: String
  • disabled: either state variable or boolean value
  • readOnly: either state variable or boolean value
  • classes: eiter state or string of class names
  • rows: either state variable or integer
  • cols: either state variable or integer
Events
  • onChange (value, name, event)
    • params:
      • value: String
      • name: String (the name of the field)
      • event: Object (the Event Object)
  • onBlur (value, name, event)
    • params:
      • value: String
      • name: String (the name of the field)
      • event: Object (the Event Object)
  • onFocus (value, name, event)
    • params:
      • value: String
      • name: String (the name of the field)
      • event: Object (the Event Object)
  • onKeyPress (value, name, event)
    • params:
      • value: String
      • name: String (the name of the field)
      • event: Object (the Event Object)
  • onKeyDown (value, name, event)
    • params:
      • value: String
      • name: String (the name of the field)
      • event: Object (the Event Object)
  • onKeyUp (value, name, event)
    • params:
      • value: String
      • name: String (the name of the field)
      • event: Object (the Event Object)

Password

This is a <input type="password" /> element. Below is the code to import this component.

import { Password } from 'react-form-elementor';
Attributes
  • name: String
  • value: either state variable or a string value
  • placeholder: String
  • disabled: either state variable or boolean value
  • readOnly: either state variable or boolean value
  • maxLength: either state variable or boolean integer
  • classes: eiter state or string of class names
Events
  • onChange (value, name, event)
    • params:
      • value: String
      • name: String (the name of the field)
      • event: Object (the Event Object)
  • onBlur (value, name, event)
    • params:
      • value: String
      • name: String (the name of the field)
      • event: Object (the Event Object)
  • onFocus (value, name, event)
    • params:
      • value: String
      • name: String (the name of the field)
      • event: Object (the Event Object)
  • onKeyPress (value, name, event)
    • params:
      • value: String
      • name: String (the name of the field)
      • event: Object (the Event Object)
  • onKeyDown (value, name, event)
    • params:
      • value: String
      • name: String (the name of the field)
      • event: Object (the Event Object)
  • onKeyUp (value, name, event)
    • params:
      • value: String
      • name: String (the name of the field)
      • event: Object (the Event Object)

Hidden

This is a <input type="hidden" /> element. Below is the code to import this component.

import { Hidden } from 'react-form-elementor';
Attributes
  • name: String
  • value: either state variable or a string value
  • placeholder: String
  • disabled: either state variable or boolean value
  • readOnly: either state variable or boolean value
  • maxLength: either state variable or boolean integer
  • classes: eiter state or string of class names
Events
  • onChange (value, name, event)
    • params:
      • value: String
      • name: String (the name of the field)
      • event: Object (the Event Object)
  • onBlur (value, name, event)
    • params:
      • value: String
      • name: String (the name of the field)
      • event: Object (the Event Object)
  • onFocus (value, name, event)
    • params:
      • value: String
      • name: String (the name of the field)
      • event: Object (the Event Object)
  • onKeyPress (value, name, event)
    • params:
      • value: String
      • name: String (the name of the field)
      • event: Object (the Event Object)
  • onKeyDown (value, name, event)
    • params:
      • value: String
      • name: String (the name of the field)
      • event: Object (the Event Object)
  • onKeyUp (value, name, event)
    • params:
      • value: String
      • name: String (the name of the field)
      • event: Object (the Event Object)

Check Box

This is a <input type="checkbox" /> element. Below is the code to import this component.

import { CheckBox } from 'react-form-elementor';
Attributes
  • name: String
  • value: either state variable or a string value (this is the state value)
  • default: either state variable or a string value (this wil goes in value attribute for field)
  • disabled: either state variable or boolean value
  • readOnly: either state variable or boolean value
  • classes: eiter state or string of class names
Events
  • onChange (value, name, event)
    • params:
      • value: String
      • name: String (the name of the field)
      • event: Object (the Event Object)
  • onClick (value, name, event)
    • params:
      • value: String
      • name: String (the name of the field)
      • event: Object (the Event Object)
  • onBlur (value, name, event)
    • params:
      • value: String
      • name: String (the name of the field)
      • event: Object (the Event Object)
  • onFocus (value, name, event)
    • params:
      • value: String
      • name: String (the name of the field)
      • event: Object (the Event Object)
  • onMouseDown (value, name, event)
    • params:
      • value: String
      • name: String (the name of the field)
      • event: Object (the Event Object)
  • onMouseUp (value, name, event)
    • params:
      • value: String
      • name: String (the name of the field)
      • event: Object (the Event Object)

Radio Box

This is a <input type="radio" /> element. Below is the code to import this component.

import { RadioBox } from 'react-form-elementor';
Attributes
  • name: String
  • value: either state variable or a string value (this is the state value)
  • default: either state variable or a string value (this wil goes in value attribute for field)
  • disabled: either state variable or boolean value
  • readOnly: either state variable or boolean value
  • classes: eiter state or string of class names
Events
  • onChange (value, name, event)
    • params:
      • value: String
      • name: String (the name of the field)
      • event: Object (the Event Object)
  • onClick (value, name, event)
    • params:
      • value: String
      • name: String (the name of the field)
      • event: Object (the Event Object)
  • onBlur (value, name, event)
    • params:
      • value: String
      • name: String (the name of the field)
      • event: Object (the Event Object)
  • onFocus (value, name, event)
    • params:
      • value: String
      • name: String (the name of the field)
      • event: Object (the Event Object)
  • onMouseDown (value, name, event)
    • params:
      • value: String
      • name: String (the name of the field)
      • event: Object (the Event Object)
  • onMouseUp (value, name, event)
    • params:
      • value: String
      • name: String (the name of the field)
      • event: Object (the Event Object)

Drop Down

This is a <select> element. Below is the code to import this component.

import { DropDown } from 'react-form-elementor';
Attributes
  • name: String
  • value: either state variable or a string value
  • options: Array of object like [{label: 'test', value: 1}]
  • disabled: either state variable or boolean value
  • classes: eiter state or string of class names
Events
  • onChange (value, name, event)
    • params:
      • value: String
      • name: String (the name of the field)
      • event: Object (the Event Object)
  • onBlur (value, name, event)
    • params:
      • value: String
      • name: String (the name of the field)
      • event: Object (the Event Object)
  • onFocus (value, name, event)
    • params:
      • value: String
      • name: String (the name of the field)
      • event: Object (the Event Object)
  • onKeyPress (value, name, event)
    • params:
      • value: String
      • name: String (the name of the field)
      • event: Object (the Event Object)
  • onKeyDown (value, name, event)
    • params:
      • value: String
      • name: String (the name of the field)
      • event: Object (the Event Object)
  • onKeyUp (value, name, event)
    • params:
      • value: String
      • name: String (the name of the field)
      • event: Object (the Event Object)

Multi Select

This is a <select multiple="true"></select element. Below is the code to import this component.

import { MultiSelect } from 'react-form-elementor';
Attributes
  • name: String
  • value: either state variable of Array type or a Array value
  • options: Array of object like [{label: 'test', value: 1}]
  • disabled: either state variable or boolean value
  • classes: eiter state or string of class names
Events
  • onChange (value, name, event)
    • params:
      • value: String
      • name: String (the name of the field)
      • event: Object (the Event Object)
  • onBlur (value, name, event)
    • params:
      • value: String
      • name: String (the name of the field)
      • event: Object (the Event Object)
  • onFocus (value, name, event)
    • params:
      • value: String
      • name: String (the name of the field)
      • event: Object (the Event Object)
  • onKeyPress (value, name, event)
    • params:
      • value: String
      • name: String (the name of the field)
      • event: Object (the Event Object)
  • onKeyDown (value, name, event)
    • params:
      • value: String
      • name: String (the name of the field)
      • event: Object (the Event Object)
  • onKeyUp (value, name, event)
    • params:
      • value: String
      • name: String (the name of the field)
      • event: Object (the Event Object)

File

This is a <input type="file" /> element. Below is the code to import this component.

import { File } from 'react-form-elementor';
Attributes
  • name: String
  • value: either state variable of Array type or a Array value
  • disabled: either state variable or boolean value
  • classes: eiter state or string of class names
  • multiple: boolean
Events
  • onChange (value, name, event)
    • params:
      • value: String
      • name: String (the name of the field)
      • event: Object (the Event Object)
  • onBlur (value, name, event)
    • params:
      • value: String
      • name: String (the name of the field)
      • event: Object (the Event Object)
  • onFocus (value, name, event)
    • params:
      • value: String
      • name: String (the name of the field)
      • event: Object (the Event Object)
  • onKeyPress (value, name, event)
    • params:
      • value: String
      • name: String (the name of the field)
      • event: Object (the Event Object)
  • onKeyDown (value, name, event)
    • params:
      • value: String
      • name: String (the name of the field)
      • event: Object (the Event Object)
  • onKeyUp (value, name, event)
    • params:
      • value: String
      • name: String (the name of the field)
      • event: Object (the Event Object)

Readme

Keywords

Package Sidebar

Install

npm i react-form-elementor

Repository

github.com/sonsor/react-form-elementor

Homepage

github.com/sonsor/react-form-elementor#readme

Weekly Downloads

3

Version

0.0.5

License

ISC

Unpacked Size

64.5 kB

Total Files

22

Last publish

Collaborators

  • sonsor
Try on RunKit
Report malware