๐Ÿ High performance subscription-based form state management for React

Overview

You build great forms, but do you know HOW users use your forms? Find out with Form Nerd! Professional analytics from the creator of React Final Form.


๐Ÿ’ฐ Wanna get paid the big bucks writing React? Take this quiz and get offers from top tech companies! ๐Ÿ’ฐ


๐Ÿ React Final Form

React Final Form

Backers on Open Collective Sponsors on Open Collective NPM Version NPM Downloads Build Status codecov.io styled with prettier

โœ… Zero dependencies (that affect your bundle size)

โœ… Only peer dependencies: React and ๐Ÿ Final Form

โœ… Opt-in subscriptions - only update on the state you need!

โœ… ๐Ÿ’ฅ 3.0k gzipped ๐Ÿ’ฅ


React Final Form is sponsored by Sencha.

Comprehensive JS framework and UI components for building enterprise-grade web apps.


๐Ÿ’ฌ Give Feedback on React Final Form ๐Ÿ’ฌ

In the interest of making ๐Ÿ React Final Form the best library it can be, we'd love your thoughts and feedback.

Take a quick survey.


React Final Form is a thin React wrapper for Final Form, which is a subscriptions-based form state management library that uses the Observer pattern, so only the components that need updating are re-rendered as the form's state changes.

Getting Started

Philosophy

Examples

API

FAQ

