semantic-redux-form-fields

A set of form field components combining Semantic UI React and Redux Form

Installation

To install, run npm install --save semantic-redux-form-fields.

Demo

https://mariusespejo.github.io/semantic-redux-form-fields/index.html

Usage

To use one of the form fields, import it and use it as the value for redux-form's Field component prop. This assumes that you've already set up redux-form and semantic-ui-react.

The example below shows a simple form example with a single field using the FormInput component.

import React from 'react';
import { Form } from 'semantic-ui-react';
import { Field, reduxForm } from 'redux-form';
import { FormInput, fieldValidators} from 'semantic-redux-form-fields';

class Example extends React.Component {
  render() {
    return (
        <Form>
            <Field
                component={FormInput}
                name="fieldName" 
                label="Label"
                validate={fieldValidators.required}
                defaultValue="default value"
                width={5} />
        </Form>
    );
  }
}

const ExampleForm = reduxForm({
  form: 'formName'
})(Example);

Shorthand

Alternatively, if you want to avoid having to import redux-form's Field all the time and also all the individual field types in this library, you can instead import Field from this library and simply specify the type like so:

import { Field } from 'semantic-redux-form-fields';

<Field.Input name="fieldName" label="Label" />

Developer Notes:

To update the styleguide docs:

• run npm run styleguide:build
• make sure to push updates back to the main branch