@formik/client v0.3.0

Formik Cloud Client

Quick start

npm install @formik/client

Example Usage

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>
  );
};