baseui-final-form

Adapter between react-final-form and baseui.

Prerequisites

• baseui >= 6.4.0 (peer dependency)
• react and react-dom >= 16.7.0 (peer dependency)
• node >= 10.15.0 (for development)
• yarn >= 1.13.0 (for development)

Usage

Assuming you already have react, baseui and react-final-form:

yarn add baseui-final-form

If you don't:

yarn add react react-dom baseui
yarn add react-final-form final-form

Sample component:

import * as React from 'react';
import {Button} from 'baseui/button';
import {RadioGroup} from 'baseui-final-form';
import {Field, Form} from 'react-final-form';

const MyComponent = () => {
  return (
    <Form
      onSubmit={() => {
        // do something
      }}
      initialValues={{fruit: 'apple'}}
      render={({handleSubmit, pristine, invalid}) => (
        <form onSubmit={handleSubmit}>
          <Field
            name="fruit"
            component={RadioGroup}
            caption="Please select a fruit"
            label="My favorite fruit"
            options={[
              {id: 'apple', label: 'Apple'},
              {id: 'avocado', label: 'Avocado'},
              {id: 'kiwi', label: 'Kiwi', disabled: true},
              {id: 'peach', label: 'Peach'},
              {id: 'pineapple', label: 'Pineapple'},
            ]}
            overrides={{
              RadioMark: {
                style: ({$theme}) => ({borderColor: $theme.colors.positive}),
              },
            }}
          />

          <Button type="submit" disabled={pristine || invalid}>
            Submit
          </Button>
        </form>
      )}
    />
  );
};
export default MyComponent;

How this works?

This library wraps the corresponding baseui's components under the hood:

When you import from baseui-final-form	How baseui-final-form imports from baseui?
import {Input} from 'baseui-final-form';	import {Input} from 'baseui/input';
import {Checkbox} from 'baseui-final-form';	import {Checkbox} from 'baseui/checkbox';
import {CheckboxGroup} from 'baseui-final-form';	import {Checkbox} from 'baseui/checkbox';
import {NativeSelect} from 'baseui-final-form';
import {RadioGroup} from 'baseui-final-form';	import {RadioGroup, StyledRadio} from 'baseui/radio';
import {Select} from 'baseui-final-form';	import {Select} from 'baseui/select';
import {Slider} from 'baseui-final-form';	import {Slider} from 'baseui/slider';
import {Textarea} from 'baseui-final-form';	import {Textarea} from 'baseui/textarea';
import {Toggle} from 'baseui-final-form';	import {Checkbox} from 'baseui/checkbox';

If you want to pass in additional props, such as disabled, to the underlying baseui component, can you do it this way:

const form = () => {
  return (
    <Form
      onSubmit={}
      render={({handleSubmit, pristine, invalid}) => (
        <form onSubmit={handleSubmit}>
          <Field
            name="ssn"
            component={Input}
            disabled
          />
        </form>
      )}
    />
  );
};

This includes the overrides prop.

Overriding components of baseui

You can override the component wrapped by baseui-final-form using the overrides prop.

const MyComponent = () => {
  return (
    <Form
      onSubmit={() => {}}
      initialValues={{fruit: 'apple'}}
      render={({handleSubmit, pristine, invalid}) => (
        <form onSubmit={handleSubmit}>
          <Field
            name="fruit"
            component={RadioGroup}
            label="My favorite fruit"
            options={[
              {id: 'apple', label: 'Apple'},
              {id: 'avocado', label: 'Avocado'},
              {id: 'kiwi', label: 'Kiwi', disabled: true},
              {id: 'peach', label: 'Peach'},
              {id: 'pineapple', label: 'Pineapple'},
            ]}
            overrides={{
              RadioMark: {
                style: ({$theme}) => ({borderColor: $theme.colors.positive}),
              },
            }}
          />
        </form>
      )}
    />
  );
};

Development

Clone from git

git clone [email protected]:kahwee/baseui-final-form.git
cd baseui-final-form

Setup dev packages with yarn.

yarn
yarn storybook

Go to http://localhost:6006 to view storybook.

Links

• View in Storybook

License

MIT