Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Commit 637eec6

Browse files
authored
Added gifs to readme
1 parent e702def commit 637eec6

File tree

1 file changed

+6
-0
lines changed

1 file changed

+6
-0
lines changed

‎README.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,10 @@
1515

1616
Good question. The reason is that not everyone needs this functionality, and not everyone is using 🏁 React Final Form with the DOM (e.g. some people use it with React Native). Therefore it makes sense to make this a separate package. This version of `Field` is a thin wrapper over the official `Field` component, and the only `Field` API that this library uses/overrides is the field-level [`validate` prop](https://github.com/final-form/react-final-form#validate-value-any-allvalues-object--any), so even if you are using this library's `Field` component, you will still get improvements as features are added to the 🏁 React Final Form library in the future.
1717

18+
| Safari | Chrome | Firefox |
19+
| ------ | ------ | ------- |
20+
| <img src="docs/safari.gif" width="295"/> | <img src="docs/chrome.gif" width="295"/> | <img src="docs/firefox.gif" width="295"/> |
21+
1822
## Installation
1923

2024
```bash
@@ -29,6 +33,8 @@ yarn add react-final-form-html5-validation react-final-form final-form
2933

3034
## [Example](https://codesandbox.io/s/14r018yjp4) 👀
3135

36+
[![Edit 🏁 React Final Form - HTML5 Validation Example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/14r018yjp4)
37+
3238
## Usage
3339

3440
The way you specify rules and error messages in HTML5 is by giving first a rule prop, e.g. `required`, `min`, `maxLength`, and then an error message prop, e.g. `valueMissing`, `rangeUnderflow`, or `tooLong`, respectively. This library comes with built-in English defaults for the error messages, but you will probably want to override those by passing in your own.

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /