Nefarious Pickle Muncher

    @panderalabs/redux-form-semantic

    0.1.2 • Public • Published

    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.

    1. TextField
    2. TextAreaField
    3. SelectField
    4. MultiSelectField
    5. CheckboxField
    6. ToggleField
    7. SliderField
    8. RadioField

    #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>
    

    Install

    npm i @panderalabs/redux-form-semantic

    DownloadsWeekly Downloads

    1

    Version

    0.1.2

    License

    MIT

    Last publish

    Collaborators

    • bryzettler
    • mikerourke
    • sioked