https://github.com/jquense/react-formal

Sophisticated HTML form management for React
https://github.com/jquense/react-formal

Last synced: 4 days ago
JSON representation

Sophisticated HTML form management for React

• Host: GitHub
• URL: https://github.com/jquense/react-formal
• Owner: jquense
• License: mit
• Created: 2015-01-20T13:49:52.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2023-07-11T19:35:33.000Z (over 1 year ago)
• Last Synced: 2024-11-28T22:11:32.380Z (14 days ago)
• Language: TypeScript
• Homepage: http://jquense.github.io/react-formal
• Size: 18.1 MB
• Stars: 526
• Watchers: 14
• Forks: 52
• Open Issues: 35
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: License.txt

Awesome Lists containing this project

• awesome-react-cn - react-formal - Sophisticated HTML form management for React (Uncategorized / Uncategorized)
• awesome-react - react-formal - Better form validation and value management for React, Provides minimal wiring
• awesome-learning-resources - react-formal - Sophisticated HTML form management for React (Uncategorized / Uncategorized)
• awesome-react - react-formal - Sophisticated HTML form management for React ` 📝 5 months ago` (React [🔝](#readme))

README

        
# react-formal

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

Better form validation and value management for React. Provides __minimal__ wiring while also allowing for complete input flexibility.

Built on [yup](https://github.com/jquense/yup) and [react-input-message](https://github.com/jquense/react-input-message).

## Install

```sh

npm i -S react-formal yup

```

__(don't like the yup but like how the form works? Try: [topeka](https://github.com/jquense/topeka))__

### Use

__For more complete api documentations, live examples, and getting started guide check out the [documentation site](http://jquense.github.io/react-formal).__

`react-formal` uses a [yup](https://github.com/jquense/yup) schema to update and validate form values. It treats the `form` like an input (representing an object) with a `value` and `onChange`. The `form` can be controlled or uncontrolled as well, just like a normal React input.

```js

var yup = require('yup')

  , Form = require('react-formal')

var modelSchema = yup.object({

        name: yup.object({

            first: yup.string().required('Name is required'),

            last: yup.string().required('Name is required')

        }),

        dateOfBirth: yup.date()

            .max(new Date(), 'You can be born in the future!')

    })

// ...in a component

render() {

    return (

         this.setState({ model })}

        >

            

                Personal Details

                

                

                

                

                

                

            

            Submit

        

    )

}

```