Naturally Pacifist Marsupials

    baseui-final-form

    5.0.0 • Public • Published

    baseui-final-form

    Adapter between react-final-form and baseui.

    npm CircleCI codecov

    Prerequisites

    • baseui >= 9.115.3 (peer dependency)
    • react and react-dom >= 16.12.0 (peer dependency)
    • node >= 12.20.0 (for development)
    • yarn >= 1.19.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 {AdaptedRadioGroup} from 'baseui-final-form/radio-group';
    import {adaptToInput} from 'baseui-final-form/input';
    import {adaptToFormControl} from 'baseui-final-form/form-control';
    import {Field, Form} from 'react-final-form';
    import {MaskedInput} from 'baseui/input';
    import {FormControl} from 'baseui/form-control';
    
    const MyComponent = () => {
      return (
        <Form
          onSubmit={() => {
            // do something
          }}
          initialValues={{fruit: 'apple'}}
          render={({handleSubmit, pristine, invalid}) => (
            <form onSubmit={handleSubmit}>
              <Field
                name="fruit"
                component={AdaptedRadioGroup}
                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}),
                  },
                }}
              />
    
              <Field
                name="phoneNumber"
                caption="This is MaskedInput from Base Web"
                render={props => {
                  return (
                    <FormControl {...adaptToFormControl(props)}>
                      <MaskedInput
                        {...adaptToInput(props)}
                        placeholder="Phone number"
                        mask="(999) 999-9999"
                      />
                    </FormControl>
                  );
                }}
              />
    
              <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 {AdaptedInput} from 'baseui-final-form/input'; import {Input} from 'baseui/input';
    import {AdaptedCheckbox} from 'baseui-final-form/checkbox'; 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 {AdaptedSelect} from 'baseui-final-form/select'; import {Select} from 'baseui/select';
    import {AdaptedSlider} from 'baseui-final-form/slider'; import {Slider} from 'baseui/slider';
    import {AdaptedTextarea} from 'baseui-final-form/textarea'; import {Textarea} from 'baseui/textarea';
    import {AdaptedToggle} from 'baseui-final-form/toggle'; 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:

    import {AdaptedInput} from 'baseui-final-form/input';
    
    const form = () => {
      return (
        <Form
          onSubmit={}
          render={({handleSubmit, pristine, invalid}) => (
            <form onSubmit={handleSubmit}>
              <Field
                name="ssn"
                component={AdaptedInput}
                disabled
              />
            </form>
          )}
        />
      );
    };

    This includes the overrides prop.

    Overriding components of baseui

    If you want to override BaseWeb components, you can use the new adapt* functions supplied by baseui-final-form:

    import {adaptToFormControl} from 'baseui-final-form/form-control';
    import {adaptToRadioGroup} from 'baseui-final-form/radio-group';
    import {FormControl} from 'baseui/form-control';
    import {
      Radio as BaseuiRadio,
      RadioGroup as BaseuiRadioGroup,
    } from 'baseui/radio';
    
    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'},
                ]}
                render={props => (
                  <FormControl {...adaptToFormControl(props)}>
                    <BaseuiRadioGroup {...adaptToRadioGroup(props)}>
                      {options.map(option => (
                        <BaseuiRadio
                          value={option.id}
                          key={option.id}
                          overrides={{
                            // eslint-disable-next-line react/display-name
                            Label: ({$value}) => (
                              <Block font="font400">
                                Custom label for value: {$value}
                              </Block>
                            ),
                            RadioMarkOuter: {
                              style: ({$theme}) => ({
                                backgroundColor: $theme.colors.positive,
                              }),
                            },
                          }}
                        >
                          {option.label}
                        </BaseuiRadio>
                      ))}
                    </BaseuiRadioGroup>
                  </FormControl>
                )}
              />
            </form>
          )}
        />
      );
    };

    Development

    Clone from git

    git clone git@github.com: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

    License

    MIT

    Install

    npm i baseui-final-form

    DownloadsWeekly Downloads

    376

    Version

    5.0.0

    License

    MIT

    Unpacked Size

    211 kB

    Total Files

    149

    Last publish

    Collaborators

    • kahwee