formify-react

    1.0.14 • Public • Published

    formify-react

    Last form component you will need for you application which works with only a JSON you pass rest it will handle everything

    NPM JavaScript Style Guide License Bundle Size

    Installation
    Usage
    Props
    Example Form Field
    Form Fields
    Supported Input Fields
    Validators
    Upcoming
    Contributing

    Edit formify-react

    Install

    #npm
    npm i -S formify-react
    
    #yarn
    yarn add formify-react

    Usage

    import React, { Component, createRef } from 'react'
    
    import Form from 'formify-react'
    import 'formify-react/dist/index.css'
    
    import { formConstants } from './config'
    
    const budgetData = [
      { value: 5000, label: '$5000' },
      { value: 15000, label: '$15000' },
      { value: 25000, label: '$25000' },
      { value: 35000, label: '$35000' },
      { value: 50000, label: '$50000' }
    ]
    
    class Example extends Component {
      formRef = createRef()
    
      handleSave = () => {
        const { current } = this.formRef
        const form = current.getFormData()
        if (form.isFormValid) {
          console.log(form.formData)
        }
      }
    
      handleSubmit = ({ formData, isFormValid }) => {
        if (isFormValid) {
          console.log(formData)
        }
      }
    
      render() {
        return (
          <div>
            <Form
              model={formConstants}
              ref={this.formRef}
              data={{ budget: budgetData }}
              onSubmit={this.handleSubmit}
            />
            <button onClick={this.handleSave}>Save</button>
          </div>
        )
      }
    }

    getFormData() returns an object of {isFormValid, formData}. Same object will be returned if you use onChange function to get latest change while you update any field. getFormData is only be accessible when you use ref.

    New Update:- Now you can pass onSubmit callback function to enable native form submit (with pressing enter);

    Props

    Property Description Type Default Required
    model Form model array with all fields Array Yes
    ref Ref to get access to Form DOM Ref React Ref No
    data Object of dropdown data with field name of dropdown field Object {} No
    values Object of all fields in forms with values to be populated in form Object {} No
    onChange This is an optional callback if you need to get form values when an input is changed Function No
    onSubmit This is an optional callback if you need to get form values when pressed enter to submit to your service Function No

    Model

    import { Validators } from 'formify-react'
    
    export const formConstants = [
      {
        field: 'email',
        type: 'email',
        validators: [
          { check: Validators.required, message: 'Email is mandatory' },
          { check: Validators.email, message: 'Email entered is not valid' }
        ],
        required: true,
        title: 'Email',
        placeholder: 'Enter your email',
        styleClass: 'col-sm-6',
        extraProps: {
          maxLength: 30
        }
      },
      {
        field: 'budget',
        type: 'dropdown',
        validators: [],
        required: false,
        title: 'Your Budget',
        styleClass: 'col-sm-6'
      },
      {
        field: 'message',
        type: 'textarea',
        validators: [],
        required: false,
        title: 'Message',
        placeholder: 'Enter your message',
        styleClass: 'col-sm-12'
      },
      {
        field: 'notify',
        type: 'checkbox',
        validators: [],
        required: false,
        title: 'Subscribe to our mailing list',
        styleClass: 'col-sm-12'
      }
    ]

    Fields

    Property Description Type Default Required
    field This property will be used to identify the input and this will be returned with value which can be used to everywhere. e.g: sending to API Body string Yes
    type Type of input field to generated in Form Input Type ['input','textarea','dropdown', 'checkbox', 'email', 'url', 'search', 'number', 'password'] Yes
    validators Array of validator functions imported from react-dynamic-form Function [] Yes
    required This field is responsible to mark the field required in form Boolean false Yes
    title This field used to display label of the Input Field String '' Yes
    styleClass This field used to do the layout of the fields, you can use your style classes to style inputs String '' No
    placeholder This field used to display placeholder in the field String '' No
    extraProps This field is used to send any extra html attributes to field Object {} No

    For Dropdown Data format should be an array of {value:'', label:'',}

    Supported

    Input Value Sample Data
    Text text
    Email email
    Password password
    URL url
    Search search
    Number number
    Dropdown dropdown {value:'test', label:'Test',}
    Checkbox checkbox
    Date date

    These values will be used in type field of form model

    Validators

    import { Validators } from 'formify-react'

    • {check: Validators.required, message: 'This field is required'}
    • {check: Validators.email, message: 'Email is invalid'}
    • {check: Validators.number, message: 'Only number allowed'}

    You can now send custom validator to the form component

    /*
      Custom Validator
      @params: value -> received value from inputs
      @params: message -> message which you will add while sending in the validators array of form component
    */
    const checkGhazi = (value, message) => {
      if(value && value.includes('ghazi')) {
        return false;
      }
      return {error: true, message};
    }
    
    // Add your custom validator function to validators array of the form constant.
    validators: [
      {check: checkGhazi, message: 'Text does not contain Ghazi'},
    ],

    Upcoming

    • [x] Custom Validation methods
    • [ ] Dropdown with MultiSelect and Autocomplete

    Contribution

    Contributing Info

    License

    MIT © gkhan205

    Install

    npm i formify-react

    DownloadsWeekly Downloads

    96

    Version

    1.0.14

    License

    MIT

    Unpacked Size

    310 kB

    Total Files

    8

    Last publish

    Collaborators

    • ghazikhan205