Naughty Pinching Mannequins

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

    1.1.0 • Public • Published

    Formaction

    A library for react forms management

    100% code coverage with Jest

    NPM JavaScript Style Guide

    Install

    npm install --save formaction
    yarn add formaction

    Usage

    Basically the form take a submit handler, then call the handler with form state, if all validations pass.

    import React from 'react'
     
    import { Form, Field, isEmail } from 'formaction';
     
    class Example extends React.Component {
      handleSubmit(values) {
        console.log(values);
      }
     
      render () {
        return (
          <Form
            initialValues={{ 'Forms with fun': 'hola' }}
            onSubmit={values => this.handleSubmit(values)}
          >
            <Field
              name='name'
              type='text'
            />
     
            <Field
              name='labeledField'
              type='email'
              label='Email'
              validators={[isEmail]}
            />
     
            <button type='submit'>Click me</button>
          </Form>
        );
      }
    }

    Can I controll my form?

    Yes, you can pass state and a onChange handler to form, and controll it by yourself. Knows what it means? Exactually, if we need it, we can store the form state in redux. It's still running validations before successfully submitting the form.

    import React from 'react'
     
    import { Form, Field, isEmail } from 'formaction';
     
    class Example extends React.Component {
      constructor() {
        super();
     
        this.state = {
          form: {}
        }
      }
     
      handleSubmit(values) {
        console.log(values);
      }
     
      handleChange(form) {
        this.setState({
          form 
        });
      }
     
      render () {
        return (
          <Form
            initialValues={{ 'name': 'Gabriel Oak' }}
            onSubmit={values => this.handleSubmit(values)}
            onChange={values => this.handleChange(values)}
            values={this.state.form}
          >
            <Field
              name='name'
              type='text'
            />
     
            <Field
              name='email'
              type='email'
              validators={[isEmail]}
            />
     
            <button type='submit'>Click me</button>
          </Form>
        );
      }
    }

    Creating a personalised component

    Fild component may have a renderComponent property, it takes a component, that component will be rendered rather than native html input. Field will pass by props all the native input props, like value and onChange, and a meta object. Meta contains info about validators errors and if field has been touched.

    import React from 'react'
     
    import { Form, Field, isRequired } from 'formaction';
     
    const renderSelect = props => {
      const { input, meta: { touched, errors } } = props;
     
      return (
        <div>
          <select
            {...input}
          >
            <option value='happiness'>Be happy</option>
            <option value='cool'>Be coll</option>
          </select>
          <div>
            {touched && errors[0]}
          </div>
        </div>
      );
    }
     
    class Example extends React.Component {
     
      handleSubmit(values) {
        console.log(values);
      }
     
      render () {
        return (
          <Form
            onSubmit={values => this.handleSubmit(values)}
          >
            <Field
              name='someCoolLabel'
              renderComponent={renderSelect}
              validators={[isRequired]}
            />
     
            <Field
              name='name'
              type='email'
              validators={[isEmail]}
            />
     
            <button type='submit'>Click me</button>
          </Form>
        );
      }
    }

    Validators:

    Validators are just pure functions, they receive input value, and do something, and then return a string containing the error, or just undefined. You can build your own validators.

    export const isEmail = (value: string) => (
      !value || !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)
        ? 'This field must be of type email'
        : undefined
    );
     
    export const isNumber = (value: any) => (
      !value || !isNaN(+value)
        ? undefined
        : 'This field must be of type number'
    );
     
    export const isRequired = (value?: any) => (
      value || typeof value === 'number'
        ? undefined
        : 'This field is mandatory'
    );
     
     

    And yes, it works with MATERIAL-UI

    import React from 'react';
    import { Form, Field } from 'formaction';
    import { TextField } from '@material-ui/core';
     
     
    const renderTextField = props => {
      const {
        input,
        meta: { touched, error },
        ...rest
      } = props;
     
      return (
        <TextField
          {...input}
          {...rest}
          error={touched && error[0]}
          helperText={touched && error[0]}
          className="Field"
        />
      );
    }
     
    class Example extends React.Component {
     
      handleSubmit(values) {
        console.log(values);
      }
     
      render () {
        return (
          <Form
            onSubmit={values => this.handleSubmit(values)}
          >
            <Field
              name='user'
              label="Usuário"
              variant="outlined"
              className='poweeeeeeer'
              renderComponent={renderTextField}
            />
     
            <button type='submit'>Click me</button>
          </Form>
        );
      }
    }
     

    License

    MIT © gabriel-Oak

    Keywords

    none

    Install

    npm i formaction

    DownloadsWeekly Downloads

    1

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    77.2 kB

    Total Files

    20

    Last publish

    Collaborators

    • gabriel-oak