https://github.com/moguelor/react-use-stateful-form

Custom hook to manage form state with field and fieldArrays for React 16+.
https://github.com/moguelor/react-use-stateful-form

create-react-app custom-hooks open-source-project react

Last synced: 25 days ago
JSON representation

Custom hook to manage form state with field and fieldArrays for React 16+.

• Host: GitHub
• URL: https://github.com/moguelor/react-use-stateful-form
• Owner: moguelor
• Created: 2019-04-17T02:22:40.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-09T19:47:49.000Z (almost 2 years ago)
• Last Synced: 2024-10-03T05:07:37.956Z (about 1 month ago)
• Topics: create-react-app, custom-hooks, open-source-project, react
• Language: JavaScript
• Homepage: https://moguelor.github.io/react-use-stateful-form/
• Size: 932 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 23
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# useStatefulForm [Live Demo](https://moguelor.github.io/react-use-stateful-form/)

Custom hook created to manage the state in forms with field and fieldArrays for React 16+. 

## Run

```

yarn install

yarn start

```

## Example:

```

import React from 'react';

import { useFormState } from '../../common/hooks';

import validate from '../validate';

import Input from './Input';

import InputArray from './InputArray';

const Form = () => {

    const initialValues = {

        clubName: '',

        members: []

    };

    const handleSuccess = (values) => {

        console.log('handleSuccess', values);

    }

    const { state, getField, getFieldArray, onSubmit } = useFormState(initialValues, validate, handleSuccess);

    const clubName = getField('clubName');

    const members = getFieldArray('members');

    return (

        

            

            

            


                 SAVE 

            

            


                Results

                
{JSON.stringify(state.formValues, null, 2) }

            

        

    );


}

// validate.js

import is from 'is_js';

const validate = (values = {}) => {

    const errors = {

    };

    if (is.empty(values.clubName)) {

        errors.clubName = 'The club is required';

    }

    const membersArrayErrors = [];

    values.members && values.members.map((member, memberIndex) => {

        let memberErrors = {};

        if (!member.name) {

            memberErrors.name = 'The name is required';

            membersArrayErrors[memberIndex] = memberErrors;

        }

        if (!member.phone) {

            memberErrors.phone = 'The phone is required';

            membersArrayErrors[memberIndex] = memberErrors;

        }

    });

    if (membersArrayErrors.length) {

      errors.members = membersArrayErrors;

    }

    return errors;

};

export default validate;

```

# Contributions

You can use this component if you want can contribute send email to [email protected].

_**From community to community...**_