informed

by joepuzzo

joepuzzo / informed

A lightweight framework and utility for building powerful forms in React applications

444 Stars 59 Forks Last release: Not found MIT License 629 Commits 151 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Informed

Go to live examples, code and docs!

npmversion Discord Build Status Coverage Status Minzipped-Size

Introduction

Say hello to the best react form library you have ever used! Informed is an extensive, simple, and efficient solution for creating basic to complex forms in react. Out of the box you get the ability to grab and manipulate values, validate fields, create custom inputs, and much much more!

Oh and YES WE USE HOOKS!

Getting Started

Install with npm
npm install --save informed

Create a Simple Form

import { Form, Text } from 'informed';

const submit = values => window.alert(Form successfully submitted with ${JSON.stringify(values)});

Submit

Create a Simple Form With Validation

import { Form, Text } from 'informed';

const validate = value => { if (!value || value.length < 5) return 'Field must be at least five characters'; };

const submit = values => window.alert(Form successfully submitted with ${JSON.stringify(values)});

Submit

Create a Complex Form

import { Form, Text, Option, Select, Checkbox, Scope, TextArea, RadioGroup, Radio } from 'informed';


Submit

Hook things up yourself via the
useForm
hook

import { Form, Text } from 'informed';

const validate = value => { if (!value || value.length < 5) return 'Field must be at least five characters'; };

const onSubmit = values => window.alert(Form successfully submitted with ${JSON.stringify(values)});

const UseFormExample = () => {

const { formController, formState, render } = useForm({ onSubmit });

return render(

Submit
        
          {JSON.stringify(formState, null, 2)}
        
      
); }

Access Form State with Hooks!

import { Form, Text, useFormState } from 'informed';

const ComponentUsingFormState = () => { const formState = useFormState(); return (

      {JSON.stringify(formState, null, 2)}
    
); };

Submit
Component using formState:

Control Form via FormApi through the use of Hooks!!

import { Form, Text, useFormApi } from 'informed';

const ComponentUsingFormApi = () => { const formApi = useFormApi(); return ( formApi.setValue( 'name', Math.floor(Math.random() * Math.floor(Number.MAX_SAFE_INTEGER)))}> Random ); };

Submit
Component using formApi:

Create custom inputs with built in validation!!

import { Form, BasicText, asField } from 'informed';

const validate = value => { return !value || value.length < 5 ? 'Field must be at least five characters' : undefined; };

const ErrorText = asField(({ fieldState, ...props }) => ( <react.fragment> {fieldState.error ? ( {fieldState.error} ) : null} </react.fragment> ));

Submit

;

Create dynamic forms

import { Form, Text, RadioGroup, Radio } from 'informed';

{({ formState }) => ( <react.fragment> {formState.values.married === 'yes' ? ( ) : null} Submit </react.fragment> )}

WARNING: writing this in the above way is fine, it works they way we expect and gets us what we need... BUT! There is a better way!

import { Form, Text, RadioGroup, Radio, useFieldState } from 'informed';

const Spouse = () => { const { value: married } = useFieldState('married'); return married === 'yes' ? : null; };

Submit

Writing code the second way can typically save excess rendering! And, it looks much cleaner.

Create dynamic forms with dynamic arrays ! Mind Blown!

import { Form, Text, ArrayField } from 'informed';

const DynamicArrays = () => {

return (

{({ add, fields }) => ( <> Add Sibling {fields.map(({ field, key, remove }, i) => ( ))} > )} Submit
); };

Perform validation via Yup!

import { Form, Text } from 'informed';
import * as Yup from 'yup'; 

const SignupSchema = Yup.object().shape({ firstName: Yup.string() .min(2, 'Too Short!') .max(50, 'Too Long!') .required('Required'), lastName: Yup.string() .min(2, 'Too Short!') .max(50, 'Too Long!') .required('Required'), email: Yup.string() .email('Invalid email') .required('Required'), });

Submit

Perform field level Yup validation!

import { Form, Text } from 'informed';
import * as Yup from 'yup'; 

const SignupSchema = Yup.object().shape({ firstName: Yup.string() .min(2, 'Too Short!') .max(50, 'Too Long!') .required('Required'), email: Yup.string() .email('Invalid email') .required('Required'), });

const lastNameSchema = Yup.string() .min(2, 'Last Name Too Short!') .max(50, 'Last Name Too Long!') .required('Last Name Required');

Submit

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.