Comments
  • Reset form after form submission succeed

    Reset form after form submission succeed

    Hi there ! I was wondering how i can reset my form on successful submit ? Seems that we don't have access to the reset() function in onSubmit(). How can i handle that ? Thanks for the work by the way , react-final-form is awesome :)

    opened by kalutheo 50
  • Warning: Cannot update a component from inside the function body of a different component.

    Warning: Cannot update a component from inside the function body of a different component.

    Are you submitting a bug report or a feature request?

    bug report

    What is the current behavior?

    After npm upgrading to the latest React, I am getting the following warning in my console from the React Developer tools Chrome extension: "Warning: Cannot update a component from inside the function body of a different component."

    The component trace just points to a line with a boring/standard use of Field in JSX. Quickly going through the app I'm working on, this warning happens everywhere, on every use of Field in the app. For example, the warnings point to lines like the 2nd to last line (RadioField = ...) of this file (please excuse the coding style here). Again, there is nothing special about this code; it's happening on every Form that has components that use Field.

    import React from "react";
    import { Field } from "react-final-form";
    
    const Radio = ({label,input,children,className}) => {
     const { checked } = input;
      return (
        <label className={"input-radio "+ (checked? "is-checked ": "")+
         className}>
          {children && children}
          <input
            {...input}
            className="form-radio"
          />
          <var title={label}>{label}</var>
        </label>
      );
    };
    
    Radio.defaultProps = { label:"", meta:{}, input:{}, children:[] };
    
    const RadioField = props => <Field {...props} component={Radio} type="radio"/>;
    
    export default RadioField;
    

    What is the expected behavior?

    No warning

    Sandbox Link

    I'll make one if you need it, but I think the link below in Other Information succinctly explains what is happening and a hooks based workaround that react-final-form can implement.

    What's your environment?

    ChromeOS 79 React 16.13.0 released Feb 26th, 2020 Final Form 4.18.7 React Final Form 6.3.5

    Other information

    See here: https://reactjs.org/blog/2020/02/26/react-v16.13.0.html#warnings-for-some-updates-during-render

    opened by ChrisChiasson 49
  • Reconsider use of scarf

    Reconsider use of scarf

    Hey @erikras

    First off I want to say I really appreciate the work you've put into react-final-form. It's apparent this is the premier form library for React atm and I'm hoping to use it professionally in a large existing codebase that needs some forms tlc.

    Adding final form as a dep seemed easy enough and it made feature development a breeze but during code review I came across this new dependency @scarf/scarf. Their README does a good job explaining my concern right off the bat:

    Scarf is like Google Analytics for your npm packages. By sending some basic details after installation, this package can help you can gain insights into how your packages are used and by which companies. Scarf aims to help support open-source developers fund their work when used commercially.

    Even if Scarf is completely harmless and honest in their mission its presence immediately makes this a hard sale. Even disabling it via the package.json is not enough for me to avoid a "fun" chat with our CTO about scarf if I want to stay the course with react-final-form.

    Further, there is no discussion in the PR https://github.com/final-form/react-final-form/pull/790. Were these authors or packages telemetry code vetted?

    I'm a concerned dev who would love to use this library but unless scarf is removed I will probably opt to use Formik which is comparable if not quite as feature complete. Please reconsider!

    opened by slightlytyler 22
  • Form can be submitted even with validation errors

    Form can be submitted even with validation errors

    Hey :)

    Are you submitting a bug report or a feature request

    Bug report

    What is the current behavior

    Even with validation errors, I am able to submit a non-valid form if not all fields are rendered.

    What is the expected behavior

    I expect that I will be not able to submit a non-valid form that has validation errors.

    How to reproduce the issue

    I took Synchronous Record-Level Validation example and slightly modified it - removed two fields and added console.log with validation errors.

    Here is a codesandbox demo - https://codesandbox.io/s/53xrn6v86p

    Try to submit an empty form and you will have 3 validation errors. Now, fill in the only field in the form and you'll still have 2 validation errors. Even though you have errors left, you will be able to submit the form.

    Screen Shot

    screen shot 2017-11-28 at 00 43 22


    This bug also exists in redux-form and was mentioned in issues multiple times. ๐Ÿ˜ข Maybe it'll be fixed in the final-form (the title sounds awesome) ๐ŸŽ‰

    opened by vladshcherbin 21
  • Can only update a mounting component. This usually means you called setState() outside componentWillMount() on the server. This is a no-op.

    Can only update a mounting component. This usually means you called setState() outside componentWillMount() on the server. This is a no-op.

    Are you submitting a bug report or a feature request?

    Bug report. I have a problem on the SSR

    Warning: setState(...): Can only update a mounting component. This usually means you called setState() outside componentWillMount() on the server. This is a no-op.
    Please check the code for the ReactFinalForm(4.2.0)(undefined) component.
    

    What's your environment?

    FinalForm v4.2.1 ReactFinalForm v3.1.2 React v16.2.0 node v8.9.4

    opened by consegrado 20
  • [BUG] FormStateToRedux - Maximum update depth exceeded

    [BUG] FormStateToRedux - Maximum update depth exceeded

    All forms with initial values

    No nested input names

    Original simple example - codesandbox Original example with connected Container - codesandbox

    Nested input names

    Bug Original example with connected Container and nested initialValues & input names - codesandbox

    Fix Original example with connected Container & Form and nested initialValues & input names - codesandbox

    bug 
    opened by borm 19
  • Forward refs to input component

    Forward refs to input component

    Resolves #141

    Still to do:

    • [x] Make the same change to Field in react-final-form-html5-validation (final-form/react-final-form-html5-validation#18)
    • [x] Add a test
    • [x] Update docs
    • [ ] Get Flow typings to work in Field.js
    opened by TylerRick 18
  • How to connect to redux

    How to connect to redux

    Hello moderators, I have a question regarding your final-form lib. In the docs you mention: "If you need to mutate your data via dispatching Redux actions, you should probably use Redux Form."

    Does that mean I cannot use the data that I get from redux states in the forms? If yes, is it not an big limitation? For example, my forms will get data from graphql (apollo) and based on the data I want to update my forms, how can I do that if I can't use redux?

    THanks

    opened by hassanzadeh 17
  • `npm install` fails for react-final-form@3.1.1

    `npm install` fails for [email protected]

    Are you submitting a bug report or a feature request?

    bug report

    What is the current behavior?

    npm install react-final-form fails for version 3.1.1 npm install react-final-form works for version 3.1.0

    Error message

    npm ERR! file sh
    npm ERR! code ELIFECYCLE
    npm ERR! errno ENOENT
    npm ERR! syscall spawn
    npm ERR! [email protected] postinstall: `opencollective postinstall`
    npm ERR! spawn ENOENT
    npm ERR!
    npm ERR! Failed at the [email protected] postinstall script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
    
    npm ERR! A complete log of this run can be found in:
    npm ERR!     /home/breanna_bunge/.npm/_logs/2018-02-27T22_59_06_062Z-debug.log
    

    Believe the issue is that opencollective is a dev dependency and so I don't have that command on my system when I install react-final-form.

    https://github.com/final-form/react-final-form/pull/149#issuecomment-369059500

    What is the expected behavior?

    npm install react-final-form installs successfully

    Sandbox Link

    N/A

    What's your environment?

    [email protected] npm version: 5.6.0 node version: v8.9.1

    Other information

    Post install script introduced by this PR: https://github.com/final-form/react-final-form/pull/149

    opened by brieb 17
  • Reset a form programmatically

    Reset a form programmatically

    Are you submitting a bug report or a feature request?

    Feature request

    Other information

    I might missing something, but what is the correct approach to reset a form after successful submission? Without having a reset button of course. I couldn't see anything about this in the documentation. I can inject new empty initialValues from props maybe, but it doesn't seem very clean.

    opened by dbertella 17
  • Update field value according to another field

    Update field value according to another field

    Hi,

    I am having an issue with chained selects. Is there any way to change values of other fields according to another field's value?

    I created a sandbox so that it is easy to look at. If you select a currency from first select, let's say "usd", the country select doesn't select any option. As you can see in the state of the form, "country" value is still "IE" (the previous value).

    I would like to select the first country available for a given currency. So, I thought removing <option /> it would work but it doesn't. Any idea how to solve this without wrapping the form and send data to its parent component? Is there any way to solve this just using RFF?

    Thanks.

    opened by jferrettiboke 16
  • the form stays in `validating` state in a wizard when field is unregistred

    the form stays in `validating` state in a wizard when field is unregistred

    Not yet a contribution sorry, it's only a failing test that should not.

    With 2 fields in a ยซwizardยป form, if one has an async validation and the other doesn't, the form stays in validating state

    This PR adds 2 tests:

    • 1st with mixed validation sync & async field
    • 2nd with only async validation

    Rq: I unsuccessfully tried to reproduce this issue in final-form directly. It seems related to runFieldLevelValidation but for now I got lost in the step-by-step debugger

    opened by iamdey 1
  • Bump qs from 6.5.2 to 6.5.3

    Bump qs from 6.5.2 to 6.5.3

    Bumps qs from 6.5.2 to 6.5.3.

    Changelog

    Sourced from qs's changelog.

    6.5.3

    • [Fix] parse: ignore __proto__ keys (#428)
    • [Fix] utils.merge: avoid a crash with a null target and a truthy non-array source
    • [Fix] correctly parse nested arrays
    • [Fix] stringify: fix a crash with strictNullHandling and a custom filter/serializeDate (#279)
    • [Fix] utils: merge: fix crash when source is a truthy primitive & no options are provided
    • [Fix] when parseArrays is false, properly handle keys ending in []
    • [Fix] fix for an impossible situation: when the formatter is called with a non-string value
    • [Fix] utils.merge: avoid a crash with a null target and an array source
    • [Refactor] utils: reduce observable [[Get]]s
    • [Refactor] use cached Array.isArray
    • [Refactor] stringify: Avoid arr = arr.concat(...), push to the existing instance (#269)
    • [Refactor] parse: only need to reassign the var once
    • [Robustness] stringify: avoid relying on a global undefined (#427)
    • [readme] remove travis badge; add github actions/codecov badges; update URLs
    • [Docs] Clean up license text so itโ€™s properly detected as BSD-3-Clause
    • [Docs] Clarify the need for "arrayLimit" option
    • [meta] fix README.md (#399)
    • [meta] add FUNDING.yml
    • [actions] backport actions from main
    • [Tests] always use String(x) over x.toString()
    • [Tests] remove nonexistent tape option
    • [Dev Deps] backport from main
    Commits
    • 298bfa5 v6.5.3
    • ed0f5dc [Fix] parse: ignore __proto__ keys (#428)
    • 691e739 [Robustness] stringify: avoid relying on a global undefined (#427)
    • 1072d57 [readme] remove travis badge; add github actions/codecov badges; update URLs
    • 12ac1c4 [meta] fix README.md (#399)
    • 0338716 [actions] backport actions from main
    • 5639c20 Clean up license text so itโ€™s properly detected as BSD-3-Clause
    • 51b8a0b add FUNDING.yml
    • 45f6759 [Fix] fix for an impossible situation: when the formatter is called with a no...
    • f814a7f [Dev Deps] backport from main
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 2
  • Warning message in console when using the field validation for a string field.

    Warning message in console when using the field validation for a string field.

    Bug report

    What is the current behavior?

    I have a field of type string, and when I add any validate method this is the warning message that shows up in console:

    Warning: Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state.

    This occurs in the ForwardRef(Field). Full stacktrace shown below.

    What is the expected behavior?

    No console warning.

    Sandbox Link

    Not able to reproduce this.

    What's your environment?

    final-form: 4.20.7, Typescript, React application.

    Other information

    Warning: Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state. in ForwardRef(Field) (created by ScheduleStopTimeField) in ScheduleStopTimeField (created by ScheduleFormFields) in div (created by StackItem) in StackItem (created by InternalFormLabel) in div (created by Stack) in Stack (created by InternalFormLabel) in div (created by StackItem) in StackItem (created by InternalFormLabel) in div (created by Stack) in Stack (created by InternalFormLabel) in InternalFormLabel (created by RealFormLabel) in RealFormLabel (created by RealFormLabel) in ErrorBoundary (created by RealFormLabel) in RealFormLabel (created by ScheduleFormFields) in div (created by StackItem) in StackItem (created by ScheduleFormFields) in div (created by Stack) in Stack (created by ScheduleFormFields) in ScheduleFormFields (created by ReactFinalForm) in div (created by Stack) in Stack (created by ReactFinalForm) in ReactFinalForm (created by CreateOrUpdatePoolForm) in CreateOrUpdatePoolForm (created by UpdatePoolBladeInjected) in UpdatePoolBladeInjected (created by ConnectFunction) in ConnectFunction (created by UpdatePoolReactView) in Provider (created by UpdatePoolReactView) in ErrorBoundary (created by UpdatePoolReactView) in UpdatePoolReactView in Customizer (created by ThemedFabric) in div (created by ThemeProvider) in ThemeProvider (created by ThemedFabric) in ThemedFabric

    opened by nipothar 1
  • Documentation for defaultValue of FieldProps is not matching implementation

    Documentation for defaultValue of FieldProps is not matching implementation

    Are you submitting a bug report or a feature request?

    bug report

    What is the current behavior?

    The documentation for Field defaultValue states:

    The value of the field upon creation. This value is only needed if you want your field be dirty upon creation (i.e. for its value to be different from its initial value).

    So assumption is that to mark field as initially dirty we can set different defaultValue and initialValue.

    For example:

    <Field name={name} defaultValue={false} initialValue={true} />
    

    What is the expected behavior?

    Field defaultValue is only used when both form and field level initialValue are undefined. thus Field is not marked dirty, when initialValue is not undefined.

    Current implementation: https://github.com/final-form/final-form/blob/main/src/FinalForm.js#L908

            // only use defaultValue if we don't yet have any value for this field
            if (
              fieldConfig.defaultValue !== undefined &&
              fieldConfig.initialValue === undefined &&
              getIn(state.formState.initialValues, name) === undefined &&
              noValueInFormState
            ) {
              state.formState.values = setIn(
                state.formState.values,
                name,
                fieldConfig.defaultValue,
              );
            }
    

    Sandbox Link

    What's your environment?

    React Final Form: 6.5.9

    Other information

    opened by mauron85 0
  • Bump decode-uri-component from 0.2.0 to 0.2.2

    Bump decode-uri-component from 0.2.0 to 0.2.2

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 2
  • Bump minimatch from 3.0.4 to 3.1.2

    Bump minimatch from 3.0.4 to 3.1.2

    Bumps minimatch from 3.0.4 to 3.1.2.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 2
Releases(v6.5.9)
  • v6.5.9(Apr 1, 2022)

  • v6.5.8(Jan 31, 2022)

  • v6.5.7(Sep 30, 2021)

    Type Fixes

    • Correct input.value type for useField and Field #947 #946

    https://github.com/final-form/react-final-form/compare/v6.5.6...v6.5.7

    Source code(tar.gz)
    Source code(zip)
  • v6.5.6(Sep 29, 2021)

  • v6.5.5(Sep 29, 2021)

    Apologies... FF v4.20.3 contained an engines value in package.json that broke some builds.

    • Skipped FF 4.20.3 for 4.20.4 #945

    https://github.com/final-form/react-final-form/compare/v6.5.4...v6.5.5

    Source code(tar.gz)
    Source code(zip)
  • v6.5.4(Sep 29, 2021)

    Bug Fixes

    • Use custom hook to create callback constants #933
    • Use each item inside of decorators to allow decorators to change identity #893
    • Stabilize useField public handler identity #931 #816

    Type Fixes

    • Improved typing for the ability to convert types when using parse/format #935 #929

    https://github.com/final-form/react-final-form/compare/v6.5.3...v6.5.4

    Source code(tar.gz)
    Source code(zip)
  • v6.5.3(Mar 20, 2021)

    Examples Fixes only

    • Programmatic submit does not work in React 17 (#900)
    • Fix error component subscription prop b3c79b8

    https://github.com/final-form/react-final-form/compare/v6.5.2...v6.5.3

    Source code(tar.gz)
    Source code(zip)
  • v6.5.2(Oct 21, 2020)

    ๐ŸŽ‰ Support for React 17 as a peer dep! ๐ŸŽ‰

    Bug Fixes

    • Lost the formatting method call in checked field getter #859 #858

    Type Fixes

    • Apply generic types to params in useFormState declaration #841
    • Allow custom props in FormProps #867 #864

    https://github.com/final-form/react-final-form/compare/v6.5.1...v6.5.2

    Source code(tar.gz)
    Source code(zip)
  • v6.5.1(Jul 13, 2020)

    Hi, @erikras here. The primary reason for this update is to remove the Scarf dependency. I already did for Final Form and I thought React Final Form did not have its own dependency, but I was mistaken. Apologies for the delay.

    You can read about my feelings about Scarf here:

    Open Source Sustainability

    Deps Fixes

    • Remove scarf dep #831

    Bug Fixes

    • Update auto-save-selective-debounce to handle clearing inputs #802
    • Re-initialize onFocus/onBlur handlers if the subscribed field changes #787

    Type Fixes

    • Update FormValues Typescript definition #806

    https://github.com/final-form/react-final-form/compare/v6.5.0...v6.5.1

    Source code(tar.gz)
    Source code(zip)
  • v6.5.0(May 27, 2020)

    New Features

    • ๐ŸŽ‰๐ŸŽ‰ Forward refs to input component ๐ŸŽ‰๐ŸŽ‰ #608 #141
    • Add modifiedSinceLastSubmit flag to form and field state #799

    Bug Fixes

    • Deduce select type from component prop for select-multiple #793
    • If name prop is passed as undefined to Field component, an error is thrown #777 #450

    https://github.com/final-form/react-final-form/compare/v6.4.0...v6.5.0

    Source code(tar.gz)
    Source code(zip)
  • v6.4.0(Mar 30, 2020)

    As of React v16.13.0, there has been a warning in React Final Form, Redux Form, and Formik. You can read @gaearon's explanation of it here: https://github.com/facebook/react/issues/18178#issuecomment-595846312

    This release, in conjunction with [email protected], fixes this warning.

    Technically, a peer dependency change should be a major, breaking change, but these two libraries are so tightly coupled, that I'm only making it a "minor" update. Shout at @erikras on Twitter if this upsets you.

    Bug Fix

    • Silent initial field registration to avoid React warning #766 #751

    https://github.com/final-form/react-final-form/compare/v6.3.5...v6.4.0

    Source code(tar.gz)
    Source code(zip)
  • v6.3.5(Jan 23, 2020)

    Bug Fix

    • Update keepDirtyOnReinitialize before initial values #706 https://github.com/final-form/final-form/pull/311

    https://github.com/final-form/react-final-form/compare/v6.3.4...v6.3.5

    Source code(tar.gz)
    Source code(zip)
  • v6.3.4(Jan 22, 2020)

    Bug Fixes

    • Add data object to useField/Field #711
    • Submit edge case fix #697 #695
    • Add missing dirtyFieldsSinceLastSubmit to getters #688

    Typing Fixes

    • Add otherProp to FieldRenderProps interface #716 #398
    • Fix handleSubmit typings #715 #86
    • Improved type definition for Field #708
    • Added note about the return type of handleSubmit #681 #675

    https://github.com/final-form/react-final-form/compare/v6.3.3...v6.3.4

    Source code(tar.gz)
    Source code(zip)
  • v6.3.3(Nov 19, 2019)

    Typing Fixes

    • Revert "Fix typescript typings in FieldProps (#619)" #679

    https://github.com/final-form/react-final-form/compare/v6.3.2...v6.3.3

    Source code(tar.gz)
    Source code(zip)
  • v6.3.2(Nov 19, 2019)

    v6.3.1 introduced a bug. v6.3.2 fixes it.

    Bug Fixes

    • Made lazy state getters enumerable #678 #677

    https://github.com/final-form/react-final-form/compare/v6.3.1...v6.3.2

    Source code(tar.gz)
    Source code(zip)
  • v6.3.1(Nov 18, 2019)

    Bug Fixes

    • Fixed decorators unsubscribe order #620 #618
    • Fix issue with inline isEqual causing an infinite rerender loop #603 #517
    • Lazy evaluation of form and field state #596
    • Fix async act warning #581
    • Pausing validation before unmount #595 #408
    • Fixed bug with ignoring changes to onChange #572 #569
    • Pass any additional props to custom component #565 #175
    • Pass through multiple value to custom components #545 #544
    • Cleanup onBlur dependencies #546
    • Do not pass undefined type to input #548

    Typing Fixes

    • Fix useFormState and useField Flow types #630
    • Add RenderableProps to FormRenderProps #575
    • Fix typescript typings in FieldProps #619
    • Fix FormProps['decorators'] #629
    • Pass FormValues type to Decorator #661
    • FieldInputProps extends AnyObject #606
    • Remove Omit from the typescript definitions #589
    • Allow typed render props in TS #570

    Build Fixes

    • Remove the version #604

    https://github.com/final-form/react-final-form/compare/v6.3.0...v6.3.1

    Source code(tar.gz)
    Source code(zip)
  • v6.3.0(Jun 19, 2019)

    New Features

    Bug Fixes

    • Fixed destroyOnUnregister bug #537
    • Use updated value for formatOnBlur format func #465

    https://github.com/final-form/react-final-form/compare/v6.2.1...v6.3.0

    Source code(tar.gz)
    Source code(zip)
  • v6.2.1(Jun 14, 2019)

    Whilst it could be argued that updating a peer dependency is a "breaking change" โ€“ and it would be if it were on a large third party library, like React โ€“ it is the opinion of the library author that, due to the tight coupling between final-form and react-final-form, such a change, especially just for type definitions, is acceptable, even in a "patch" release. Feel free to yell at @erikras on Twitter if you vehemently disagree.

    Type Updates

    https://github.com/final-form/react-final-form/compare/v6.2.0...v6.2.1

    Source code(tar.gz)
    Source code(zip)
  • v6.2.0(Jun 14, 2019)

    TypeScript fixes

    • Use the same default for FormValues type in all declared types (#525)
    • Replace empty object default type with any object (#526)
    • Refactor getContext back to a simple context file (#524)

    New Features

    • Strongly typed field values (#530)
    • Added tsx generic typings for Field, Form, and FormSpy components (#522)

    For Typescript users, you can take advantage of JSX Generics, so you can specify the type of your form values or field value directly in the JSX call to Form, Field, or FormSpy. For Form, it will even infer the form values type if you provide initialValues.

    Behold this code:

    interface MyValues {
      firstName: string
      lastName: string
    }
    
    const initialValues: MyValues = {
      firstName: 'Erik',
      lastName: 'Rasmussen'
    }
    
    const onSubmit = (values: MyValues) => {
      ajax.send(values)
    }
    
    {/*
      Typescript will complain if the type of initialValues is not
      the same as what is accepted by onSubmit
    */} 
    <Form onSubmit={onSubmit} initialValues={initialValues}>
      {({ handleSubmit, values }) => {
        // ๐Ÿ’ฅ Type of values is inferred from the type of initialValues ๐Ÿ’ฅ
        return (
          <form onSubmit={handleSubmit}>
            {/* ๐Ÿ˜Ž Field values are strongly typed using JSX generics ๐Ÿ˜Ž */}
            <Field<string> name="firstName" component={TextInput} />
            <Field<string> name="lastName" component={TextInput} />
            <Field<number> name="age" component={NumberInput} />
            <button type="submit">Submit</button>
          </form>
        )
      }}
    </Form>
    

    https://github.com/final-form/react-final-form/compare/v6.1.0...v6.2.0

    Source code(tar.gz)
    Source code(zip)
  • v6.1.0(Jun 11, 2019)

    New Features

    • Allowed swappable final-form APIs #520
    • ๐Ÿ’ฅ Strongly typed form values for Flow and Typescript ๐Ÿ’ฅ #516

    Usage:

    import { withTypes, Field } from 'react-final-form'
    
    type MyValues = {
      email: string,
      password: string
    }
    const { Form } = withTypes<MyValues>()
    
    <Form onSubmit={onSubmit}>
       {({ handleSubmit, values }) => {
         // values are of type MyValues
       }}
    </Form>
    

    Edit Strongly Typed Form Values with ๐Ÿ React Final Form

    Housekeeping

    • Remove context export #515
    • Simplify slightly logic around keeping latest value in ref #513

    https://github.com/final-form/react-final-form/compare/v6.0.1...v6.1.0

    Source code(tar.gz)
    Source code(zip)
  • v6.0.1(May 29, 2019)

    Bug Fixes

    • No rerender on validateFields change #504 #502

    Type Fixes

    • Fix Flow typings for UseFieldConfig and FieldProps #503
    • Added back flow types that got removed #505 #500
    • Update Types to make useField's options optional #499

    https://github.com/final-form/react-final-form/compare/v6.0.0...v6.0.1

    Source code(tar.gz)
    Source code(zip)
  • v6.0.0(May 27, 2019)

    This release contains very minimal, edge-case, breaking changes.

    Bug Fixes

    • Fixed bug in form component rerendering not responding to changes in form state properly. #498 #487 #492

    โš ๏ธ Breaking Changes โš ๏ธ

    • Subscription changes will now be ignored. For some reason previous versions of React Final Form did extra work to allow you to change the subscription prop, causing the component to reregister with the Final Form instance. That is a very rare use case, and it was a lot of code to enable it. If you need to change your subscription prop, you should also change the key prop, which will force the component to be destroyed and remounted with the new subscription.
    • parse={null} and format={null} are no longer allowed. That was a bad choice of API design, which is probably why Flow doesn't allow the Function | null union type. #400 Passing null served the purpose of disabling the default parse and format functionality. If you need to disable the existing parse and format, you can pass an identity function, v => v, to parse and format.

    < v6

    <Field name="name" parse={null} format={null}/>
    

    >= v6

    const identity = v => v
    ...
    <Field name="name" parse={identity} format={identity}/>
    

    https://github.com/final-form/react-final-form/compare/v5.1.2...v6.0.0

    Source code(tar.gz)
    Source code(zip)
  • v5.1.2(May 24, 2019)

    • Converted to use React.FC df89fde
    • Added missing length value to FieldRenderProps 89454a4

    https://github.com/final-form/react-final-form/compare/v5.1.1...v5.1.2

    Source code(tar.gz)
    Source code(zip)
  • v5.1.1(May 24, 2019)

    Bug Fixes

    • Add state.change to useField's onChange dependencies. #477
    • Make flattenSubscription hooks-safe #479

    Type Fixes

    • add beforeSubmit and afterSubmit to typescript def #484
    • Add simple test for generic FieldRenderProps type #439
    • Tweak useFormState TS types #482 #476
    • Adjust ts definitions #486

    https://github.com/final-form/react-final-form/compare/v5.1.0...v5.1.1

    Source code(tar.gz)
    Source code(zip)
  • v5.1.0(May 16, 2019)

  • v5.0.2(May 15, 2019)

  • v5.0.1(May 15, 2019)

    ๐Ÿคฆโ€โ™‚๏ธ

    • Actually changed peerDep to React 16.8 99cef7d

    https://github.com/final-form/react-final-form/compare/v5.0.0...v5.0.1

    Source code(tar.gz)
    Source code(zip)
  • v5.0.0(May 15, 2019)

    ๐ŸŽ‰ v5.0.0 โ€“ HOOKS!!! ๐ŸŽ‰

    First to explain why this change was made... To manage subscriptions to the internal ๐Ÿ Final Form instance, ๐Ÿ React Final Form has been using some legacy lifecycle methods that make the side effect of subscribing to an event emitter cumbersome. Such subscriptions are a perfect use case (no pun intended) for the new React.useEffect() hook. In an effort to modernize and future proof the library, the entire thing has been rewritten to use hooks.

    All the previous tests have been rewritten to use ๐Ÿ React Testing Library, which is a superior way to test React components. None of the tests were removed, so all existing functionality from v4 should work in v5, including some optimizations to minimize superfluous additional renders that were made possible by hooks.

    โš ๏ธ BREAKING CHANGES ๐Ÿ˜ฎ

    Don't worry...there really aren't that many.

    • Requires ^[email protected]. That's where the hooks are. ๐Ÿ™„
    • All deprecated functions provided in FormRenderProps and FormSpyRenderProps have been removed. They have been spitting warnings at you since v3, so you've probably already corrected for this. The following applies to:
      • batch
      • blur
      • change
      • focus
      • initialize
      • mutators
      • reset

    Rather than spreading the FormApi into the render props, you are just given form itself.

    v4

    <Form onSubmit={submit}>{({ reset }) => (
      // fields here
      <button type="button" onClick={reset}>Reset</button>
    )}</Form>
    

    v5

    <Form onSubmit={submit}>{({ form }) => (
      // fields here
      <button type="button" onClick={form.reset}>Reset</button>
    )}</Form>
    
    • Field will no longer rerender when the validate prop. Note: it will still always run the latest validation function you have given it, but it won't rerender when the prop is !==. This is to allow the very common practice of providing an inline => function as a field-level validation function. This change will break the very rare edge case where if you are swapping field-level validation functions with different behaviors on subsequent renders, the field will no longer rerender with the new validation errors. The fix for this is to also change the key prop on Field any time you swap the validate function. See this test for an example of what I mean. There's also a sandbox demonstrating the issue:

    Edit Changing Field Level Validators

    • The previously exported withReactFinalForm HOC has been removed. Now you should use the useForm() hook if you'd like to get the ๐Ÿ Final Form instance out of the context. To ease your transition, you can make your own with a single line of code:
    const withReactFinalForm = Component => props =>
      <Component reactFinalForm={useForm()} {...props} /> 
    

    ๐Ÿ˜Ž New Hook API ๐Ÿ˜Ž

    Because it was so easy to do, ๐Ÿ React Final Form now exports the useField and useFormState hooks that are used internally in Field and FormSpy respectively. Literally the only thing Field and FormSpy do now is call their hook and then figure out if you are trying to render with the component, render, or children prop.

    For example, before v5, if you wanted to create a custom error component that only rerendered when touched or error changed for a field, you'd have to do this:

    v4

    const Error = ({ name }) => (
      <Field name={name} subscription={{ touched: true, error: true }}>
        {field =>
          field.meta.touched && field.meta.error ? (
            <span>{field.meta.error}</span>
          ) : null
        }
      </Field>
    )
    

    ...but now you can do:

    v5

    const Error = ({ name }) => {
      const field = useField(name, { subscription: { touched: true, error: true } })
      return field.meta.touched && field.meta.error ? (
        <span>{field.meta.error}</span>
      ) : null
    }
    

    Not too groundbreakingly different, but these hooks might allow for some composability that was previously harder to do, like this ~clever~ disgusting hack to listen to multiple fields at once.

    Go forth and hook all the things! ๐ŸŽฃ


    Special thanks to @Andarist for giving me such an extensive code review on #467.

    Source code(tar.gz)
    Source code(zip)
  • v4.1.0(Mar 4, 2019)

    ๐ŸŽ‰ New Features ๐ŸŽ‰ (requires [email protected])

    • Two new props to Field: defaultValue and initialValue allow fine grain control over how your field values are initialized at the field level. final-form/react-final-form#387
    • Added meta.modified flag for all fields. A field becomes modified the first time its value changes. Previously, with dirty, if the user returned the value to the initial value, the form state had no evidence that the value had ever changed. This is what modified provides.

    Bug Fixes

    • Fixed displayName of context provider HOC #375

    Type Fixes

    • Updated FieldProps.validate type definition #413
    • Add Typescript typings for third argument of validate function #429

    Build Improvements

    • Externalized babel helpers using @babel/runtime #402
    • More selective on Travis node versions #386
    • Remove unused prop-types dependency #424
    • Better Typescript tests #418
    Source code(tar.gz)
    Source code(zip)
  • v4.0.2(Nov 16, 2018)

A tiny package for JavaScript Web App's state management based on RxJS & Immer

A tiny package for JavaScript Web App's state management based on RxJS & Immer

Xiao Junjiang 12 Oct 19, 2022
A Higher Order Component using react-redux to keep form state in a Redux store

redux-form You build great forms, but do you know HOW users use your forms? Find out with Form Nerd! Professional analytics from the creator of Redux

Redux Form 12.6k Jan 3, 2023
๐Ÿป Bear necessities for state management in React

A small, fast and scaleable bearbones state-management solution. Has a comfy api based on hooks, isn't boilerplatey or opinionated, but still just eno

Poimandres 25.5k Jan 9, 2023
A state management library for React, heavily inspired by vuex

Vuex - But for React! โš› If you know vuex, you know it's as close as we get to a perfect state management library. What if we could do this in the reac

Dana Janoskova 103 Sep 8, 2022
Twitter-Clone-Nextjs - Twitter Clone Built With React JS, Next JS, Recoil for State Management and Firebase as Backend

Twitter Clone This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn de

Basudev 0 Feb 7, 2022
Create a performant distributed context state by synergyzing atomar context pieces and composing reusable state logic.

Synergies Create a performant distributed context state by synergyzing atomar context pieces and composing reusable state logic. synergies is a tiny (

Lukas Bach 8 Nov 8, 2022
๐Ÿ”ฎ tiny robust state management

?? snapstate tiny robust state management ?? npm install @chasemoskal/snapstate ??๏ธ watch for changes to properties ??๏ธ track only the properties you

Chase Moskal 5 Dec 23, 2022
Tiny and powerful state management library.

BitAboutState Tiny and powerful React state management library. 100% Idiomatic React. Install npm install --save @bit-about/state Features 100% Idioma

null 53 Nov 5, 2022
Learning how to use redux - a state management library

Redux Learning how to use redux - a state management library What is Redux? Redux is a state management library for JS apps. It centralizes applicatio

Melvin Ng 3 Jul 18, 2022
High performance personalization & a/b testing example using Next.js, Edge Middleware, and Builder.io

Next.js + Builder.io Personalization & A/B Testing with Edge Middleware This is a fork of Next.js Commerce with Builder.io integrated and using Edge M

Builder.io 25 Dec 25, 2022
Free Open Source High Quality Dashboard based on Bootstrap 4 & React 16: http://dashboards.webkom.co/react/airframe

Airframe React High Quality Dashboard / Admin / Analytics template that works great on any smartphone, tablet or desktop. Available as Open Source as

Mustafa Nabavi 6 Jun 5, 2022
Edvora App is a web application based on an external API, showing data about different types of products and the user can filter these data by choosing a specific state, city or product name. Build with React.js

Edvora App is a web application based on an external API, showing data about different types of products and the user can filter these data by choosing a specific state, city or product name. Build with React.js

Kyrillos Hany 5 Mar 11, 2022
Further split the React Native code based on Metro build to improve performance, providing `Dll` and `Dynamic Imports` features

React-Native Code Splitting Further split the React Native code based on Metro build to improve performance, providing Dll and Dynamic Imports feature

Wuba 126 Dec 29, 2022
An example of a schema-based form system for React.

React Advanced Form An example of a schema-based form system in React. Define your schema, and pass it into the form. Supports basic conditional schem

Tania Rascia 111 Dec 31, 2022
experimental project for babel-plugin-mutable-react-state

Goalist Mutable React Example This example is an attempt to work with babel-plugin-mutable-react-state on a simpler project to see how complicated wou

Reaper 1 Jun 7, 2022
Whoosh - minimalistic React state manager

Whoosh - minimalistic React state manager Whoosh is a React state manager which entire API consists of exactly one function - createShared(). TL;DR ve

Alexander Blk 9 Nov 7, 2022
React Native's Global Alert Component that can be fully customized and without the need of a state.

?? React Native Easy Alert React Native Easy Alert Component. Watch on youtube Easy Alert example app. React Native's Global Alert Component that can

null 9 Feb 21, 2022
Small (0.5 Kb) react hook for getting media breakpoints state info in runtime

tiny-use-media Small (0.5 Kb) react hook for getting media breakpoints state info in runtime Usage npm i tiny-use-media --save Adn in your react code

Valeriy Komlev 51 Dec 13, 2022
This compress library was made with Brotli and Gzip help, for React users who want to make website more performance and reduce JS bundle code

React-compress This compress library was made with Brotli and Gzip help, for React users who want to make website more performance and reduce JS bundl

Koma Human 30 Jan 6, 2023