README

Redux Form + React SemanticUI Bindings

==============

Multiple helper components binding redux-form and semantic-ui-react together for standardized error handling.

npm install --save redux-form
npm install --save semantic-ui-react
npm install --save @panderalabs/redux-form-semantic

Why do I need this?

Redux Form is an excellent library for managing complex form state in the UI. Semantic UI React is a great library of UI Components (including form components). To make Redux Form work with the components, a certain amount of boilerplate is required to hook up your components to Redux-Form. In some cases, that boilerplate includes having to call events on the Semantic UI component when a change occurs in Redux-Form. This library helps remove that boilerplate and makes it easier to connect your error messaging with your form elements.

How do I use it?

Installation

Install via npm:

npm install --save redux-form
npm install --save semantic-ui-react
npm install --save @panderalabs/redux-form-semantic

Hook up redux-form middleware

Hook up your form to redux-form:

import { createStore, combineReducers } from 'redux'
import { reducer as formReducer } from 'redux-form'

const rootReducer = combineReducers({
  // ...your other reducers here
  // you have to pass formReducer under 'form' key,
  // for custom keys look up the docs for 'getFormState'
  form: formReducer
})

const store = createStore(rootReducer)

Wrap a Semantic-UI form with Redux-Form

Create a new Semantic UI form & wrap it in redux-form:

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

const ContactForm = props => {
  const { handleSubmit } = props
  return (
    <Form onSubmit={ handleSubmit }>
      { /* form body*/ }
    </Form>
  )
}

ContactForm = reduxForm({
  // a unique name for the form
  form: 'contact'
})(ContactForm)

export default ContactForm;

Add Form Components

import React from 'react'
import { Field, reduxForm } from 'redux-form'
import { Form, Button } from 'semantic-ui-react';
import { TextField } from '@panderalabs/redux-form-semantic'

const ContactForm = props => {
  const { handleSubmit } = props
  return (
    <Form onSubmit={ handleSubmit }>
      <Form.Field>
        <TextField
          name="firstName"
          label="First Name"
          placeholder="Enter First Name"
        />
      </Form.Field>
      <Form.Field>
        <TextField
          name="lastName"
          label="Last Name"
          placeholder="Enter Last Name"
        />
      </Form.Field>
      <Button>Save</Button>
    </Form>
  )
}

export default reduxForm({
  // a unique name for the form
  form: 'contact'
})(ContactForm)

Validate some fields

import React from 'react'
import { Field, reduxForm } from 'redux-form'
import { Form, Button } from 'semantic-ui-react';
import { TextField } from '@panderalabs/redux-form-semantic'

const ContactForm = props => {
  const { handleSubmit } = props
  return (
    <Form onSubmit={ handleSubmit }>
      <Form.Field>
        <TextField
          name="firstName"
          label="First Name"
          placeholder="Enter First Name"
        />
      </Form.Field>
      <Form.Field>
        <TextField
          name="lastName"
          label="Last Name"
          placeholder="Enter Last Name"
        />
      </Form.Field>
      <Button>Save</Button>
    </Form>
  )
}

const Validator = values => ({
  firstName: (!values.firstName || !values.firstName) && 'Required',
  lastName: (!values.lastName || !values.lastName) && 'Required',
});

export default reduxForm({
  // a unique name for the form
  form: 'contact',
  validate: validator,
})(ContactForm)

Implemented Components

Fields are a combination of label, input, error.

Demo

Error Props

To manage how your errors look we have access to a few props

errorPositon: left | right | bottom | top
errorStyles: ['basic', 'pointer']
errorColor: any semantic color

errorColor

Example TextField

import { TextField } from '@panderalabs/redux-form-semantic'

<Form onSubmit={handleSubmit}>
  <TextField
    name="firstName"
    label="First Name"
    placeholder="Enter your first name"
  />
</Form>

Example TextAreaField

import { TextAreaField } from '@panderalabs/redux-form-semantic'

<Form onSubmit={handleSubmit}>
  <TextAreaField
    name="description"
    label="description"
    placeholder="Describe your issue."
  />
<Form>

Example SelectField

import { SelectField } from '@panderalabs/redux-form-semantic'

<Form onSubmit={handleSubmit}>
  <SelectField
    name="vehicle"
    label="Vehicle"
    placeholder="Select your vehicle"
    options=[
      {key: '1', value: 'ford', text: 'Ford'},
      {key: '2', value: 'dodge', text: 'Dodge'},
    ]
  />
<Form>

Usage no npm install needed!