redux-form-antd

This is bindings for redux form and redux form 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

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() 
    .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>
  )
}

---

inspired by redux-form-material-ui by erikras