https://github.com/jcoreio/react-final-form-graceful-field
parse and format that work how you actually want them to for react-final-form
https://github.com/jcoreio/react-final-form-graceful-field
final-form react-final-form
Last synced: 4 months ago
JSON representation
parse and format that work how you actually want them to for react-final-form
- Host: GitHub
- URL: https://github.com/jcoreio/react-final-form-graceful-field
- Owner: jcoreio
- License: mit
- Created: 2020-09-17T20:58:38.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-01-25T13:21:23.000Z (over 2 years ago)
- Last Synced: 2025-08-19T07:01:13.466Z (10 months ago)
- Topics: final-form, react-final-form
- Language: JavaScript
- Size: 1.71 MB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# react-final-form-graceful-field
[](https://circleci.com/gh/jcoreio/react-final-form-graceful-field)
[](https://codecov.io/gh/jcoreio/react-final-form-graceful-field)
[](https://github.com/semantic-release/semantic-release)
[](http://commitizen.github.io/cz-cli/)
[](https://badge.fury.io/js/react-final-form-graceful-field)
parse and format that work how you actually want them to for `react-final-form`
# Why you would want to use this
If you've wanted to take number typed in and store the value as an actual `number` instead of text, without destroying UX, this is for you.
That's what I wrote this for, although it supports any use case where you want to stash the raw value in field metadata.
The official advice from Erik Rasmussen is to store the raw string that was typed in and parse it in the submit handler, but that sucks:
- Reparsing nested numeric fields within complex forms is a hassle
- If you have validators that compare two numeric fields, for example a min <= max constraint, you have to reparse the numbers there too.
`react-final-form-graceful-field` allows you to use `parse` and `format` but it displays the raw value instead of formatted while
the field is active or `parse` threw an error. That's right, `parse` can throw an error, and doing so will trigger a validation error on the field as well.
This way you can successfully type in `5.23`, whereas a naive `parse={parseFloat}` approach will kill the `.` before you can type anything
after it.
# Try it out!
Demo CodeSandbox: https://codesandbox.io/s/react-final-form-graceful-field-example-n1onw?file=/src/index.js
# Important
**Important**: `react-final-form-graceful-field` requires you to use the [`setFieldData` mutator](https://github.com/final-form/final-form-set-field-data) on your form:
```js
import setFieldData from 'final-form-set-field-data'
const mutators = { setFieldData }
const MyForm = () => (
...
)
```
# Example
```js
// @flow
import * as React from 'react'
import { render } from 'react-dom'
import { Form } from 'react-final-form'
import { GracefulField } from '../src'
import setFieldData from 'final-form-set-field-data'
const format = (value: ?number): string =>
Number.isFinite(value) ? String(value) : ''
const parse = (value: ?string): ?number => {
value = value ? value.trim() : null
if (!value) return null
const parsed = Number(value)
if (!Number.isFinite(parsed)) throw new Error(`invalid number`)
return parsed
}
const mutators = { setFieldData }
render(
{({ values, form, ...rest }) => (
form.change('price', 5)}>
Set to 5
{JSON.stringify({ values, rest }, null, 2)}
)}
,
(document.getElementById('root'): any)
)
```
# API
## `GracefulField`
```js
import { GracefulField } from 'react-final-form-graceful-field'
```
Has the same API as `` except:
- `parse` may throw an error, which will trigger a validation error.
- Accepts an `invalidValue` property, which will be used if `parse` throws an error.
- No `formatOnBlur` property. It formats on blur by default if `parse` didn't throw an error and you provide `format`.
## `useGracefulField`
```js
import { useGracefulField } from 'react-final-form-graceful-field'
```
Has the same API as `useField` except:
- `parse` may throw an error, which will trigger a validation error.
- Accepts an `invalidValue` property, which will be used if `parse` throws an error.
- No `formatOnBlur` property. It formats on blur by default if `parse` didn't throw an error and you provide `format`.