# @formik/client

> ## Quick start

Latest version **0.3.0** (published 2020-02-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install @formik/client
pnpm add @formik/client
yarn add @formik/client
bun add @formik/client
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.0 |
| Published | 2020-02-09 |
| First published | 2020-02-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 25.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Jared Palmer |
| Maintainers | jaredpalmer |

## Links

- npm: https://www.npmjs.com/package/@formik/client
- npm.io page: https://npm.io/package/@formik/client

## Recent versions

- 0.3.0 (latest) — 2020-02-09
- 0.2.0 — 2020-02-09
- 0.1.0 — 2020-02-09

## README

# Formik Cloud Client

## Quick start

```
npm install @formik/client
```

## Example Usage

```jsx
import { FormikCloudClient } from '@formik/client';

const client = FormikCloudClient('MY_PROJECT_SLUG');

const MyForm = props => {
  const [name, setName] = React.useState();
  const [email, setEmail] = React.useState();
  const [error, setError] = React.useState(null);
  const [success, setSuccess] = React.useState(false);
  const [loading, setLoading] = React.useState(false);

  const handleSubmit = async event => {
    event.preventDefault();
    setLoading(true);
    try {
      await client.submitForm('MY_FORM_SLUG', { name, email });
      setLoading(false);
      setSuccess(true);
    } catch (error) {
      setLoading(false);
      setError(error);
      setSuccess(false);
    }
  };

  if (!!success) {
    return <div>Thank you!</div>;
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name
        <input
          type="text"
          value={name}
          required
          onChange={e => setName(e.target.value)}
        />
      </label>
      <label>
        Email
        <input
          type="text"
          value={email}
          required
          onChange={e => setEmail(e.target.value)}
        />
      </label>
      <button type="submit" disabled={loading}>
        {loading ? '...loading' : 'Submit'}
      </button>
      {error && error.text ? (
        <div style={{ color: 'red' }}>{error.text}}</div>
      ) : null}
    </form>
  );
};
```

---
_Source: https://npm.io/package/@formik/client · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._