React UseForm

The react hook useform controller

📦 Install

npm i @olapat/react-useform

Basic

import React, { useCallback } from 'react'
import { useForm, Form } from '@olapat/react-useform'

const Basic = () => {
  const form = useForm({
    initialValues: {
      username: '',
      password: '',
      repassword: ''
    },
    rules: {
      username: {
        required: true
      },
      password: {
        required: true,
        isAllowed: {
          func: (value) => /^(?=.*d)(?=.*([a-z]|[ก-๙]))(?=.*[A-Z])(?=.*[a-zA-Zก-๙]).{8,}/.test(value),
          msg: 'Password is not format'
        }
      },
      repassword: {
        required: true,
        isAllowed: {
          func: (value, values) => value === values.password,
          msg: 'Password is not match'
        }
      }
    }
  })

  const { values, handlerChange, errors } = form

  const handlerSubmit = useCallback((values) => {
    console.table(values);
  }, [])

  return (
    <Form form={form} handlerSubmit={handlerSubmit}>
      <fieldset>
        <legend>Username</legend>
        <input
          type='text'
          name='username'
          onChange={(event) => handlerChange(event.target.name, event.target.value)}
          value={values.username}
        />
        <br />
        <span>{errors.username}</span>
      </fieldset>
      <fieldset>
        <legend>Password</legend>
        <input
          type='password'
          name='password'
          onChange={(event) => handlerChange(event.target.name, event.target.value)}
          value={values.password}
        />
        <br />
        <span>{errors.password}</span>
      </fieldset>
      <fieldset>
        <legend>Confirm Password</legend>
        <input
          type='password'
          name='repassword'
          onChange={(event) => handlerChange(event.target.name, event.target.value)}
          value={values.repassword}
        />
        <br />
        <span>{errors.repassword}</span>
      </fieldset>
      <button type='submit'>
        Submit
      </button>
    </Form>
  )
}

Props

UseForm

| Props | Options | Required | Description | | ------------------------ | --------------------------------------------------------------------- | -------- | ------------------------------------------- | | initialValues | Object: {[key: string]: any} | true | Set Initial Values Form | | rules | Object: Rules | true | Set Initial Rules Form | | blackList | String[] | false | Field names is set to disabled | | whiteList | String[] | false | Field names is set to enabled | | onValuesUpdate | Function | null | Callback on values form updated |

Controller UseForm

| Props | Options | Description | | ------------------------ | --------------------------------------------------------------------- | -------------------------------- | | values | Object | Values form | | handlerChange | (string: name, value: any) => void | Function to change values | | errors | Object | Errors form | | setValues | (newValues: Object) => void | Function to set values form | | setRules | (newRules: Object) => void | Function to set rules form | | setErrors | (newErrors: Object) => void | Function to set errors form | | handlerReset | (newInitValues: Object) => void | Function to reset values |

Rules

| Props | Options | Description | | ------------------------ | --------------------------------------------------------------------- | -------------------------------- | | required | boolean or string (Message on invalid) | Rule set field to required | | isAllowed | Object: IsAllowed | Rule set field to allow value |

IsAllowed

| Props | Options | Description | | ------------------------ | --------------------------------------------------------------------- | -------------------------------- | | func | (value, values) => boolean | Function is checking value | | msg | String | Message on value not allowed |

License

Copyright (c) 2021-present Olapat. See LICENSE for details.