React Library

Official React components for Spike forms

The @spike-forms/react package provides React hooks and components for easy form integration.

Installation

npm install @spike-forms/react

Quick Start

import { useForm } from '@spike-forms/react';

function ContactForm() {
  const { state, handleSubmit, reset } = useForm('YOUR_FORM_SLUG');

  return (
    <form onSubmit={handleSubmit}>
      <input type="email" name="email" required />
      <textarea name="message" required />
      
      <button type="submit" disabled={state.submitting}>
        {state.submitting ? 'Sending...' : 'Send'}
      </button>
      
      {state.succeeded && <p>Thanks!</p>}
      {state.errors && <p>Error: {state.errors[0]?.message}</p>}
    </form>
  );
}

useForm Hook

Options

const { state, handleSubmit, reset } = useForm('FORM_SLUG', {
  data: { source: 'website' },  // Extra data to include
  endpoint: 'https://spike.ac'  // Custom endpoint (optional)
});

State Object

Property	Type	Description
submitting	boolean	Form is being submitted
succeeded	boolean	Submission successful
errors	array	Validation/submission errors

Methods

Method	Description
handleSubmit	Form submit handler
reset	Reset form state

SpikeForm Component

For simpler use cases:

import { SpikeForm } from '@spike-forms/react';

function ContactPage() {
  return (
    <SpikeForm formSlug="YOUR_FORM_SLUG">
      <input type="email" name="email" required />
      <textarea name="message" required />
      <button type="submit">Send</button>
    </SpikeForm>
  );
}

ValidationError Component

Display field-specific errors:

import { useForm, ValidationError } from '@spike-forms/react';

function ContactForm() {
  const { state, handleSubmit } = useForm('YOUR_FORM_SLUG');

  return (
    <form onSubmit={handleSubmit}>
      <input type="email" name="email" required />
      <ValidationError field="email" errors={state.errors} />
      
      <textarea name="message" required />
      <ValidationError field="message" errors={state.errors} />
      
      <button type="submit">Send</button>
    </form>
  );
}

With File Uploads

function FileForm() {
  const { state, handleSubmit } = useForm('YOUR_FORM_SLUG');

  return (
    <form onSubmit={handleSubmit}>
      <input type="email" name="email" required />
      <input type="file" name="attachment" />
      <button type="submit">Upload</button>
    </form>
  );
}

TypeScript

Full TypeScript support included:

import { useForm, FormState } from '@spike-forms/react';

interface ContactData {
  email: string;
  message: string;
}

function ContactForm() {
  const { state, handleSubmit } = useForm<ContactData>('YOUR_FORM_SLUG');
  // state is typed as FormState<ContactData>
}