How to use semantic-ui-react with redux-form?

Question

Right now I use ReduxForm's Field component and apply raw Semantic UI classes. But I then came across Semantic UI React, which makes things a lot easier -- you can just use React components that have the semantic ui style.

How would you go about integrating ReduxForm with SemanticUIReact?

For example, I currently have something like:

<Field name="gender" component="select" className="ui fluid dropdown">
  {genderOptions}
</Field>

But then, I would like to connect Semantic UI React components like the one below to redux-form:

<Form.Field control={Select} label='Gender' options={genderOptions} placeholder='Gender' />

! Note Field is from redux-form and Form.Field is from semantic-ui-react

Answer 1

Create a component like this:

import React, { PropTypes } from 'react'
import { Input } from 'semantic-ui-react'

export default function SemanticReduxFormField ({ input, label, meta: { touched, error, warning }, as: As = Input, ...props }) {
  function handleChange (e, { value }) {
    return input.onChange(value)
  }
  return (
    <div>
      <As {...input} value={input.value} {...props} onChange={handleChange} error={touched && error} />
      {touched && (warning && <span>{warning}</span>)}
    </div>
  )
}

SemanticReduxFormField.propTypes = {
  as: PropTypes.any,
  input: PropTypes.any,
  label: PropTypes.any,
  meta: PropTypes.any
}

Then in your component call your field like this:

import { Form } from 'semantic-ui-react'
import { reduxForm, Field } from 'redux-form'

class MyComponent extends Component {
  render () {
    return (
      <Form>
        <Field component={SemanticUiField} as={Form.Select} name='firstname' multiple options={options} placeholder='Select...' />
      </Form>
    )
  }
}

export default reduxForm({...})(MyComponent)