Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including baseui-final-form with all npm packages installed. Try it out:

require("baseui/package.json"); // baseui is a peer dependency. require("final-form/package.json"); // final-form is a peer dependency. require("final-form-arrays/package.json"); // final-form-arrays is a peer dependency. require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. require("react-final-form/package.json"); // react-final-form is a peer dependency. require("react-final-form-arrays/package.json"); // react-final-form-arrays is a peer dependency. var baseuiFinalForm = require("baseui-final-form")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

baseui-final-form v3.0.5

baseui-final-form

Adapter between react-final-form and baseui.

npm CircleCI codecov

Prerequisites

  • baseui >= 8.0.0 (peer dependency)
  • react and react-dom >= 16.9.0 (peer dependency)
  • node >= 10.16.0 (for development)
  • yarn >= 1.17.3 (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/index';
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/index';
import {FormControl} from 'baseui/form-control/index';

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-formHow baseui-final-form imports from baseui?
import {AdaptedInput} from 'baseui-final-form/input';import {Input} from 'baseui/input/index';
import {AdaptedCheckbox} from 'baseui-final-form/checkbox';import {Checkbox} from 'baseui/checkbox/index';
import {CheckboxGroup} from 'baseui-final-form';import {Checkbox} from 'baseui/checkbox/index';
import {NativeSelect} from 'baseui-final-form';
import {RadioGroup} from 'baseui-final-form';import {RadioGroup, StyledRadio} from 'baseui/radio/index';
import {AdaptedSelect} from 'baseui-final-form/select';import {Select} from 'baseui/select/index';
import {AdaptedSlider} from 'baseui-final-form/slider';import {Slider} from 'baseui/slider/index';
import {AdaptedTextarea} from 'baseui-final-form/textarea';import {Textarea} from 'baseui/textarea/index';
import {AdaptedToggle} from 'baseui-final-form/toggle';import {Checkbox} from 'baseui/checkbox/index';

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/index';
import {
  Radio as BaseuiRadio,
  RadioGroup as BaseuiRadioGroup,
} from 'baseui/radio/index';

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

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free