Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/kahwee/baseui-final-form

Adapters for baseui & final-form
https://github.com/kahwee/baseui-final-form

Last synced: 3 months ago
JSON representation

Adapters for baseui & final-form

Awesome Lists containing this project

README 

        
# baseui-final-form



Adapter between `react-final-form` and `baseui`.



[![npm](https://img.shields.io/npm/v/baseui-final-form.svg)](https://www.npmjs.com/package/baseui-final-form)

[![CircleCI](https://circleci.com/gh/kahwee/baseui-final-form.svg?style=svg)](https://circleci.com/gh/kahwee/baseui-final-form)

[![codecov](https://codecov.io/gh/kahwee/baseui-final-form/branch/master/graph/badge.svg)](https://codecov.io/gh/kahwee/baseui-final-form)



## 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](https://reactjs.org/), [baseui](https://github.com/uber-web/baseui) and [react-final-form](https://github.com/final-form/react-final-form):



```sh

yarn add baseui-final-form

```



If you don't:



```sh

yarn add react react-dom baseui

yarn add react-final-form final-form

```



Sample component:



```javascript

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 (

     {

        // do something

      }}

      initialValues={{fruit: 'apple'}}

      render={({handleSubmit, pristine, invalid}) => (

        

           ({borderColor: $theme.colors.positive}),

              },

            }}

          />



           {

              return (

                

                  

                

              );

            }}

          />



          

            Submit

          

        

      )}

    />

  );

};

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:



```js

import {AdaptedInput} from 'baseui-final-form/input';



const form = () => {

  return (

     (

        

          

        

      )}

    />

  );

};

```



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`:



```javascript

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 (

     {}}

      initialValues={{fruit: 'apple'}}

      render={({handleSubmit, pristine, invalid}) => (

        

           (

              

                

                  {options.map(option => (

                     (

                          

                            Custom label for value: {$value}

                          

                        ),

                        RadioMarkOuter: {

                          style: ({$theme}) => ({

                            backgroundColor: $theme.colors.positive,

                          }),

                        },

                      }}

                    >

                      {option.label}

                    

                  ))}

                

              

            )}

          />

        

      )}

    />

  );

};

```



## Development



Clone from git



```sh

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

cd baseui-final-form

```



Setup dev packages with `yarn`.



```sh

yarn

yarn storybook

```



Go to [http://localhost:6006](http://localhost:6006) to view storybook.



## Links



- [View in Storybook](https://baseui-final-form.netlify.com)



## License



MIT