{"id":13787306,"url":"https://github.com/jaredpalmer/formik-effect","last_synced_at":"2025-04-07T05:10:28.787Z","repository":{"id":57240536,"uuid":"127316872","full_name":"jaredpalmer/formik-effect","owner":"jaredpalmer","description":"Declarative component for managing side-effects in Formik forms. 580 bytes","archived":false,"fork":false,"pushed_at":"2023-01-25T04:03:48.000Z","size":301,"stargazers_count":167,"open_issues_count":12,"forks_count":13,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-30T21:13:57.910Z","etag":null,"topics":["form","formik","react"],"latest_commit_sha":null,"homepage":"https://npm.im/formik-effect","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jaredpalmer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-29T16:16:44.000Z","updated_at":"2025-01-07T14:16:05.000Z","dependencies_parsed_at":"2023-02-01T17:31:57.262Z","dependency_job_id":null,"html_url":"https://github.com/jaredpalmer/formik-effect","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaredpalmer%2Fformik-effect","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaredpalmer%2Fformik-effect/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaredpalmer%2Fformik-effect/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaredpalmer%2Fformik-effect/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jaredpalmer","download_url":"https://codeload.github.com/jaredpalmer/formik-effect/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247595335,"owners_count":20963943,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["form","formik","react"],"created_at":"2024-08-03T20:00:32.622Z","updated_at":"2025-04-07T05:10:28.768Z","avatar_url":"https://github.com/jaredpalmer.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# Formik Effect\n\nDeclarative Formik component for side-effects. Use with caution. Please. I. beg. you.\n\n```\nnpm install formik-effect --save\n```\n\n**Note: this has peer dependencies of `prop-types`, `react`, and `formik` (obvs)**\n\n## The Problem\n\nFormik is an uncontrolled component. However, there are times when you want to trigger a side effect based on a state change. By design, Formik does not expose a prop for you to do this because I'm terrified as to how it would be abused--it encourages people to attempt to \"sync\" Formik's state in elsewhere (cough like in a Redux store cough cough). Anyways, please don't do that. You never ever ever ever want to store the same state in 2 places in a React application because it is almost impossible to keep them in sync unless you are a goddamn jedi. You may think it's working, and high five a teammate, but you are a just a lifecycle method away from lots and lots of pain and I can guarantee you are not considering all the edge cases. Sooooo....\n\n**SAY IT WITH ME:**\n\n**\"I WILL NOT USE THIS TO STORE FORMIK STATE ELSEWHERE IN MY APP.\"**  \n**\"I WILL NOT USE THIS TO STORE FORMIK STATE ELSEWHERE IN MY APP.\"**  \n**\"I WILL NOT USE THIS TO STORE FORMIK STATE ELSEWHERE IN MY APP.\"**  \n\n## Basic Usage\n\nImport the `\u003cEffect \u003e` component and put it inside any Formik form. It renders `null`! Pass it an `onChange()` function and it will be called whenever your Formik form's state updates. \n\n```js\nimport React from 'react'\nimport { Formik, Field, Form } from 'formik'\nimport { Effect } from 'formik-effect'\n\nexport const Signup = () =\u003e\n  \u003cdiv\u003e\n    \u003ch1\u003eMy Cool Form with a SideEffect\u003c/h1\u003e\n    \u003cFormik\n      onSubmit={values =\u003e console.log(values)}\n      initialValues={{ firstName: '', lastName: '', email: '' }}\n      render={props =\u003e\n        \u003cForm className=\"whatever\"\u003e\n          \u003cEffect onChange={(currentFormikState, nextFormikState) =\u003e {\n               // do whatevs\n               // FYI if you alter state it will cause another render\n            }} \n          /\u003e\n          \u003cField name=\"firstName\" placeholder=\"First Name\" /\u003e\n          \u003cField name=\"lastName\" placeholder=\"Last Name\" /\u003e\n          \u003cField name=\"email\" type=\"email\" placeholder=\"Email Address\" /\u003e\n          \u003cbutton type=\"submit\"\u003eSubmit\u003c/button\u003e\n         \n        \u003c/Form\u003e}\n    /\u003e\n  \u003c/div\u003e;\n```\n\n### API\n\nOnly one! \n\n\n#### `onChange: (currentState: FormikState\u003cValues\u003e, nextState: FormikState\u003cValues\u003e =\u003e void`\n\nPut your side effect here.\n\n`FormikState` includes:\n\n- `values`\n- `errors`\n- `touched`\n- `isSubmitting`\n\nUnder the hood this calls `componentWillReceiveProps()`. When Formik refactors for React 16.3, it will use `componentDidUpdate`. Either way, it does shallow comparison on context with triple equals, which may not be what you want. Luckily, this whole component is like 500 bytes so you could just copy pasta it into your app. \n\n## Future Work\n\nWhen Formik is updated to React 16.3, this library will need to be updated for use without PropTypes.\n\n## Author\n\n- Jared Palmer [@jaredpalmer](https://twitter.com/jaredpalmer)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaredpalmer%2Fformik-effect","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjaredpalmer%2Fformik-effect","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaredpalmer%2Fformik-effect/lists"}