withform module

withform is an easy to use lib to help managing simple form in your react application.

withform is a HOC component.

Installation

  npm install --save @thecodeisgreen/withform

Example

  import React, { useState } from 'react';

  import withForm from '../index';

  import MyInput from './MyInput';

  const useTest = (form) => {
    const [values, setValues] = useState({});

    const onSubmit = (e) => {
      e.preventDefault();
      setValues(form.values());
    };

    return {
      values,
      onSubmit
    };
  };

  const useAddExtraField = () => {
    const [showExtraField, setShowExtraField] = useState(false);

    const onAddExtraField = () => {
      setShowExtraField(true);
    };

    return {
      showExtraField,
      onAddExtraField
    };
  };

  const Test = ({
    form
  }) => {
    const {
      onSubmit,
      values
    } = useTest(form);

    const {
      showExtraField,
      onAddExtraField
    } = useAddExtraField();

    return (
      <div style={{ width: '300px' }}>
        <form onSubmit={onSubmit}>
          <h3>withForm</h3>
          {
            form.manageField(
              'email', 
              {
                defaultValue: '', 
                isValid: v => {
                  console.log('fsdkhfksdj');
                  return v.length > 6;
                },
                isUpdated: e => {
                  console.log('onChange');
                }
              }
            )(<input style={{ width: '100%' }} placeholder="email"/>)
          }
          <br/>
          {form.manageField('password', { defaultValue: '', isValid: v => v.length > 6 })(<input style={{ width: '100%' }} type="password" placeholder="mot de passe"/>)}
          <br/>
          {form.manageField('about', { defaultValue: '', valueKey: 'content', isValid: v => v.length > 6 })(<MyInput style={{ width: '100%' }} placeholder="about you"/>)}
          <br/>
          {form.manageField(
            'extra', 
            { 
              defaultValue: '', 
              valueKey: 'content', 
              isValid: v => v.length > 6,
              show: () => showExtraField,
              cssDisplay: 'flex'
            })(<MyInput style={{ width: '100%' }} placeholder="extra"/>
          )
          }
          <button onClick={onAddExtraField}>Ajouter un champ</button>
          <button type="submit">Ok</button>
        </form>
        <div>
          {JSON.stringify(values)}
        </div>
      </div>
    );
  };

  export default withForm(Test);