formik-paste
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.2 • Public • Published

    Storybook | CHANGELOG | npm

    formik-paste

    Super-charged Paste components using Formik to handle form state.

    This library lightly wraps Paste components with a required name: string prop that connects them to a Formik form field. Simply change form component imports from @twilio-paste/core to formik-paste, and set their name prop. Doing so will link the Paste component with a Formik field under the hood!

    Getting started

    npm install formik-paste

    Usage:

    import { Button, FormLabel, FormHelpText } from '@twilio-paste/core';
    import { Theme } from '@twilio-paste/theme';
    import { Formik } from 'formik';
    import { FormInput } from 'formik-paste';
    import * as React from 'react';
     
    function App() {
      return (
        <Theme.Provider theme="default">
          <Formik
            initialValues={{ emailAddress: '' }}
            onSubmit={(values) => {
              window.alert(JSON.stringify(values));
            }}
          >
            {({ handleSubmit }) => (
              <form onSubmit={handleSubmit}>
                <FormLabel htmlFor="emailAddress">Email Address</FormLabel>
                <FormInput id="emailAddress" name="emailAddress" type="email" placeholder="example@twilio.com" />
     
                <Button variant="primary" type="submit">
                  Submit
                </Button>
              </form>
            )}
          </Formik>
        </Theme.Provider>
      );
    }

    Contributing

    Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

    Please make sure to update tests as appropriate.

    Acknowledgements

    Heavily inspired by formik-antd.

    License

    MIT

    Install

    npm i formik-paste

    DownloadsWeekly Downloads

    5

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    841 kB

    Total Files

    133

    Last publish

    Collaborators

    • avatar