Repository files navigation

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 ofwrappers to facilitate the use of antd components withredux-form.

Usingnpm:

  $ npm install --save redux-form-antd

• Select
• Radio Buttons
• DatePicker
• MonthPicker
• NumberField
• TextField
• Switch

Rather than import your component class fromantd, import it fromredux-form-antdand then pass the component class directly to thecomponent prop ofField.

import{reduxForm,Field}from'redux-form'import{SelectField,TextField,}from'redux-form-antd'classMyFormextendsComponent{render(){return(<form><Fieldname="username"component={TextField}placeholder="Street"/></form>)}}// Decorate with redux-formMyForm=reduxForm({form:'myForm'})(MyForm)exportdefaultMyForm

or you can check stories codeclick.

Returns a reference to the UI component that has been rendered. This is useful forcalling instance methods on the UI components. For example, if you wanted to focus ontheusername element when your form mounts, you could do:

componentWillMount(){this.refs.firstField.getRenderedComponent().focus()}

as long as you specified aref andwithRef on yourField component.

render(){return(<form>      ...<Fieldname="username"component={TextField}withRefref={r=>(this.textField=r)}/>      ...</form>)}

You can usecreateComponent andcustomMap functions to wrap your custom component.Usage example:

import{createComponent,customMap}from'redux-form-antd';import{InputPasswordViewableComponent}from'./components/InputPasswordViewableComponent';// Your custom componentfunctionmapFunction(mapProps,{input:{ onChange}}){return{    ...mapProps,onChange:event=>onChange(event.nativeEvent.target.value)};}consttextFieldMap=customMap(mapFunction);exportconstInputPasswordViewable=createComponent(InputPasswordViewableComponent,textFieldMap);

• createComponent creates FormItem wrapper and attaches validate status handler.
• customMap maps redux-formField propsto ant.designform 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 requiredproperties for ant's FormItem and your component. The signature of map functionis(mapProps, props) => ({...mapProps}), wheremapProps - default mappingproperties,props - redux-form's Field properties.

inspired by redux-form-material-ui byerikras