Adapter between react-final-form
and baseui
.
baseui
>= 9.115.3 (peer dependency)react
andreact-dom
>= 16.12.0 (peer dependency)node
>= 12.20.0 (for development)yarn
>= 1.19.0 (for development)
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;
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.
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>
)}
/>
);
};
Clone from git
git clone [email protected]:kahwee/baseui-final-form.git
cd baseui-final-form
Setup dev packages with yarn
.
baseui-final-form's People
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.