Reformulate meets Semantic UI React Edit

reformulate-semantic-ui

React Forms with batteries loaded:

• Field/Form Validation
• State management
• React Intl
• Semantic UI

Installation

yarn add reformulate reformulate-semantic-ui

Usage

Load up locale messages

import ptReformulateLocaleData from 'reformulate/build/locale/pt'
import enReformulateLocaleData from 'reformulate/build/locale/en'

// merge locale messages into yours
// Example:

export default {
  ...enReformulateLocaleData,
  'my.nice.message': 'YOLO'
}

Build up your forms

import React, { Component } from 'react'
import { validate } from 'reformulate'
import { Form, InputField, SubmitButton } from 'reformulate-semantic-ui'

export default class LoginComponent extends Component {
  render () {
    const { onSubmit } = this
    return (
      <Form onSubmit={onSubmit}>
        <InputField name='username'
          validate={validate.combine(
            validate.notEmpty(),
            validate.maxLength( 255 )
          )}
        />

        <InputField name='password' type='password'
          validate={validate.combine(
            validate.notEmpty(),
            validate.maxLength( 255 )
          )}
        />

        <SubmitButton />
      </Form>
    )
  }

  onSubmit = async ( values ) => {
    // ...
  }
}