@savedo/re-form
TypeScript icon, indicating that this package has built-in type declarations

2.0.0 • Public • Published

re-form

React form library.

re-form

Installation

re-form requires

  • react/react-dom 16.8.3 or later to build your form.

$ npm install --save @savedo/re-form

or

$ yarn add @savedo/re-form

Usage

Basic usage: Creating a react form component with three input fields (name, age, email) validation and values assignment.

Create your form component:

import React from 'react';
import { FormBuilder } from '@savedo/re-form';

const MyForm = ({ handleSubmit }) => {
  const fields = [
    'name',
    'age',
    'email'
  ];

  const fieldOptions = {
    name: {
      label: 'Name:'
    },
    age: {
      label: 'Age:',
      type: 'number'
    },
    email: {
      label: 'E-mail:'
    }
  };

  const validate = (formData) => {
    const errors = {};
    const { name, age } = formData;

    if (!name) {
      errors.name = 'Name is required!';
    }
    if (!age) {
      errors.age = 'Age is required!';
    } else if (Number(age) < 18) {
      errors.age = 'You should be 18 years old or older!';
    }

    return errors;
  };

  return (
    <div>
      <FormBuilder { ...{ fields, fieldOptions, handleSubmit, validate } } />
    </div>
  );
};

export default MyForm;

And use form component elsewhere:

import React from 'react';
import MyForm from './MyForm';

const App = () => {
  const handleSubmit = (formData) => {
    console.log(formData)
  };

  return (
    <MyForm handleSubmit={ handleSubmit } />
  );
};

export default App;

Configuration

The FormBuilder component has props as shown below. It has FormBuilderPropsType<T> type. T refers to your object type having key (Field name, ) / values (Field options ).

FormBuilderPropsType

Property Type Description
fields string[] Unique field names
fieldOptions { key (string): options (FieldOptionsValueType) } Field/Component options (See table below)
values object Init values for the fields
handleSubmit function Callback function to handle submit behaviour if validation successful
validate method Callback function for validation (form data will be passed as an argument), supports sync/async functions.
submitSection React.FC React component to provide submit button or submit event

FieldOptionsValueType

Property Type Default Optional Description
name string field key name true name of the field
label string field key name true label for the form field
element input, select, textarea input[type=text] true HTML tag for the form field
type input types (eg. text, number, email, checkbox etc) text true type attribute for HTMLInputElement
component FunctionalComponent N/A true Pass your FunctionalComponent with props (FormFieldPropsType). element and type becomes redundant when component is used.
keyValues { [key: string]: any } N/A true Only viable when element is select. This object provides the list of <option value="key">value</option>
className string N/A true CSS class(es) for the element
defaultValue string N/A true Default value for a field.
disabled boolean N/A true Disabled prop for inputs.
placeholder string N/A true Placeholder text for the input.
checked boolean N/A true Used for checkboxes to pass default value when type is checkbox.
checkboxText string N/A true Used for pass label for chebox element, normal label is being used for input lable.

FormFieldPropsType

Props below will be passed to your custom component.

Property Type Description
options FieldOptionsValueType Options defined for field (See table above)
error string Error message to pass into component if the input is not valid
setValue Function N/A. For internal usage
value any N/A. For internal usage
checked boolean Passed when type is checkbox in place of Value.
name string N/A. For internal usage

Development

In order to start dev server, type

yarn develop

it opens your browser with url http://localhost:9100/

License

MIT

Package Sidebar

Install

npm i @savedo/re-form

Weekly Downloads

0

Version

2.0.0

License

MIT

Unpacked Size

14.9 kB

Total Files

5

Last publish

Collaborators