formalization
    TypeScript icon, indicating that this package has built-in type declarations

    1.4.25 • Public • Published

    formalization

    NPM JavaScript Style Guide Build Status npm Support

    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

    Install

    npm i formalization

    DownloadsWeekly Downloads

    98

    Version

    1.4.25

    License

    BSD-3-Clause

    Unpacked Size

    116 kB

    Total Files

    32

    Last publish

    Collaborators

    • darklight98