Wondering what’s next for npm?Check out our public roadmap! »


    1.0.6 • Public • Published


    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

    Example Form Field
    Form Fields
    Supported Input Fields

    Edit formify-react


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


    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) {
      render() {
        return (
              data={{ budget: budgetData }}
            <button onClick={this.handleSave}>Save</button>

    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.


    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


    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'


    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:'',}


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

    These values will be used in type field of form model


    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'},


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


    Contributing Info


    MIT © gkhan205


    npm i formify-react

    DownloadsWeekly Downloads






    Unpacked Size

    306 kB

    Total Files


    Last publish


    • avatar