formalization

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|

License

BSD-3 © aposoftworks