@cat-react/form

@cat-react / form

A simple yet powerful library which helps creating validated forms in react. This project is inspired by formsy-react.

Installation

• Install the dependency @cat-react/form
  (e.g. with yarn add @cat-react/form or npm install @cat-react/form --save)
• Import the Components with import {Form, Input} from '@cat-react/form';

Getting Started

Are you looking for a simple way to create validated forms with React?

Congratulations! Your search is over, because @cat-react/form offers you a simple way to create either frontend- or backend-validated forms.

Take a look at the examples to find out how to create the form of your desire.

<Form>
    <MyInput name="email"
             validations={{
                 isEmail: true,
                 isRequired: true
             }}/>
    <MyInput name="email_confirm"
             validations={{
                 isRequired: true,
                 equalsField: 'email'
             }}
             messages={{
                 isRequired: 'Please confirm your email address.',
                 equalsField: 'The email addresses do not match each other.'
             }}/>
</Form>

Example Custom TextInput

Here you can see an example of an custom TextInput which shows how you can implement your own Inputs:

import React from 'react';
import Input from '@cat-react/form/Input'

@Input
export default class BasicInput extends React.Component {
    onChange(event) {
        this.props.setValue(event.target.value);
    }

    getClassName() {
        let className = 'form-control';
        if (!this.props.isPristine()) {
            if (this.props.isValid()) {
                const isWarning = this.props.getMessages().length > 0;
                if (isWarning) {
                    className += ' warning';
                }
            } else {
                className += ' error';
            }
        }
        return className;
    }

    renderMessages() {
        let messages = [];
        if (!this.props.isPristine()) {
            messages = this.props.getMessages();
        }

        if (!messages || messages.length <= 0) {
            return null;
        }

        let className = 'errorText';
        if (this.props.isValid()) {
            className = 'warningText';
        }

        return <ul className={className}>{messages.map((message, i) => <li key={i}>{message}</li>)}</ul>;
    }

    render() {
        return (
            <div className="form-group">
                <label htmlFor={this.props.name}>{this.props.label} {this.props.isRequired() ? '*' : null}</label>
                <input type={this.props.type}
                       className={this.getClassName()}
                       id={this.props.name}
                       aria-describedby={this.props.name}
                       placeholder={this.props.placeholder}
                       value={this.props.getValue()}
                       onChange={this.onChange.bind(this)}
                       onBlur={this.props.touch}/>
                {this.renderMessages()}
            </div>
        );
    }
}

Contribution

The project requires at least the latest stable version of node and npm. You also need to have yarn installed globally.

Two simple steps to get the things running on your local machine:

• Fork the repo
• Execute yarn

You can run the examples with yarn run examples and the tests with yarn test.

License

MIT License

Copyright (c) 2017 Catalysts GmbH

Changelog

0.0.3 (September 17, 2017)

• initial release on npm
• Status:
  • Although there are still some things to be done (like a documentation for the API, more examples, more default validations) this version already has the basic functionality and is working as expected.