mc5eamus / react-semantic-redux-form

Semantic-ui-react components integration with Redux form

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. LabelInputField - A Form Field input component formatted with a label. Labled Input

7. Toggle

8. Checkbox

9. Input

10. TextArea

11. Select

12. Dropdown

13. DropdownField

14. RangeField

15. Range

16. UploadField

17. 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)