redux-form-antd
Bindings for redux-form and antd.
This library should be compatible for both redux-form and react-final-form. Stories for final-form are welcome.
redux-form-antd
is a set of
wrappers to facilitate the use of antd components with
redux-form
.
Live Demo π
Installation
Using npm:
$ npm install --save redux-form-antd
Available Components
- Select
- Radio Buttons
- DatePicker
- MonthPicker
- NumberField
- TextField
- Switch
Usage
Rather than import your component class from antd
, import it from redux-form-antd
and then pass the component class directly to the component
prop of Field
.
import { reduxForm, Field } from 'redux-form'
import {
SelectField,
TextField,
} from 'redux-form-antd'
class MyForm extends Component {
render() {
return (
<form>
<Field name="username" component={TextField} placeholder="Street"/>
</form>
)
}
}
// Decorate with redux-form
MyForm = reduxForm({
form: 'myForm'
})(MyForm)
export default MyForm
or you can check stories code click.
Instance API
getRenderedComponent()
Returns a reference to the UI component that has been rendered. This is useful for
calling instance methods on the UI components. For example, if you wanted to focus on
the username
element when your form mounts, you could do:
componentWillMount() {
this.refs.firstField
.getRenderedComponent()
.focus()
}
as long as you specified a ref
and withRef
on your Field
component.
render() {
return (
<form>
...
<Field name="username" component={TextField} withRef ref={r=>(this.textField = r)}/>
...
</form>
)
}
Custom component wrapper
You can use createComponent
and customMap
functions to wrap your custom component.
Usage example:
import { createComponent, customMap } from 'redux-form-antd';
import { InputPasswordViewableComponent } from './components/InputPasswordViewableComponent'; // Your custom component
function mapFunction(mapProps, { input: { onChange } }) {
return {
...mapProps,
onChange: event => onChange(event.nativeEvent.target.value)
};
}
const textFieldMap = customMap(mapFunction);
export const InputPasswordViewable = createComponent(InputPasswordViewableComponent, textFieldMap);
createComponent
creates FormItem wrapper and attaches validate status handler.customMap
maps redux-form Field props to ant.design form fields props. You can omit customMap's attribute, in such case default mapping will be applied. If you specify a map function, then it should return an object with required properties for ant's FormItem and your component. The signature of map function is(mapProps, props) => ({...mapProps})
, wheremapProps
- default mapping properties,props
- redux-form's Field properties.
inspired by redux-form-material-ui by erikras