Need help with informed?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

joepuzzo
593 Stars 65 Forks MIT License 823 Commits 38 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

Informed

Go to live examples, code and docs!

npmversion

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, multistep forms, array fields, 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, Input, Select, Checkbox, Relevant, FormState } from 'informed';

const onSubmit = data => console.log(data);

const ExampleForm = () => (

Model S Model 3 Model X Model Y values.married}> Submit );

Hook things up yourself via hooks. ( custom form element and inputs )

import { useForm, useField, Relevant, FormState } from 'informed';

// Step 1. Build your form component ---------------------

const Form = ({ children, ...props }) => { const { formController, render, userProps } = useForm(props);

return render(

{children} ); };

// Step 2. Build your input components --------------------

const Input = ({ label, ...props }) => { const { render, informed } = useField({ fieldType: 'text', ...props });

return render( ); };

const Checkbox = ({ label, ...props }) => { const { render, informed } = useField({ fieldType: 'checkbox', ...props });

return render( ); };

const Select = ({ label, children, ...props }) => { const { render, informed } = useField({ fieldType: 'select', ...props });

return render( ); };

// Step 3. Build your forms! ---------------------------

const onSubmit = data => console.log(data);

const ExampleForm = () => (

Model S Model 3 Model X Model Y values.married}> Submit );

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, useField } from 'informed';

const ErrorText = props => { const { fieldState, fieldApi, render, ref, userProps } = useField(props);

const { value } = fieldState; const { setValue, setTouched } = fieldApi; const { onChange, onBlur, ...rest } = userProps; return render( <react.fragment> { setValue(e.target.value); if (onChange) { onChange(e); } }} onBlur={e => { setTouched(true); if (onBlur) { onBlur(e); } }} style={fieldState.error ? { border: 'solid 1px red' } : null} /> {fieldState.error ? ( {fieldState.error} ) : null} </react.fragment> ); };

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

Submit

;

Create dynamic forms

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

values.married === 'yes'}> Submit

;

Create dynamic forms with dynamic arrays ! Mind Blown!

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

const DynamicArrays = () => { return (

{({ add, reset }) => ( <> Reset Add <arrayfield.items> {({ remove, field, reset, values, setValue }) => ( )} </arrayfield.items> > )} 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

;

Render forms with JSON schema

import { Form, SchemaFields } from 'informed';

const schema = { type: 'object', required: ['name'], properties: { name: { type: 'string', title: 'First name', 'ui:control': 'input' }, married: { type: 'string', title: 'Are you married?', enum: ['yes', 'no'], 'ui:control': 'radio' } }, allOf: [ { if: { properties: { married: { const: 'yes' } }, required: ['married'] }, then: { properties: { spouse: { type: 'string', title: 'Spouse name', 'ui:control': 'input' } } } } ] };

const Schema = () => (

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.