Formalization NPM

formalization

npm

A simple and straight-foward wrapper around forms that works as you would expect. Fully customizable and able to handle files and images, using formdata.

Install

npm install --save formalization

Usage

import * as React from 'react';

import { Form, Input, Group, Text, When, Value } from 'formalization';

export default function App () {
	const onSubmit = (data) => {
		//handle data
	};

	const validateEmail = (value) => {
		if (/*validation fails*/) {
			return "Email not valid";
		}
	}

    return (
		<Form onSubmit={onSubmit}>
			<Group name="user">
				<Input name="email" validates={validateEmail} />
				<div className="error-message">
					<Error name="email" />
				</div>

				<Input name="name" />
			</Group>

			<Toggle name="newsletter" />

			<When name="newsletter">
				Thank you for signing our newsletter <Value pathname="user.name" />
			</When>

			<Text name="message" />
		</Form>
    );
}

Components

Form

The core component of the form, this handles, gathers and set the data. If you return false from the onChange/onSubmit, it will clear the form, if you return any data, it will adjust the form accordling, if you return null, nothing happens.

props

name	requirement	type	description
data	optional	Object, function (newValue)	A useState array that will be used to interact with an outer object, don't switch between using a controlled state data and uncontrolled
initialData	optional	Object	Initial state of the form data
file	optional	boolean	Changes the result of the onChange/onSubmit to a FormData
onChange	optional	function (data)	Function that returns the data when the form is updated
onSubmit	required	function (data)	Function that returns the data when the form is submitted
onError	optional	function (data)	Function that returns errors messages given
validateOnChange	optional	boolean	Enable callback calls and updates on change, instead of submit

Group

Group component allow you to nest data inside of objects

props

name	requirement	type	description
name	required	string	The key that this object will be recognized inside of the form result

Error

Displays error messages from the component linked

props

name	requirement	type	description
name	required	string	The name that this component will print errors from

Input | Text | File | Select | Toggle

The form input that handles each type in a specific way, since toggle has some "peculiarities", we handle him separatedly from the input.

props

name	requirement	type	description
name	required	string	The key that this object will be recognized inside of the form result
onChange	optional	function (data, htmlnode)	Callback that let's you know when this component has changed value
filters	optional	Array<function (data) => any>	An array that can modify the value before it's handled to the form itself

Wrapper

In case you are using another package or you want to build a component that interacts with the form, you can use the wrapper for this. You can use the filters prop to alter the value cleanly.

props

name	requirement	type	description
name	required	string	The key that this object will be recognized inside of the form result
value	required	any	The value that will be inserted into the form
setValue	required	function (newValue)	This is required so formalization can set the data innerly
filters	optional	Array<function (data) => any>	An array that can modify the value before it's handled to the form itself

Value

You can use this component to display a value from inside of the form without having too much issue about it. You need to use name or pathname.

props

name	requirement	type	description
name	optional	string	The name of the key relative to the position in the form
pathname	optional	string	The absolute path to the key and it's name
default	optional	any	Default value to be displayed in case there is a null value
filters	optional	Array<function (data) => any>	An array that can modify the value before it's handled to the form itself

When

This component allows you to conditionally display it's children based on the condition given. You need to use name or pathname.

props

name	requirement	type	description
name	optional	string	The name of the key relative to the position in the form
pathname	optional	string	The absolute path to the key and it's name
when	required	boolean or function (value) => boolean	The condition that prevents the children from appearing