zhouzi/react-kay

kay's React Higher Order Components

⚠️ Although react-kay was an interesting experiment, I do not recommend using it. There is already a myriad of feature complete schema validation library out there. Have a look at ajv for example. ⚠️

react-kay

kay's React Higher Order Components

Documentation

FormMessagesHOC

Simple wrapper over kay's error map.

Example

import React, { PropTypes } from 'react';
import FormMessagesHOC from 'react-kay/FormMessagesHOC';

function FormMessages ({ messages }) {
  return (
    <ul className="errors">
      {messages.map((message, index) => (
          <li key={index}>
            {message}
          </li>
      ))}
    </ul>
  );
}

FormMessages.propTypes = {
  messages: PropTypes.array.isRequired
};

export default FormMessagesHOC(FormMessages);

FormStateHOC

Provides a few utilities to properly deal with form feedback.

• shouldBeInvalid: fed with a map of errors, provides a function that returns whether or not an input should be invalid (according to its state and validation).
• shouldValidate: accepts an input's name and returns whether or not it should be validated (after the user interacted with the input or the form has been submitted).
• resetFormState: resets the form state.

Example

import React, { Component, PropTypes} from 'react';
import kay from 'kkay';
import FormStateHOC from 'react-kay/FormStateHOC';
import FormMessages from './FormMessages';

const user = kay.schema({
  name:
    kay
    .string()
    .required().message('Please fill in your username'),

  email:
    kay
      .string()
      .required().message('Please fill in your email address in order to confirm your account')
      .pattern(/[^@]+@[^@]+/).message('Please fill in an email address in the form of [email protected]')
});

class SignupForm extends Component {
  constructor (props) {
    super(props);

    this.state = {
      name: '',
      email: ''
    };

    this.onSubmit = this.onSubmit.bind(this);
  }

  onSubmit (e) {
    e.preventDefault;

    const errors = user.validate(this.state);

    if (errors.$invalid) {
      return;
    }

    // do something

    this.setState({
      name: '',
      email: ''
    });

    this.resetFormState();
  }

  render () {
    const errors = user.validate(this.state);
    const isInvalid = this.props.shouldBeInvalid(errors);

    return (
      <form onSubmit={this.onSubmit}>
        <label htmlFor="firstname">
          First name:
        </label>

        <input type="text"
               id="name"
               name="name"
               className={isInvalid('name') ? 'invalid' : ''}
               onChange="e => this.setState({ name: e.target.value })"
               value={this.state.name} />

        {this.props.shouldValidate('name') && (
          <FormMessages errors={errors.name} />
        )}

        <label htmlFor="email">
          Email address:
        </label>

        <input type="email"
               id="email"
               name="email"
               className={isInvalid('email') ? 'invalid' : ''}
               onChange="e => this.setState({ email: e.target.value })"
               value={this.state.email} />

        {this.props.shouldValidate('email') && (
          <FormMessages errors={errors.email} />
        )}
      </form>
    );
  }
}

SignupForm.propTypes = {
  shouldBeInvalid: PropTypes.func.isRequired,
  shouldValidate: PropTypes.func.isRequired,
  resetFormState: PropTypes.func.isRequired
};

export default FormStateHOC(SignupForm);

react-kay's Issues

Doesn't work well with abstracted inputs

react-kay relies on the input's name attribute but the element may be abstracted by a component and made inaccessible (e.g a TagsInput). A solution may be to use getter/setter on a object (just like redux-form does).