Giter VIP home page Giter VIP logo

Comments (7)

cloudever avatar cloudever commented on March 28, 2024 4

Formik will have form hooks, I think no need here

from react-use.

streamich avatar streamich commented on March 28, 2024 2

Here is a nice simple interface:

from react-use.

revskill10 avatar revskill10 commented on March 28, 2024 1

@streamich I'm testing this code:

import { useState } from 'react'
import Validator from 'fastest-validator'

export const useForm = (initialState, schema) => {
  const [values, setValues] = useState(initialState)
  const [errors, setErrors] = useState({})
  const v = new Validator();
  const check = v.compile(schema);
  
  const updateValues = (value, name) => {
    setValues({ ...values, [name]: value})
  }

  const onChange = (value, name) => {
    if (value.target) {
      const e = value
      updateValues(e.target.name, e.target.value)
    } else {
      updateValues(name, value)
    }
  }

  const onSubmit = (e) => {
    e.preventDefault()
    const errors = check(values)
    if (errors.length > 0) {
      setErrors(errors)
    } else {
      setErrors([])
    }
  }

  return {
    values,
    errors,
    onChange,
    onSubmit,
  }
} 

export default useForm

Usage like this

import { useForm } from 'lib/hooks/form'

const initialState = {
    firstName: "Truong",
    lastName: "Dung",
    age: 30,
  }

  const schema = {
    firstName: { type: "string" },
    lastName: { type: "string", optional: true },
    age: { type: "number", optional: true },
  }

const TestForm = () => {
  
  const {
    values,
    errors,
    onChange,
    onSubmit,
  } = useForm(initialState, schema)

  return (
    <div>
      <h1>New User</h1>
      <div>{JSON.stringify(errors)}</div>
      <form onSubmit={onSubmit} >
        <label>First name</label>
        <input type="text" name="firstName" onChange={onChange} value={values.firstName} />
        <label>Last name</label>
        <input type="text" name="lastName" onChange={onChange} value={values.lastName} />
        <label>Age</label>
        <input type="text" name="age" onChange={onChange} value={values.age} />
        <button type="submit">Submit</button>
      </form>
    </div>
  )
}

export default TestForm

There's an error that prevent field to change its value.

from react-use.

streamich avatar streamich commented on March 28, 2024

What API do you imagine for that?

from react-use.

revskill10 avatar revskill10 commented on March 28, 2024

@streamich I'm not sure about validation part, but for form, the api should be simple, based on standard html input types.

const { useCheckbox, useText, useImage, useRadio, useButton, useFile, 
useHidden, usePassword, useReset, useSubmit, useButton } = useForm()
const { value, setValue } = useCheckbox(defaultValue)
...

from react-use.

streamich avatar streamich commented on March 28, 2024

Maybe something like this:

const {useForm, useText, usePassword} = formHooks('my-form');

const Demo = () => {
  const state = useForm();
  const inputEmail = useText('email', 'Enter your e-mail');
  const inputPassword = usePassword('password', 'Password...');
  const onSubmit = useCallback(() => {
    // ...
  });

  return (
    <form onSubmit={onSubmit}>
      <input {...inputEmail} />
      <input {...inputPassword} />
      <button type="submit">Submit</button>
    </form>
  );
};

I don't know, it looks like there is a lot to think about.

from react-use.

brianle1301 avatar brianle1301 commented on March 28, 2024

@streamich @revskill10 I prefer this API, which provides all the validation functionalities and uses validator under the hood.

const [
    { emai: { value, errorText, isValid } },
    handleFieldChange,
    handleFieldBlur,
    handleFieldFocus,
    validateFieldAfterSubmit,
  ] = useForm({
    email: {
      value: '',
      validationRules: [
        {
          method: isEmpty,
          validWhen: false,
          errorText: 'This field should not be left empty!',
        },
        {
          method: isEmail,
          errorText: 'This field should contain an email!',
        },
      ],
    },
  });

Then just plug all the returned functions into an input

<input onChange={handleFieldChange} onFocus={handleFieldFocus} onBlur={handleFieldBlur} value={value} />

I've implemented this hook naively (source code) and the demo of the hook can be found at the bottom of my portfolio: https://brian-le.surge.sh.

I could rewrite this hook for better performance and readability and open a PR if required :)

Edit: validateFieldAfterSubmit is used to validate each field one by one after submit, for example:

const handleSubmit = useCallback(
    async e => {
      e.preventDefault();

      if (!validateFieldAfterSubmit('email')) return;

      try {
        // async code here
      } catch (err) {
        setFormMsg('Oops, something went wrong');

        return;
      }

      setFormMsg('Success!');
    },
    [validateFieldAfterSubmit],
  );

from react-use.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.