@sutiles/forumu

React Forumu

Simple and powerful form handler for React

Important

At the moment, this library can only be used as a react hook.

Sections

• Installation
• Setup

Installation

Install as package with npm:

npm install @sutiles/forumu

Setup

Example

import React from "react";
import { useForumu } from "@sutiles/forumu";

export default function Login() {
  const { fields, props } = useForumu({
    initValues: {
      email: "",
      password: "",
    },
    onSubmit: (fields, event) => {
      console.log(fields.email, fields.password, event)
    }
  });

  return (
    <form {...props.form}>
      <input type="text" name="email" id="email" {...props.input} />
      <input type="text" name="password" id="password" {...props.input} />
      <button type="submit">Login</button>
    </form>
  );
}

Settings

Key	Type	Required	Description
initValues	object	Yes	Initial values of fields.
onSubmit	function	Yes	Callback to be called when the form's submit is fired. Receives two arguments, fields and event.
onChange	function	No	Callback to be called when change event is fired. Receives current event as argument.
validator	function	No	Callback to be called when values of fields has been changed or when the form's submit event is fired. Receives fields and errors as arguments.
filter	function	No	Function for input data validation, if it returns false, the fields will not be updated. Receives entry and event as arguments.
preventError	boolean	No	Prevent onSubmit callback if it contains errors. By default it is set to true.
discriminate	boolean	No	Assigns the value of the fields depending on the type of input. If it is of type checkbox, the assigned value will be boolean, if it is text it will be of type string. By default it is set to true.

Values

Key	Type	Description
fields	object	All field values.
touched	object	All touched fields.
errors	object	All errors fields.
resetForm	function	Reset form fields, receives field keys as parameters.
props	object	Contains the respective form and input props.