Easy-react-form-component NPM

Easy React Form Component

An easy-to-use React Component to create form with simple validation quickly.

Installation

To install the stable version:

Using npm as your package manager.

  npm install --save easy-react-form-component

Using yarn as your package manager.

  yarn add easy-react-form-component

Documentation

Props

Name	Type	Description
fields	Array of Object	Array of object containing all your fields details.
className	String	String to use your own classes.
style	Object	Object to use Style on the form element ( use like any style props ).
onSubmit	CallBack function	Function called when the form is submitted receiving an object with property name corresponding to your field names.
onError	CallBack function	Function called when an error is triggered on submit

Field

Property name	Type	Description	Default
name	String	The name your input will have and the property name in the object you'll receive onSubmit. This property is MANDATORY.
type	String	Type of your field.	text
label	Object	An Object containing the properties : "class", "style", "value". The value is what will be displayed as the label text	{}
verif	Object	An Object with the verification to do on the Field and the error message to display.	{}
resetOnChange	Boolean	Reset or not this field errors when onChange event is triggered.	false
resetOnInput	Boolean	Reset or not this field errors when onInput event is triggered.	false
resetOnClick	Boolean	Reset or not this field errors when onClick event is triggered.	false
resetOnDoubleClick	Boolean	Reset or not this field errors when onDoubleCLick event is triggered.	false
resetOnFocus	Boolean	Reset or not this field errors when onFocus event is triggered.	false
resetOnKeyDown	Boolean	Reset or not this field errors when onKeyDown event is triggered.	false
resetOnMouseEnter	Boolean	Reset or not this field errors when onMouseEnter event is triggered.	false
resetOnMouseLeave	Boolean	Reset or not this field errors when onMouseLeave event is triggered.	false
options	Array of Object	Available only for select type Field. Array of Object containing all your options details.

Options

Property name	Type	Description	Default
text	String	The displayed text for the option .	copy of value or Empty String
value	String	The return valued when submitting the form.	copy of text or Empty String
selected	Boolean	Whether the Option must be the selected one at the init of the form.	false
disabled	Boolean	Whether the Option must be selectable or not.	false

Verif

The value of a property in verif must be an object containing the properties "value" which is what is described in the table under and "message" if you want to set an error message (this must be JSX).

Available verification

Property name	Description
required	A Boolean which, if true, indicates that the input must have a value before the form can be submitted.
maxLength	The maximum length of the value to accept for this input.
minLength	The minimum length of the value to accept for this input.
max	The maximum value to accept for this input.
min	The minimum value to accept for this input.
pattern	The regex pattern for the input.
validate	You can pass a callback function as the argument to validateYou can pass a callback function as the argument to validate.
valueAsNumber	Returns a Number normally. If something goes wrong NaN will be returned.
valueAsDate	Returns a Date normally. If something goes wrong null will be returned.
setValueAs	Return input value by running through the function.

Implemented Types

select
button
checkbox
color
date
datetime-local
email
file
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week

Implemented Properties

className (available on select too)
value (available on select too)
defaultValue (available on select too)
style (available on select too)
autoCapitalize
autoComplete
color
checked
defaultChecked
dir
disabled
step
placeholder

Implemented Events

onClick
onInput
onChange
onDoubleClick
onKeyDown
onMouseEnter
onMouseLeave

Examples

Simple form with Submit

import EasyForm from "easy-react-form-component"

function App() {
    return (
        <EasyForm
            fields={[
                // Text field
                {
                    type:"text",
                    name:"example",
                    label: {
                        value: "Example field"
                    }
                },


                // Select field
                {
                    type:"select",
                    name:"selectExample",
                    label : {
                        value: "Example Select"
                    },

                    // Options
                    options: [
                        {
                            text: "Nice Option",
                            value: "nice"
                        },
                        {
                            text: "Not Nice option",
                            value: "notNice",
                            selected: true
                        }
                    ]
                },


                // Submit button
                {
                    type:"submit",
                    name:"submitInput",
                    value:"Submit"
                }
            ]}
            onSubmit={(e) => console.log("My values are: ", e)} />
    );
};

export default App;

react form easy validation

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago