Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/wellyshen/react-cool-form

😎 📋 React hooks for forms state and validation, less code more performant.
https://github.com/wellyshen/react-cool-form

List: react-cool-form

arrays asynchronous controlled dx form form-builder form-state form-validation forms hooks lists performance react react-hooks state state-management typescript uncontrolled ux validation

Last synced: about 1 month ago
JSON representation

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

Awesome Lists containing this project

README 

        
> ⚠️ Thank you for supporting me, this library isn't maintained anymore. Please consider other libraries.





  



  React Cool Form




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






[![npm version](https://img.shields.io/npm/v/react-cool-form?style=flat-square)](https://www.npmjs.com/package/react-cool-form)

[![npm downloads](https://img.shields.io/npm/dt/react-cool-form?style=flat-square)](https://www.npmtrends.com/react-cool-form)

[![coverage status](https://img.shields.io/coveralls/github/wellyshen/react-cool-form?style=flat-square)](https://coveralls.io/github/wellyshen/react-cool-form?branch=master)

[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)

[![netlify deploy](https://img.shields.io/netlify/3c201e27-b611-4512-b827-9523af7a1ae5?style=flat-square)](https://app.netlify.com/sites/react-cool-form/deploys)






## Features



- 🎣 [Easy to use](https://react-cool-form.netlify.app/docs/getting-started/integration-an-existing-form), React Cool Form is [a set of React hooks](https://react-cool-form.netlify.app/docs/api-reference/use-form) that helps you conquer all kinds of forms.

- 🗃 Manages [dynamic](https://react-cool-form.netlify.app/docs/examples/conditional-fields) and [complex](https://react-cool-form.netlify.app/docs/getting-started/complex-structures) form data without hassle.

- 🪄 Manages [arrays and lists](https://react-cool-form.netlify.app/docs/getting-started/arrays-and-lists) data like a master.

- 🚦 Supports [built-in](https://react-cool-form.netlify.app/docs/getting-started/validation-guide#built-in-validation), [form-level](https://react-cool-form.netlify.app/docs/getting-started/validation-guide#form-level-validation), and [field-level](https://react-cool-form.netlify.app/docs/getting-started/validation-guide#field-level-validation) validation.

- 🚀 Highly performant, [minimizes the number of re-renders](https://react-cool-form.netlify.app#performance-matters) for you.

- 🧱 Seamless integration with existing HTML form inputs or [3rd-party UI libraries](https://react-cool-form.netlify.app/docs/getting-started/3rd-party-ui-libraries).

- 🎛 Super flexible [API](https://react-cool-form.netlify.app/docs/api-reference/use-form) design, built with [DX and UX](https://react-cool-form.netlify.app/docs) in mind.

- 🔩 Provides useful [utility functions](https://react-cool-form.netlify.app/docs/api-reference/utility-functions) to boost forms development.

- 📜 Supports [TypeScript](https://react-cool-form.netlify.app/docs/getting-started/typescript-support) type definition.

- ☁️ Server-side rendering compatibility.

- 🦔 A [tiny size](https://react-cool-form.netlify.app/docs/getting-started/bundle-size-overview) ([~ 7.1kB gizpped](https://bundlephobia.com/result?p=react-cool-form)) library but powerful.



## [Docs](https://react-cool-form.netlify.app)



See the documentation at [react-cool-form.netlify.app](https://react-cool-form.netlify.app) for more information about using React Cool Form!



Frequently viewed docs:



- [Getting Started](https://react-cool-form.netlify.app/docs)

- [Examples](https://react-cool-form.netlify.app/docs/examples/basic)

- [API Reference](https://react-cool-form.netlify.app/docs/api-reference/use-form)



## Quick Start



To use React Cool Form, you must use `[email protected]` or greater which includes hooks. This package is distributed via [npm](https://www.npmjs.com/package/react-cool-form).



```sh

$ 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](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/rcf-quick-start-j8p1l?fontsize=14&hidenavigation=1&theme=dark)



```js

import { useForm } from "react-cool-form";



const Field = ({ label, id, error, ...rest }) => (

  


    {label}

    

    {error && 
{error}
}

  


);



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 (

    

      

      

      

      

    

  );

};

```



✨ Pretty easy right? React Cool Form is more powerful than you think. Let's [explore it](https://react-cool-form.netlify.app) 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.



- Featured on [React Status #245](https://react.statuscode.com/issues/245).



## Contributors ✨



Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):



  

    
Welly
🤔 💻 📖 🚇 🚧

    
Chris
🐛

  



This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!