https://github.com/jaredpalmer/formover

Build forms that pop bottles 🍾with Formik and React Popper
https://github.com/jaredpalmer/formover

formik popper popperjs react

Last synced: about 1 month ago
JSON representation

Build forms that pop bottles 🍾with Formik and React Popper

• Host: GitHub
• URL: https://github.com/jaredpalmer/formover
• Owner: jaredpalmer
• Created: 2018-04-25T23:47:22.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-05-09T23:24:16.000Z (over 6 years ago)
• Last Synced: 2024-06-26T09:42:30.658Z (3 months ago)
• Topics: formik, popper, popperjs, react
• Language: TypeScript
• Homepage:
• Size: 183 KB
• Stars: 160
• Watchers: 4
• Forks: 7
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Formover

Formik x React Popper

## Why?

Quickly build forms that live in popovers like Airbnb's search filters.

![kapture 2018-04-25 at 19 51 50](https://user-images.githubusercontent.com/4060187/39278604-23811ea2-48c2-11e8-9fbe-b8f2b5f7a888.gif)

## How

```

yarn add formik formover react-popper

```

```tsx

import * as React from 'react';

import * as ReactDOM from 'react-dom';

import { FormikActions, Form, Field } from 'formik';

import { FormoverProps, PopoverProps, Formover } from 'formover';

const Button: React.SFC = ({ innerRef, ...props }) => (

  

);

export interface FormValues {

  email: string;

}

const App = () => (

  


    
Formik + React-Popper = Formover

    , // formik bag

        popperActions: PopoverProps // close, toggle, isOpen

      ) => {

        setTimeout(() => {

          alert(JSON.stringify(values, null, 2));

          formikActions.setSubmitting(false);

          popperActions.close();

        }, 500);

      }}

      initialValues={{ email: '' }}

      target={({ getTargetProps }) => (

        Hello

      )}

    >

      {(props: FormoverProps) => (

        

          

          Cancel

          Apply

        

      )}

    

  

);

```


![bitmoji](https://render.bitstrips.com/v2/cpanel/6effbe04-03f0-4c2d-a1cd-43777cbebfb6-d1a1e672-c5f5-466f-bff9-82e07b058b8f-v1.png?transparent=1&palette=1&width=246)

---

MIT License