Pebble-Formik

Pebble form components wrapped in a Formik-friendly wrapper.

Development

See the Development guide for instructions on how to run Pebble-Formik locally for development.

Installation and Usage

To use Pebble-Formik, add the package to your package.json using your package manager of choice.

For yarn users:

yarn add @istreamplanet/pebble-formik @istreamplanet/pebble node-sass react-router-dom

For npm users:

npm install @istreamplanet/pebble-formik formik @istreamplanet/pebble node-sass react-router-dom --save

Include the Pebble foundation stylesheet in your layout template. This is usually added at the outer most content wrapper of an app:

import '@istreamplanet/pebble/dist/Styles/foundation.scss';

Import the components into your application:

import { FieldSelect, FormCard, FormLayoutRow } from '@istreamplanet/pebble-formik';

Then add them in your React component as you would any other:

The FormCard component is a great all-in-one form wrapper component. Please try it before building a Formik form from scratch.

const MyComponent = () => {
  const validate = (values) => ({
    foo: values > 10,
  });

  return (
    <Block>
      <FormCard initialValues={initialValues} onSubmit={handleSubmit} validate={validate}>
        <FormLayoutRow>
          <FieldNumber id="foo" name="foo" label="Foo" />
        </FormLayoutRow>
      </FormCard>
    </Block>
  );
}

Components

FormCard

FormCard was designed to be an all-in-one form wrapper with a submit and reset button in the footer. It includes a prompt message if the user tries to navigate away from.

FormGroup

FormGroup creates a visual grouping of your form components and has options for a title: string | node, and a subtitle: string. If you pass in true for the collapsible prop, the group turns into a collapsible panel.

Form Components

Form components are just Pebble components in a Formik wrapper. Where Pebble components have value these get their values through the name prop. Match the key of the value you want to the name.

Example

// incoming data
{
  description: 'Cat is on a diet',
}

<FieldText name='description'>

• FieldCheckbox / PebbleComponent
• FieldCheckboxInAGroup
• FieldDateTime / PebbleComponent
• FieldNumber / PebbleComponent
• FieldRadioGroup / PebbleComponent
• FieldSelect / PebbleComponent
• FieldText / PebbleComponent
• FieldTextDebounce / PebbleComponent
• FieldToggle / PebbleComponent

Error Components

Formats error messages in a standard, easy-to-read manner.

• ErrorMessage : Has a small prop that fits on a single form row.
• ErrorSummary : Is built in to the bottom of FormCard.

License

Copyright © 2021 iStreamPlanet Co., LLC

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License.