{"id":13787295,"url":"https://github.com/jaredpalmer/formover","last_synced_at":"2025-04-14T10:33:05.880Z","repository":{"id":146971803,"uuid":"131075763","full_name":"jaredpalmer/formover","owner":"jaredpalmer","description":" Build forms that pop bottles 🍾with Formik and React Popper","archived":false,"fork":false,"pushed_at":"2018-05-09T23:24:16.000Z","size":187,"stargazers_count":160,"open_issues_count":1,"forks_count":7,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-27T23:41:52.083Z","etag":null,"topics":["formik","popper","popperjs","react"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"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":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-04-25T23:47:22.000Z","updated_at":"2024-01-19T20:26:53.000Z","dependencies_parsed_at":null,"dependency_job_id":"45445f24-bcfc-40d6-991e-4b9c3e7d59a2","html_url":"https://github.com/jaredpalmer/formover","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaredpalmer%2Fformover","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaredpalmer%2Fformover/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaredpalmer%2Fformover/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaredpalmer%2Fformover/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jaredpalmer","download_url":"https://codeload.github.com/jaredpalmer/formover/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248862700,"owners_count":21173861,"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":["formik","popper","popperjs","react"],"created_at":"2024-08-03T20:00:32.539Z","updated_at":"2025-04-14T10:33:05.845Z","avatar_url":"https://github.com/jaredpalmer.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Formover\n\nFormik x React Popper\n\n## Why?\n\nQuickly build forms that live in popovers like Airbnb's search filters.\n\n![kapture 2018-04-25 at 19 51 50](https://user-images.githubusercontent.com/4060187/39278604-23811ea2-48c2-11e8-9fbe-b8f2b5f7a888.gif)\n\n## How\n\n```\nyarn add formik formover react-popper\n```\n\n```tsx\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { FormikActions, Form, Field } from 'formik';\nimport { FormoverProps, PopoverProps, Formover } from 'formover';\n\nconst Button: React.SFC\u003cany\u003e = ({ innerRef, ...props }) =\u003e (\n  \u003cbutton ref={innerRef} {...props} /\u003e\n);\n\nexport interface FormValues {\n  email: string;\n}\n\nconst App = () =\u003e (\n  \u003cdiv className=\"App\"\u003e\n    \u003ch1 className=\"App-Title\"\u003eFormik + React-Popper = Formover\u003c/h1\u003e\n    \u003cFormover\n      onSubmit={(\n        values: FormValues, // form values\n        formikActions: FormikActions\u003cFormValues\u003e, // formik bag\n        popperActions: PopoverProps // close, toggle, isOpen\n      ) =\u003e {\n        setTimeout(() =\u003e {\n          alert(JSON.stringify(values, null, 2));\n          formikActions.setSubmitting(false);\n          popperActions.close();\n        }, 500);\n      }}\n      initialValues={{ email: '' }}\n      target={({ getTargetProps }) =\u003e (\n        \u003cButton {...getTargetProps()}\u003eHello\u003c/Button\u003e\n      )}\n    \u003e\n      {(props: FormoverProps\u003cFormValues\u003e) =\u003e (\n        \u003cForm\u003e\n          \u003cField name=\"email\" autoFocus={true} placeholder=\"Email\" /\u003e\n          \u003cbutton onClick={props.toggle}\u003eCancel\u003c/button\u003e\n          \u003cbutton type=\"submit\"\u003eApply\u003c/button\u003e\n        \u003c/Form\u003e\n      )}\n    \u003c/Formover\u003e\n  \u003c/div\u003e\n);\n```\n\n![bitmoji](https://render.bitstrips.com/v2/cpanel/6effbe04-03f0-4c2d-a1cd-43777cbebfb6-d1a1e672-c5f5-466f-bff9-82e07b058b8f-v1.png?transparent=1\u0026palette=1\u0026width=246)\n---\n\nMIT License\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaredpalmer%2Fformover","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjaredpalmer%2Fformover","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaredpalmer%2Fformover/lists"}