Home / React / Forms

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

๐Ÿšจ โš ๏ธ HEADS UP!! โš ๏ธ ๐Ÿšจ When I started planning this library I took the approach of first write the documentation in order to define where I want to go with it and then start the actual implementation. If
Information
Category: React / Forms
Watchers: 11
Star: 1.1k
Fork: 43
Last update: May 4, 2021
Resource links
https://github.com/elkevinwolf/formal

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

v0.1.3(Aug 13, 2019)

0.1.3 (2019-08-13)

Bug Fixes

  • formal-core: enable submit button after form submission (#64) (607adf3)

v0.1.1(Jun 7, 2019)

0.1.1 (2019-06-07)

Bug Fixes

  • formal-core: fix formal.change method when changing multiple fields (#34) (3e46bb5)

v0.1.0(Mar 27, 2019)

0.1.0 (2019-03-27)

Features

Contents

    TanStack โš›๏ธ Hooks for managing form state and validation in React
    Gelio TSLint rule for detecting invalid uses of React Hooks
    rrousselGit React hooks for Flutter. Hooks are a new kind of object that manages a Widget life-cycles. They are used to increase code sharing between widgets and as a complete replacement for StatefulWidget.
    ajoslin React primitives for building a credit card form
    rrousselGit React hooks for Flutter. Hooks are a new kind of object that manages a Widget life-cycles. They are used to increase code sharing between widgets and as a complete replacement for StatefulWidget.
    beizhedenglong A set of reusable React Hooks.
    final-form React Hooks to bind to ๐Ÿ Final Form's high performance subscription-based form state management engine
    roman01la React Hooks for ClojureScript
    purescript-react An implementation of React hooks on top of purescript-react-basic
    alfredosalzillo React like Hooks implementation for Flutter.
    relay-tools Use Relay as React hooks
    getify Provides React-inspired 'hooks' like useState(..) for stand-alone functions
    zero-plus-x :white_check_mark: React form state management and validation
    trojanowski Use Apollo Client as React hooks
    dfki-ric Dynamical movement primitives (DMPs), probabilistic movement primitives (ProMPs), spatially coupled bimanual DMPs.
    egoist ๐Ÿ High performance subscription-based form state management for Vue.js.
    react-native-community React Native APIs turned into React Hooks for use in functional React components
    BrainMaestro Easily manage git hooks in your composer config
    nearform ๐ŸŽฃ Minimal hooks-first GraphQL client
    nnluukhtn Form Animation: when form validation <3 animate.css
    fergaldoyle vue-form - Comprehensive form validation for Vue.js.
    Share this repo

    Related Repos


    Forms
    1.6k
    React FilePond is a ๐Ÿ”Œ handy FilePond adapter component for React
    pqina React FilePond is a handy wrapper component for FilePond, a JavaScript library that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user experience.
     
    Forms
    8.3k
    โœจElement UI่กจๅ•่ฎพ่ฎกๅŠไปฃ็ ็”Ÿๆˆๅ™จ
    JakHuang Element UI่กจๅ•่ฎพ่ฎกๅŠไปฃ็ ็”Ÿๆˆๅ™จ๏ผŒๅฏๅฐ†็”Ÿๆˆ็š„ไปฃ็ ็›ดๆŽฅ่ฟ่กŒๅœจๅŸบไบŽElement็š„vue้กน็›ฎไธญ๏ผ›ไนŸๅฏๅฏผๅ‡บJSON่กจๅ•๏ผŒไฝฟ็”จ้…ๅฅ—็š„่งฃๆžๅ™จๅฐ†JSON่งฃๆžๆˆ็œŸๅฎž็š„่กจๅ•ใ€‚
     
    Forms
    36.8k
    ๐Ÿ“‹ React Hooks for forms validation (Web + React Native)
    react-hook-form ๐Ÿ“‹ React Hooks for forms validation (Web + React Native)
     
    Forms
    160
    ๐Ÿ“‹ Wrapper component for controlled inputs eg: MUI, AntD and React-Select
    react-hook-form ๐Ÿ“ฃ UPDATE This component is now a part of React Hook Form V4, and renamed to Controller with much simpler API. Performant, flexible and extensible forms with easy to use validation.
     
    Forms
    4.5k
    Easy peasy highly scalable ReactJS & React Native forms! ๐Ÿš€
    unform Overview Unform is a performance focused library that helps you creating beautiful forms in React with the power of uncontrolled components performance and React Hooks. Main advantages Beautiful sy
     
    Forms
    1.1k
    ๐Ÿ‘” Elegant form management primitives for the react hooks era.
    elkevinwolf ๐Ÿšจ โš ๏ธ HEADS UP!! โš ๏ธ ๐Ÿšจ When I started planning this library I took the approach of first write the documentation in order to define where I want to go with it and then start the actual implementation. If
     
    Forms
    476
    React Hooks to bind to ๐Ÿ Final Form's high performance subscription-based form state mana...
    final-form ๐Ÿ React Final Form Hooks โœ… Zero dependencies โœ… Only peer dependencies: React and ๐Ÿ Final Form โœ… Opt-in subscriptions - only update on the state you need! โœ… ๐Ÿ’ฅ 1.2
     
    Forms
    397
    โš›๏ธ A 3kb css animation component for React.
    tannerlinsley React Show A css powered (graphics accelerated) animation component for React. Why? You need to animate, reveal, collapse your react components. Everyone does! You want it smoothly an
     
    Forms
    457
    Component to build simple, flexible, and accessible toggle components
    kentcdodds react-toggled โš›๏ธ Component to build simple, flexible, and accessible toggle components The problem You want a toggle component that's simple and gives you complete control over
     
    Forms
    382
    Higher Order Component for Validating Forms in React
    busypeoples Revalidation Higher Order Component for Forms in React Revalidation lets you write your forms as stateless function components, taking care of managing the local form state as well as the validation. Revalidation also
     
    Popular
    Forms
    4.8k
    React, React Native and Vue UI components for building data-driven apps with Elasticsearch
    appbaseio Reactive Search UI components library for Elasticsearch: Available for React, Vue and React Native Read how to build an e-commerce search UI a.) with React, b.) with Vue or c.) with React Native. Che
     
    Forms
    19
    Painless React Form Validator, Predator is basic form validator inspired by Laravel Valida...
    alfrcr Painless React Form Validator Predator is a React Higher Order Component to validate form with basic validator. Predator is inspired by Laravel Validation Install Predator is available at npm $ npm install --save pre
     
    Forms
    2.9k
    โš›๏ธ Hooks for managing form state and validation in React
    TanStack Hooks for managing form state and validation in React Enjoy this library? Try them all! React Table, React Query, React Charts Features Built with React hooks for React hooks Highly practical
     
    Forms
    634
    Easily integrate Fine Uploader or Fine Uploader S3 into a React app. Drop-in high-level co...
    FineUploader Makes using Fine Uploader in a React app simple. Drop-in high-level components for a turn-key UI. Use small focused components to build a more custom UI. This is currently an unstable in-progress project. Breaking changes may oc
     
    Forms
    409
    Display math in TeX with KaTeX and ReactJS
    talyssonoc react-katex Display math expressions with KaTeX and React Installation $ npm install react-katex # or $ yarn add react-katex Usage import 'katex/dist/katex.min.css'; import { InlineMath