react-cool-form
    TypeScript icon, indicating that this package has built-in type declarations

    0.4.1 • Public • Published

    Hi! friends, if this library has helped you out, please support us with a ⭐️

    React Cool Form

    React hooks for forms state and validation, less code more performant.

    npm version npm downloads coverage status All Contributors netlify deploy

    Features

    Docs

    See the documentation at react-cool-form.netlify.app for more information about using React Cool Form!

    Frequently viewed docs:

    Quick Start

    To use React Cool Form, you must use react@16.8.0 or greater which includes hooks. This package is distributed via npm.

    $ yarn add react-cool-form
    # or
    $ npm install --save react-cool-form

    Here's the basic concept of how it rocks:

    Edit RCF - Quick start

    import { useForm } from "react-cool-form";
    
    const Field = ({ label, id, error, ...rest }) => (
      <div>
        <label htmlFor={id}>{label}</label>
        <input id={id} {...rest} />
        {error && <p>{error}</p>}
      </div>
    );
    
    const App = () => {
      const { form, use } = useForm({
        // (Strongly advise) Provide the default values
        defaultValues: { username: "", email: "", password: "" },
        // The event only triggered when the form is valid
        onSubmit: (values) => console.log("onSubmit: ", values),
      });
      // We can enable the "errorWithTouched" option to filter the error of an un-blurred field
      // Which helps the user focus on typing without being annoyed by the error message
      const errors = use("errors", { errorWithTouched: true }); // Default is "false"
    
      return (
        <form ref={form} noValidate>
          <Field
            label="Username"
            id="username"
            name="username"
            // Support built-in validation
            required
            error={errors.username}
          />
          <Field
            label="Email"
            id="email"
            name="email"
            type="email"
            required
            error={errors.email}
          />
          <Field
            label="Password"
            id="password"
            name="password"
            type="password"
            required
            minLength={8}
            error={errors.password}
          />
          <input type="submit" />
        </form>
      );
    };

    Pretty easy right? React Cool Form is more powerful than you think. Let's explore it now!

    Articles / Blog Posts

    💡 If you have written any blog post or article about React Cool Form, please open a PR to add it here.

    Contributors

    Thanks goes to these wonderful people (emoji key):


    Welly

    🤔 💻 📖 🚇 🚧

    Chris

    🐛

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

    Install

    npm i react-cool-form

    DownloadsWeekly Downloads

    126

    Version

    0.4.1

    License

    MIT

    Unpacked Size

    838 kB

    Total Files

    16

    Last publish

    Collaborators

    • wellyshen