@blackbox-vision/rff-fields v0.1.0

RFF Fields

React Final Form Custom Fieds

Table of contents

• Use Case
• Compatibility
• Installation
  • NPM
  • YARN
• Example Usages
• Component APIs
  • ConditionalField
  • DependentField
  • WhenFieldChanges
  • PrefixedField
• Issues
• Contributing
• License

Use Case

You're working with react-final-form and you need common use cases like dependent fields, watch a field for changes, use prefix on fields.

Compatibility

Since this package uses hooks under the hood, you need at least a minimum React version of 16.8.0.

Installation

YARN

yarn add @blackbox-vision/rff-fields

NPM

npm install --save @blackbox-vision/rff-fields

Example Usages

ConditionalField

Use ConditionalField when you want to render fields given a condition:

import React from 'react';
import { Form, Field } from 'react-final-form';
import { ConditionalField } from '@blackbox-vision/rff-fields';

const MyForm = () => (
  <Form onSubmit={onSubmit}>
    {({ handleSubmit, form, submitting, pristine, values }) => (
      <form onSubmit={handleSubmit}>
        <div>
          <label>First Name</label>
          <Field
            name="firstName"
            component="input"
            type="text"
            placeholder="First Name"
          />
        </div>
        <div>
          <label>Transport</label>
          <div>
            <label>
              <Field
                name="reception"
                component="input"
                type="radio"
                value="delivery"
              />{' '}
              Delivery
            </label>
            <label>
              <Field
                name="reception"
                component="input"
                type="radio"
                value="pickup"
              />{' '}
              Pickup
            </label>
          </div>
        </div>
        <Condition when="reception" is="delivery">
          <div>
            <label>Street</label>
            <Field
              name="street"
              component="input"
              type="text"
              placeholder="Street Address"
            />
          </div>
        </Condition>
        <Condition when="reception" is="pickup">
          <div>
            <label>Pickup Time</label>
            <Field name="pickupTime" component="select">
              <option />$
              {pickupTimes.map(time => (
                <option key={time} value={time}>
                  {time}
                </option>
              ))}
            </Field>
          </div>
        </Condition>
        <div>
          <label>Is it a gift?</label>
          <Field name="gift" component="input" type="checkbox" />
        </div>
        <Condition when="gift" is={true}>
          <div>
            <label>Gift Message</label>
            <Field
              name="message"
              component="textarea"
              placeholder="Gift Message"
            />
          </div>
        </Condition>
        <div className="buttons">
          <button type="submit" disabled={submitting}>
            Submit
          </button>
        </div>
      </form>
    )}
  </Form>
);

export default MyForm;

DependentField

Use DependentField when you want to render fields that need to be render after getting its data requirements from another values:

import React from 'react';
import { Form, Field } from 'react-final-form';
import { DependentField } from '@blackbox-vision/rff-fields';

const getStatesForCountry = country => {...}
const countries = [...];

const MyForm = () => (
  <Form onSubmit={onSubmit}>
    {({ handleSubmit, form, submitting, pristine, values }) => (
      <form onSubmit={handleSubmit}>
        <Field name="country" component="select">
          {countries.map(country => (
            <option key={country} value={country}>
              {country}
            </option>
          ))}
        </Field>
        <DependentField
          onChange={async ({ country }) => await getStatesForCountry(country)}
        >
          {states => (
            <Field name="state" component="select">
              {states.map(state => (
                <option key={state} value={state}>
                  {state}
                </option>
              ))}
            </Field>
          )}
        </DependentField>
        <div className="buttons">
          <button type="submit" disabled={submitting}>
            Submit
          </button>
        </div>
      </form>
    )}
  </Form>
);

export default MyForm;

WhenFieldChanges

Use WhenFieldChanges to watch a specific field value and change other field value:

import React from 'react';
import { Form, Field } from 'react-final-form';
import { WhenFieldChanges } from '@blackbox-vision/rff-fields';

const MyForm = () => (
  <Form
    onSubmit={onSubmit}
    render={({ handleSubmit, form, submitting, pristine, values, errors }) => {
      return (
        <form onSubmit={handleSubmit}>
          <WhenFieldChanges
            field="gift"
            becomes={false}
            set="giftWrap"
            to={false}
          />
          <WhenFieldChanges
            field="gift"
            becomes={false}
            set="giftCardMessage"
            to={undefined}
          />
          <div>
            <label>Is this a gift?</label>
            <Field name="gift" component="input" type="checkbox" />
          </div>
          <div>
            <label>Gift wrap?</label>
            <Field
              name="giftWrap"
              component="input"
              type="checkbox"
              disabled={!values.gift}
            />
          </div>
          <div>
            <label>Message</label>
            <Field
              name="giftCardMessage"
              component="textarea"
              disabled={!values.gift}
              placeholder="What do you want the card to say?"
            />
          </div>
          <div className="buttons">
            <button type="submit" disabled={submitting}>
              Submit
            </button>
          </div>
        </form>
      );
    }}
  />
);

export default MyForm;

PrefixedField

Use PrefixedField when you want to render fields with a prefix:

import React from 'react';
import { Form, Field } from 'react-final-form';
import {
  PrefixedField,
  PrefixedFieldProvider,
} from '@blackbox-vision/rff-fields';

const MyForm = () => (
  <Form
    onSubmit={onSubmit}
    render={({ handleSubmit, form, submitting, pristine, values }) => (
      <form onSubmit={handleSubmit}>
        <h3>Shipping</h3>
        <PrefixedFieldProvider prefix="shipping">
          <div>
            <label>Street</label>
            <PrefixedField
              name="street"
              component="input"
              type="text"
              placeholder="Street"
            />
          </div>
          <div>
            <label>City</label>
            <PrefixedField
              name="city"
              component="input"
              type="text"
              placeholder="City"
            />
          </div>
        </PrefixedFieldProvider>
        <h3>Billing</h3>
        <PrefixedFieldProvider prefix="billing">
          <div>
            <label>Street</label>
            <PrefixedField
              name="street"
              component="input"
              type="text"
              placeholder="Street"
            />
          </div>
          <div>
            <label>City</label>
            <PrefixedField
              name="city"
              component="input"
              type="text"
              placeholder="City"
            />
          </div>
        </PrefixedFieldProvider>
        <div className="buttons">
          <button type="submit" disabled={submitting || pristine}>
            Submit
          </button>
        </div>
        <pre>{JSON.stringify(values, 0, 2)}</pre>
      </form>
    )}
  />
);

export default MyForm;

Component APIs

ConditionalField

The ConditionalField component has the following props:

DependentField

The DependentField component has the following props:

WhenFieldChanges

The WhenFieldChanges component has the following props:

Prefix

The Prefix Field API is composed by 2 components PrefixedFieldProvider and PrefixedField:

PrefixedFieldProvider

The PrefixedFieldProvider component has the following props:

PrefixedField

The PrefixedField component has all the supported props from final-form Field component API.

Issues

Please, open an issue following one of the issues templates. We will do our best to fix them.

Contributing

If you want to contribute to this project see contributing for more information.

License

Distributed under the MIT license. See LICENSE for more information.