Form Intelligence for React.

Connect a React form using the FormLint JavaScript SDK. You keep your existing inputs and submission flow; FormLint creates optional feedback directly below each mapped field.

One SDK. Your React app.

First, create a project with your field mapping, rules, allowed origins and public key. Install the SDK package from your own FormLint site:

npm install https://YOUR_SITE_HOST/sdk/formlint-widget-0.1.0.tgz

Replace the host with your public site’s URL. This is the built @formlint/widget package, with no separate React package required.

Connect when the form mounts.

Use a ref for the form, then attach the SDK in an effect. The SDK creates the inline feedback; no separate suggestion element is needed. Pass your evaluation URL and project public key as props. Replace the example form action with your existing submission destination or handler.

'use client';
import { useEffect, useRef } from 'react';
import { attach, getProvider } from '@formlint/widget';

export default function QuoteForm({ endpoint, publicKey }) {
  const formRef = useRef(null);

  useEffect(() => {
    let disposed = false;
    let widget;

    async function connect() {
      try {
        const provider = await getProvider(endpoint, publicKey);
        if (disposed || !formRef.current) return;

        widget = attach({
          form: formRef.current,
          endpoint,
          key: publicKey,
          fields: ['description'],
          provider
        });
      } catch {
        // Leave the host form usable and quiet when discovery is unavailable.
      }
    }

    void connect();
    return () => {
      disposed = true;
      widget?.destroy();
    };
  }, [endpoint, publicKey]);

  // Keep your existing form action or onSubmit handler.
  return (
    <form ref={formRef} action="/YOUR_SUBMIT_ENDPOINT" method="post">
      <label>
        Describe your project
        <textarea name="description" />
      </label>
      <button type="submit">Request a quote</button>
    </form>
  );
}

Clean up when it leaves.

The cleanup calls widget.destroy() and ignores provider discovery that completes after cleanup. This also handles React’s extra development setup and cleanup cycle. See React’s effect documentation for the lifecycle details.

Use this in a client component when your framework supports server rendering. The form can render on the server; the browser connection starts in the effect. If you change the endpoint or public key, the effect reconnects using the new values.

Let FormLint handle the intelligence.

The description mapping must match your saved project. Change the rules and visitor messages in FormLint, and explain pre-submit processing in your form’s privacy information. FormLint leaves your original submission behavior intact.