ckshekhar / react-semantic-redux-form

Semantic-ui-react components integration with Redux form

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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.

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)

About

Semantic-ui-react components integration with Redux form

License:MIT License


Languages

Language:JavaScript 100.0%