Skip to content

Forms should be simple, should not assume anything about style or paradigm. This is an attempt at that,

Notifications You must be signed in to change notification settings

devceline/react-crunch-form

Repository files navigation

React Crunch Form

A library designed for you to crunch out a form really fast

NPM JavaScript Style Guide

Install

npm install --save react-crunch-form
yarn install react-crunch-form

Usage

import CrunchForm, {
  CrunchInput,
  CrunchInputValidationDisplay,
  CrunchSubmit
} from 'react-crunch-form';

const getLookup = () => {
  return new Promise<{ [k: string]: string }>((resolve) => {
    setTimeout(() => {
      resolve({
        foo: 'bar',
        baz: 'bor'
      });
    }, 300);
  });
};

const App = () => {
  getLookup().then((v) => console.log({ v }));

  return (
    <CrunchForm className='main' onSubmit={(body) => console.log(body)}>
      <div>
        <CrunchInput
          validators={[
            (v) => {
              if (!v) return 'required';
              if (v.length > 5) return 'TOO LONG';
              return false;
            }
          ]}
          field='something'
          type='textarea'
        />
        <CrunchInputValidationDisplay
          className='validation-error'
          field='something'
        />
      </div>

      <div>
        <h6>Lookup coming from object</h6>
        <CrunchInput
          field='something2'
          type='select'
          lookupFields={{
            something: 2,
            somethingelse: 4
          }}
        />
      </div>

      <div>
        <h6>Lookup coming from a promise</h6>
        <CrunchInput
          field='something3'
          type='select'
          getLookupFieldsAsync={getLookup}
        />
      </div>

      <div>
        <h6>
          Native html date picker.
          <span style={{ color: 'red', margin: '0 1em' }}>
            Does not work on Safari or IE
          </span>
        </h6>
        <CrunchInput type='date' field='datefield' />
      </div>
      <div>
        <h6>
          Native html time picker.
          <span style={{ color: 'red', margin: '0 1em' }}>
            Does not work on Safari or IE
          </span>
        </h6>
        <CrunchInput type='time' field='timefield' />
      </div>
      <CrunchSubmit>Submit</CrunchSubmit>
    </CrunchForm>
  );
};

License

MIT © shaheensarafa

About

Forms should be simple, should not assume anything about style or paradigm. This is an attempt at that,

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published