Skip to main content
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

PropertyTypeDescription
submittingbooleanForm is being submitted
succeededbooleanSubmission successful
errorsarrayValidation/submission errors

​
Methods

MethodDescription
handleSubmitForm submit handler
resetReset 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>
}