Forms-hook NPM

forms-hook

A custom react hook based form management library built to simplify the way forms are handled. Does not interfere in any way with your default elements. Does not override any default functionality. All behaviour of the UI elements is completely user controlled. This allows for high customisability and more control over your components.

Features

Built with performance and simplicity in mind
Controlled form validation
Ultra lightweight (1kB gzipped) without any dependency
Allows type checking with FLOW support
Allows both HTML5 validations and JS validations
Works with any third party / UI Library
Compatible with React Native
Support browser native validation

Install

\$ npm i forms-hook

Live Demo

CodeSandbox

Quickstart

import React from 'react';
import { useForm, generateSchema } from 'forms-hook';

const formSchema = {
  firstName: generateSchema('text', false),
  lastName: generateSchema('text'),
  age: generateSchema('number')
};

function App() {
  const { schema, setValue, onFormSubmit } = useForm(formSchema); // initialise the hook

  const handleSubmit = data => {
    console.log(data);
  };

  handleChange = ({ target: { name, value } }) => {
    setValue(name, value);
  };

  return (
    <form onSubmit={onFormSubmit(handleSubmit)}>
      <input {...schema.firstName} onChange={handleChange} />
      <input {...schema.lastName} onChange={handleChange} />
      {schema.lastName.error}
      <input {...schema.age} onChange={handleChange} />
      {schema.age.error}
      <input type="submit" />
    </form>
  );
}

API Reference

const {
  schema,
  isSubmitDisabled,
  setValue,
  setValueNoValidate,
  onFormSubmit,
  resetForm
} = useForm(initialSchema);

where

schema : FormSchema the schema for your form (type specified below)
isSubmitDisabled : boolean returns false if form has no errors and passes all validations
setValue : (name,value)=>void to set the value for a particular input in the form
onFormSubmit : (callback)=>void passes the form data to your callback function
resetForm : ()=>void resets the form to its initial state.

Schema Generator Function

generateSchema = (
  type: string,
  required?: boolean = true,
  placeholder?: string,
  validations?: InputValidations //types defined below
) => InputSchema; //types defined below

Generates the input schema for individual form elements. mandatory parameter is type which can be "text", "number"..etc

You can use the provided type constants to avoid typos. Ex:

import { useForm, generateSchema, SCHEMA_TYPE, VALIDATIONS} from 'forms-hook';
 
const formSchema = { 
  userName: generateSchema(SCHEMA_TYPE.TEXT,true,"username",VALIDATIONS.USERNAME),
  password: generateSchema(SCHEMATYPE.PASSWORD,true,"password",VALIDATIONS.PASSWORD) 
  }

The second parameter is the required attribute. It is set to true by default.
The third parameter is the placeholder. it is send to empty by default.
The final parameter is the validations object. (defined in types below)

TYPES

type InputValidations = {
  minValue?: number,
  maxValue?: number,
  pattern?: any,
  minLength?: number,
  maxLength?: number,
  minDate?: string | number,
  maxDate?: string | number
};

type InputSchema = {
  name: string,
  required: boolean,
  value: any,
  type: string,
  error: string,
  placeholder?: string,
  validations?: InputValidations
};

type FormSchema = {
  [key: string]: InputSchema
};

Contribute

If you find any bugs/issues feel free to create a github issue
If you want a feature request or want to contribute directly, please do so in the below repository.
GitHub