@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

    Install

    npm i @savedo/re-form

    DownloadsWeekly Downloads

    50

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    14.9 kB

    Total Files

    5

    Last publish

    Collaborators

    • cameron_prebble
    • erhangundogan
    • lisovskyvlad
    • mrarguello
    • peeyushsingla
    • savedo-it