JSPM – react-validify@5.5.0-beta3

Package Exports

react-validify

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-validify) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Validify

single dependency, simplest way to validate and manage form state with hooks!

Install

npm install react-validify

Getting Started

This api has been carefully thought out over the past year. It's been in use on multiple React websites and React Native mobile applications. Using the library is simple. Include the Form component, and wrap your input's and submit buttons.

import Input from './input';
import Submit from './submit';
import { Form, rules } from 'react-validify';

const { required, email } = rules;

const App = () => {
  let [values, setValues] = React.useState({
    email: 'test',
    nested: { test: 'this is nested' },
  });
  // console.log(fields, 'herere');
  return (
    <Form
      values={values}
      onValues={setValues}
      rules={{
        email: [required, email],
        date1: [greaterThanDate2],
        name: [required],
      }}
    >
      <Input name="email" />
      <Input name="name" />
      <Input name="date1" />
      <Input name="date2" />
      <Input name="nested.test" />
      <Submit />
    </Form>
  );
};

Add useField to your own inputs inside the Form wrapper:

import React from 'react';
import { useField } from 'react-validify';

export default props => {
  let { handleChange, handleBlur, value, errors } = useField(props.name);

  return (
    <div>
      {errors ? <p>{errors[0]}</p> : null}
      <input
        {...props}
        value={value}
        onBlur={handleBlur}
        onChange={event => handleChange(event.target.value)}
      />
    </div>
  );
};

Add useSubmit to trigger submitting or validating

import React from 'react';
import { useSubmit } from 'react-validify';

const Submit = props => {
  let { canSubmit, handleSubmit } = useSubmit();

  return (
    <div
      onClick={() => handleSubmit(values => console.log('submit!', values))}
      style={{ opacity: canSubmit ? 1 : 0.5 }}
    >
      Submit Form
    </div>
  );
};
export default Submit;

Create rules, super quick:

const testRule = (value, values) =>
  value.length > values.date2.length ? "Date can't be longer" : null;

Rules get a value and values arguments. This means you can validate an input, or validate it against other form values.

Rules are guaranteed to run on a field after the first time the field is blurred, and then any time an error is present, they will run onChange.

Contributors

Thanks goes to these wonderful people (emoji key):

_{Zach Silveira}	_{Ryan Castner}

This project follows the all-contributors specification. Contributions of any kind welcome!