๐Ÿ‘” Elegant form management primitives for the react hooks era.

Overview

Kevin Wolf formal

Watch on GitHub Star on GitHub Tweet!

Elegant form management primitives
for the react hooks era.

PRs Welcome All Contributors Build Status Code Coverage Greenkeeper

@kevinwolf/formal @kevinwolf/formal-web @kevinwolf/formal-native

Problem

Working with forms on react can be a really repetitive task. Most of the existing abstractions provides a render props API and it is just not cool on the react hooks era.

Also, some of those packages do not provide out of the box support for both web and mobile platforms.

Solution

Formal is a cross-platform solution that exposes just the right primitives you need to manage your forms state and validations with ease.

Table of Contents

Usage

The usage of this package depends if you are using react web or react native.

Usage with React Web

For usage with React Web, refer to @kevinwolf/formal-web README.

Usage with React Native

For usage with React Native, refer to @kevinwolf/formal-native README.

Included packages

Name Description
@kevinwolf/formal ๐Ÿ‘” Elegant form management primitives for the react hooks era.
@kevinwolf/formal-web ๐Ÿ’ป Web extension for @kevinwolf/formal.
@kevinwolf/formal-native ๐Ÿ“ฑ Native extension for @kevinwolf/formal.

API Reference

For api reference, read this doc.

Examples and recipes

For more examples and specific recipes, visit the online storybook.

Articles / blog posts

๐Ÿ’ก If you have written any blog post or article about Formal, please open a PR to add it here.

Contributors

Kevin Wolf
Kevin Wolf

๐Ÿš‡ ๐Ÿ’ป โš ๏ธ ๐Ÿ“–
Kent C. Dodds
Kent C. Dodds

๐Ÿค”
Emerson Laurentino
Emerson Laurentino

๐Ÿ“–
Patrick Emmanuel
Patrick Emmanuel

โš ๏ธ
Adam Boro
Adam Boro

๐Ÿ“–
Hilke Heremans
Hilke Heremans

๐Ÿ› ๐Ÿ’ป
Gabo Esquivel
Gabo Esquivel

๐Ÿ›

Contributing

If you have any question, suggestion or recommendation, please open an issue about it.

If you decided you want to introduce something to the project, please read contribution guidelines first.

Other solutions

This is heavily inspired on formik, which currently does not support react hooks. If you are aware or maintain a similar solution, please let me know.

License

MIT

You might also like...
Use-supabase-hooks contains react hooks for common supabase functions, with type safety!

Use-supabase-hooks contains react hooks for common supabase functions, with type safety!

ReactJs Custom hooks, component lifecycle - Indispensable hooks

ReactJs Custom hooks, component lifecycle - Indispensable hooks

React validatable form hook that is used to create dynamic client side validations on react forms

React Validatable Form React validatable form hook that is used to create dynamic client side validations on React forms. Table of Contents Install Ge

This package helps you integrate the MailChimp subscribe form into your React App

use-mailchimp-form This package helps you integrate the MailChimp subscribe form into your React App. It is implemented in the React hooks way to hand

React Hook for state management with profunctor lenses

Profunctor State Hook React Hook for state management with Profunctor Optics A simple and small (2KB!) approach to state management in React using fun

State management that tailored for react, it is simple, predictable, progressive and efficient.
State management that tailored for react, it is simple, predictable, progressive and efficient.

English | ็ฎ€ไฝ“ไธญๆ–‡ โšก๏ธ State management that tailored for react, it is simple, predictable, progressive and efficient. ๐Ÿฎ Introduction Concent is an amazin

Layout management in React.

react-hook-layout Demo page This hook is a variation of the Layout component pattern, described on the React patterns website, and mentioned in the Re

Complex Loader Management Hook for React Applications
Complex Loader Management Hook for React Applications

Complex Loader Management Hook for React. Read the Medium post "Managing Complex Waiting Experiences on Web UIs". react-wait is a React Hook helps to

A state management library for React, Vue.js, Angular and vanilla javascript

Diffx Introduction Diffx is a state management library that focuses on being easy to learn and use, and to offer a great development experience at any

Releases(v0.1.3)
Step form built using React Hook Form, Yup, Typescript, and Zustand

This is a Next.js, Tailwind, and Typescript project bootstrapped using ts-nextjs-tailwind-starter created by Theodorus Clarence. See the deployment on

Theodorus Clarence 43 Sep 20, 2022
New hooks variation for React, to handle states in an easier form.

New hooks variation for React, to handle states in an easier form.

Enrique Barboza 8 Jul 20, 2022
The simple but very powerful and incredibly fast state management for React that is based on hooks

Hookstate The simple but very powerful and incredibly fast state management for React that is based on hooks. Why? โ€ข Docs / Samples โ€ข Demo application

Andrey 1.4k Sep 28, 2022
tiny state management for react with hooks

a simple state management for react using hooks purpose In some simple project, there are some state management requirement, but redux is too heavy to

xiaoboma 7 Feb 28, 2022
A hooks-based lightweight React library for state management

React async states A naive lightweight React library for managing state. What is this ? This is a library for decentralized state management in React.

EL AYADI Mohamed 45 Sep 9, 2022
React hooks for easy event listener management.

Feliz.UseListener This library exposes React hooks for adding event listeners while ensuring that the lifecycle and dependcies are all correctly manag

Cody Johnson 11 Jul 7, 2022
๐Ÿ‘ฉโ€๐Ÿณ A React Hooks utility library containing popular customized hooks

React Recipes A React Hooks utility library containing popular customized hooks What's your favorite dish? npm i react-recipes --save yarn add react-r

Craig Walker 905 Sep 19, 2022
๐Ÿน A lot of nice hooks to make react hooks easier to use ( useState callback / life cycle / instance variable)

?? Nice Hooks ไธญๆ–‡็‰ˆ A lot of nice hooks to make react hooks easier to use. If you find this project is useful to you, please give me a star. Installatio

Daniel.xiao 45 May 5, 2022
๐Ÿ”ฅ A collection of beautiful and (hopefully) useful React hooks to speed-up your components and hooks development ๐Ÿ”ฅ

A collection of beautiful (and hopefully useful) React hooks to speed-up your components and hooks development ?? Live playground here ?? ???? English

Antonio Rรน 6k Sep 22, 2022
Learn the more advanced React hooks and different patterns to enable great developer APIs for custom hooks

?? Advanced React Hooks ?? EpicReact.Dev Learn the more advanced React hooks and different patterns to enable great developer APIs for custom hooks. W

Josรฉ Gonรงalves 4 Mar 15, 2022