react-semantic-redux-form

Semantic-ui-react component integration with Redux form

Integration of Semantic UI React with Redux Form

Available Components

Components with Field suffix are Form.Field(A field is a form element containing a label and an input.) components

1. InputField - An InputField is a form field.

2. TextAreaField

3. SelectField

4. ToggleField

5. CheckboxField

6. Toggle

7. Checkbox

8. Input

9. TextArea

10. Select

11. Dropdown

12. DropdownField

13. RangeField

14. Range

15. UploadField

16. Upload

Radio & RadioField will be removed.

Demo

Example input text

import { Field } from 'redux-form';

import { InputField } from 'react-semantic-redux-form';

`<Field name='name' component={InputField}
	label='Name' placeholder='Name' />`

Example input textarea

import { Field } from 'redux-form';

import { TextAreaField } from 'react-semantic-redux-form';

`<Field name='name' component={TextAreaField}
	label='Name' placeholder='Name' />`

Example Login Form

import React from 'react';

import PropTypes from 'prop-types';

import { Field, reduxForm } from 'redux-form';

import { Form, Icon, Button } from 'semantic-ui-react';

import { LabelInputField, CheckboxField } from 'react-semantic-redux-form';

const LoginForm = props => {

  return (

    <Form onSubmit={handleSubmit}>
      <Field name='username' component={LabelInputField}
      label={{ content: <Icon color='blue' name='user' size='large'/> }}
      labelPosition='left'
      placeholder='Username'/>

      <Field name='password' component={LabelInputField}
      type='password'
      label={{ content: <Icon color='blue' name='lock' size='large'/> }}
      labelPosition='left'
      placeholder='Password'/>

      <Form.Group>
      <Field name='remember' component={CheckboxField}
      label='Stay sign in'/>

      </Form.Group>
      <Form.Field control={Button} primary
      type='submit'>
      Login
      </Form.Field>

    </Form>
  )
}

export default reduxForm({
	form: 'loginForm',	// a unique identifier for this form

})(LoginForm)