Skip to content
The React component library for StaticKit
JavaScript Shell
Branch: master
Clone or download
Latest commit c4fe1ee Oct 21, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci Make packaging consistent Oct 11, 2019
script Add release script Jul 26, 2019
src Update core, submit clientName Oct 21, 2019
test Update core, submit clientName Oct 21, 2019
.babelrc Add some tests Oct 11, 2019
.gitignore Make packaging consistent Oct 11, 2019
.prettierrc Add prettier Jul 16, 2019
CHANGELOG.md Update core, submit clientName Oct 21, 2019
LICENSE Add license Sep 20, 2019
README.md Add ci badge Oct 11, 2019
package-lock.json
package.json 1.2.0 Oct 21, 2019
rollup.config.js Update core, submit clientName Oct 21, 2019

README.md

StaticKit React CircleCI

The React component library for StaticKit.

Getting Started

Run the following to install via npm:

npm install @statickit/react

This package assumes that you already have React available as a dependency.

Since we use React Hooks, you must be on React >= 16.8.0.

Simple example

Here's a simple example of a StaticKit-powered form:

import { useForm } from '@statickit/react';

function MyForm() {
  // Call the `useForm` hook in your function component
  const [state, submit] = useForm({
    id: 'XXXXXXXXX'
  });

  // Display success message in place of the form
  if (state.succeeded) {
    return <div>Thank you for signing up!</div>;
  }

  return (
    <form onSubmit={submit}>
      <label htmlFor="email">Email</label>
      <input id="email" type="email" name="email" />
      <button type="submit">Sign up</button>
    </form>
  );
}

At a minimum, all you have to do is use a <form> element and pass submit as the onSubmit handler.

The state object contains the following:

Key Description
submitting A Boolean indicating whether the form is currently submitting
succeeded A Boolean indicating whether the form successfully submitted
errors An Array of server-side validation errors

The errors objects include the following:

Key Description
field The name of the field
message The error message (e.g. "is required")
code The error code (e.g. "REQUIRED" or "EMAIL_FORMAT")

Rendering validation errors

Here's a more advanced example that displays validation errors for the email field:

import { ValidationError, useForm } from '@statickit/react';

function MyForm() {
  const [state, submit] = useForm({
    id: 'XXXXXXXXX'
  });

  if (state.succeeded) {
    return <div>Thank you for signing up!</div>;
  }

  // Render email validation errors and disable the submit button when submitting
  return (
    <form onSubmit={submit}>
      <label htmlFor="email">Email</label>
      <input type="email" name="email" required />
      <ValidationError field="email" prefix="Email" errors={state.errors} />
      <button type="submit" disabled={state.submitting}>
        Sign up
      </button>
    </form>
  );
}

The ValidationError component accepts the following special properties:

  • field - the name of the field for which to display errors (required)
  • errors - the object containing validation errors (required)
  • prefix - the human-friendly name of the field (optional, defaults to This field)

The rest of the props (such as className) are passed along to the <div> wrapper.

You can’t perform that action at this time.