react-formal

Classy HTML form management for React

react-formal

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

Built on yupand react-input-message.

Install

npm i -S react-formal yup

(don't like the yup but like how the form works? Try: topeka)

Use

For more complete api documentations, live examples, and getting started guide check out the documentation site.

react-formaluses a yupschema to update and validate form values. It treats the formlike an input (representing an object) with a valueand onChange. The formcan be controlled or uncontrolled as well, just like a normal React input.

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 (
        <Form
            schema={modelSchema}
            value={this.state.model}
            onChange={model => this.setState({ model })}
        >
            <fieldset>
                <legend>Personal Details</legend>

                <Form.Field name='name.first'/>
                <Form.Message for='name.first'/>

                <Form.Field name='name.last'/>
                <Form.Message for='name.last'/>

                <Form.Field name='dateOfBirth'/>
                <Form.Message for='dateOfBirth'/>
            </fieldset>
            <Form.Submit type='submit'>Submit</Form.Submit>
        </Form>
    )
}

HomePage

http://jquense.github.io/react-formal/

Repository

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


上一篇:react-formal-inputs
下一篇:colorvert

相关推荐

  • 高频数据交换下Flutter与ReactNative的对比

    (标题图片来自网络,侵删) 后端使用go写的socketio服务模拟期货行情数据,每10ms推送10条行情数据 ReactNative已经尽力优化了。 Flutter由于没fluttersock...

    1 年前
  • 高性能迷你React框架 anu1.3.0 发布

    anujs1.3.0是一款高性能Reactlike框架,是目前世界上对React16兼容最好的迷你库。 自React16起,相继推出createContext,createPortal, creat...

    2 年前
  • 高德地图 react-amap 实战

    clipboard.png(https://img.javascriptcn.com/5a33946ad8c0ea8ee7870f74f331d0c0 "clipboard.png") reacta...

    7 个月前
  • 高品质 React UI 组件

    (https://img.javascriptcn.com/cca319311c2ea59a2b5cdaa63b997828)(https://link.funteas.com?target=http...

    2 年前
  • 骚操作!在react中使用vuex

    原文地址(https://github.com/zyl1314/blog/issues/12) 前言 笔者最近在学习使用,提到react就绕不过去。redux是一个状态管理架构,被广泛用于rea...

    2 年前
  • 项目文档说明:react + Ant Design 的 blog-react-admin

    效果图(https://img.javascriptcn.com/734ce56fe3a37ab11e9744473f56bae1 "效果图") 前言 此 blogreactadmin 项目是基...

    1 年前
  • 面试题:Hooks 与 React 生命周期的关系

    React 生命周期很多人都了解,但通常我们所了解的都是 单个组件 的生命周期,但针对 Hooks 组件、多个关联组件(父子组件和兄弟组件) 的生命周期又是怎么样的喃?你有思考和了解过吗,接下来我们将...

    8 个月前
  • 面试官:请你在React中引入Vue3的@vue/reactivity,实现响应式。

    前言 React的状态管理是一个缤纷繁杂的大世界,光我知道的就不下数十种,其中有最出名immutable阵营的redux,有mutable阵营的mobx,reacteasystate,在hooks诞生...

    2 个月前
  • 面试官我想做个Reacter(React路由)

    路由的基础用法回顾,源码study,文章首发于docs,求个star 依赖 路由依赖于 reactrouter ,但是一般 pc 路由使用 reactrouterdom ,它依赖于 reactrout...

    1 个月前
  • 面试中React与Vue的比对

    1.virtual dom 用JS模拟DOM结构,DOM变化的对比,放在JS层做,以提高重绘性能 DOM操作昂贵,JS运行效率高,要减少DOM操作 使用:snabbdom的使用 ...

    2 年前

官方社区

扫码加入 JavaScript 社区