formsync 0.1.1 → 0.1.4

package/README.md

@@ -1,139 +1,5 @@
-# FormSync
-
-**FormSync is the easiest way to accept and manage form submissions without building a backend.**
-
-FormSync lets you submit HTML & React forms directly to **formsync.app** with built-in spam protection, simple callbacks and zero server code.
-
-👉 **[https://formsync.app](https://formsync.app)**
-
-## Installation
-
-```bash
-npm install formsync
-```
-
-or
-
-```bash
-yarn add formsync
-```
-
----
-
-## Create a Form on FormSync
-
-1. Go to **[https://formsync.app](https://formsync.app)**
-2. Create a new form
-3. Copy your **Form ID**
-
-You’ll need this `formId` to submit data.
-
----
-
-## Basic Usage
-
-```tsx
-import { FormSyncForm } from "formsync";
-
-<FormSyncForm formId="YOUR_FORM_ID">
-    <input name="email" />
-    <button type="submit">Submit</button>
-</FormSyncForm>
-```
-
-That’s it.
-No backend. No API routes.
-
----
-
-## With Success & Error Handling
-
-```tsx
-import { FormSyncForm } from "formsync";
-
-<FormSyncForm
-    formId="YOUR_FORM_ID"
-    onSuccess={(res) => console.log("Success:", res)}
-    onSubmitError={(err) => console.error("Error:", err)}
->
-    <input name="email" />
-    <button type="submit">Submit</button>
-</FormSyncForm>
-```
-
----
-
-## Using the FormSync Button (Recommended)
-
-FormSync provides a **special submit button** that automatically shows loading state.
-
-```tsx
-import { FormSyncForm, FormSyncButton } from "formsync";
-
-<FormSyncForm formId="YOUR_FORM_ID">
-    <input name="email" />
-
-    <FormSyncButton>
-        Submit
-    </FormSyncButton>
-</FormSyncForm>
-```
-
-### Default behavior
-
-* Shows **“Submit”**
-* On submit → shows **“Submitting…”**
-* Button auto-disables while submitting
-
----
-
-## Spam Protection
-
-FormSync automatically injects a hidden honeypot field:
-
-```html
-<input type="text" name="_fs_hp" hidden />
-```
-
-Bots fill it → submissions are ignored.
-Humans never see it.
-
----
-
-## 🧩 Works With
-
-* React
-* Next.js (App Router & Pages Router)
-* Vite
-* CRA
-* Remix (client side)
-
----
-
-## API Reference
-
-### `<FormSyncForm />`
-
-| Prop            | Type            | Description                            |
-| --------------- | --------------- | -------------------------------------- |
-| `formId`        | `string`        | **Required** Form ID from formsync.app |
-| `onSuccess`     | `(res) => void` | Called on successful submission        |
-| `onSubmitError` | `(err) => void` | Called on failed submission            |
-| `...props`      | `form props`    | All native `<form>` attributes         |
-
----
-
-### `<FormSyncButton />`
-
-| Feature            | Supported |
-| ------------------ | --------- |
-| Loading state      | yes       |
-| Disabled on submit | yes       |
-| Custom UI          | yes       |
-| Optional usage     | yes       |
-
----
-
-## Links
-
-Website: [https://formsync.app](https://formsync.app)
+# FormSync
+
+**FormSync is the easiest way to accept and manage form submissions without building a backend.**
+
+👉 Create your first form at [https://formsync.app](https://formsync.app)

package/dist/index.cjs

@@ -1,2 +1,2 @@
 "use client";
-"use strict";var a=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var h=(o,t)=>{for(var e in t)a(o,e,{get:t[e],enumerable:!0})},P=(o,t,e,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of C(t))!b.call(o,r)&&r!==e&&a(o,r,{get:()=>t[r],enumerable:!(n=v(t,r))||n.enumerable});return o};var g=o=>P(a({},"__esModule",{value:!0}),o);var L={};h(L,{FormSyncButton:()=>T,FormSyncForm:()=>w});module.exports=g(L);var c=require("react"),S=require("react/jsx-runtime"),y=(0,c.createContext)(void 0),f=({children:o})=>{let[t,e]=(0,c.useState)(!1);return(0,S.jsx)(y.Provider,{value:{loading:t,setLoading:e},children:o})},s=()=>{let o=(0,c.useContext)(y);if(!o)throw new Error("useFormSyncContext must be used within FormSyncContextProvider");return o};var m=require("react/jsx-runtime");function R({formId:o,onSuccess:t,onSubmitError:e,children:n,...r}){let{setLoading:u}=s();return(0,m.jsxs)("form",{onSubmit:async d=>{d.preventDefault();let F=d.currentTarget,x=new FormData(F);try{u(!0);let i=await fetch(`http://localhost:8000/v1/s/${o}`,{method:"POST",body:x,headers:{Accept:"application/json"}}),p=await i.json();i.ok?t?.(p):e?.(p),i.ok&&F.reset()}catch{e?.({success:!1,message:"Network error"})}finally{u(!1)}},...r,children:[n,(0,m.jsx)("input",{type:"text",name:"_fs_hp",hidden:!0})]})}function w({...o}){return(0,m.jsx)(f,{children:(0,m.jsx)(R,{...o})})}var l=require("react/jsx-runtime");function T({loadingText:o,children:t,...e}){let{loading:n}=s();return(0,l.jsx)("button",{type:"submit",disabled:n,...e,children:n?o||"Submitting...":t})}0&&(module.exports={FormSyncButton,FormSyncForm});
+"use strict";var m=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var L=(n,e)=>{for(var o in e)m(n,o,{get:e[o],enumerable:!0})},g=(n,e,o,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of E(e))!b.call(n,s)&&s!==o&&m(n,s,{get:()=>e[s],enumerable:!(r=R(e,s))||r.enumerable});return n};var h=n=>g(m({},"__esModule",{value:!0}),n);var k={};L(k,{useFormSync:()=>u});module.exports=h(k);var t=require("react"),I="https://api.formsync.app";function u(n){let[e,o]=(0,t.useState)(!1),r=(0,t.useRef)(n);return r.current=n,{submit:(0,t.useCallback)(async p=>{p.preventDefault();let{formId:y,onSuccess:l,onError:f,baseURL:F}=r.current,S=(F??I).replace(/\/$/,""),i=p.currentTarget,d=new FormData(i);o(!0);try{let c=await fetch(`${S}/v1/s/${y}`,{method:"POST",body:d,headers:{Accept:"application/json"}}),a=await c.json();c.ok?(i.reset(),l?.(a)):f?.(a)}catch(c){let a={success:!1,message:c instanceof Error?c.message:"An unexpected error occurred."};f?.(a)}finally{o(!1)}},[]),isLoading:e}}0&&(module.exports={useFormSync});

package/dist/index.d.cts

@@ -1,29 +1,27 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import React$1, { ButtonHTMLAttributes } from 'react';
-
-type FormSyncSuccess = {
-    success: true;
-    submissionId: string;
-    message?: string;
-};
-type FormSyncError = {
-    success: false;
+type FormSyncResponse = {
+    success: boolean;
     message: string;
-    fieldErrors?: Record<string, string>;
 };
-type FormSyncResponse = FormSyncSuccess | FormSyncError;
-interface FormSyncButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    loadingText?: string;
-    children: React.ReactNode;
-}
-
-interface FormSyncFormProps extends React$1.FormHTMLAttributes<HTMLFormElement> {
+interface FormSyncOptions {
+    /** Your FormSync form ID */
     formId: string;
+    /** Called when the form is submitted successfully */
     onSuccess?: (res: FormSyncResponse) => void;
-    onSubmitError?: (err: FormSyncResponse) => void;
+    /** Called when the form submission fails */
+    onError?: (err: FormSyncResponse) => void;
+    /**
+     * Base URL for the FormSync API.
+     * @default "https://api.formsync.app"
+     */
+    baseURL?: string;
+}
+interface FormSyncInstance {
+    /** Attach directly to a form's onSubmit prop */
+    submit: (e: React.FormEvent<HTMLFormElement>) => void;
+    /** Reactive loading state — true while the request is in flight */
+    isLoading: boolean;
 }
-declare function FormSyncForm({ ...props }: FormSyncFormProps): react_jsx_runtime.JSX.Element;
 
-declare function FormSyncButton({ loadingText, children, ...props }: FormSyncButtonProps): react_jsx_runtime.JSX.Element;
+declare function useFormSync(options: FormSyncOptions): FormSyncInstance;
 
-export { FormSyncButton, type FormSyncButtonProps, type FormSyncError, FormSyncForm, type FormSyncResponse, type FormSyncSuccess };
+export { type FormSyncInstance, type FormSyncOptions, type FormSyncResponse, useFormSync };

package/dist/index.d.ts

@@ -1,29 +1,27 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import React$1, { ButtonHTMLAttributes } from 'react';
-
-type FormSyncSuccess = {
-    success: true;
-    submissionId: string;
-    message?: string;
-};
-type FormSyncError = {
-    success: false;
+type FormSyncResponse = {
+    success: boolean;
     message: string;
-    fieldErrors?: Record<string, string>;
 };
-type FormSyncResponse = FormSyncSuccess | FormSyncError;
-interface FormSyncButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    loadingText?: string;
-    children: React.ReactNode;
-}
-
-interface FormSyncFormProps extends React$1.FormHTMLAttributes<HTMLFormElement> {
+interface FormSyncOptions {
+    /** Your FormSync form ID */
     formId: string;
+    /** Called when the form is submitted successfully */
     onSuccess?: (res: FormSyncResponse) => void;
-    onSubmitError?: (err: FormSyncResponse) => void;
+    /** Called when the form submission fails */
+    onError?: (err: FormSyncResponse) => void;
+    /**
+     * Base URL for the FormSync API.
+     * @default "https://api.formsync.app"
+     */
+    baseURL?: string;
+}
+interface FormSyncInstance {
+    /** Attach directly to a form's onSubmit prop */
+    submit: (e: React.FormEvent<HTMLFormElement>) => void;
+    /** Reactive loading state — true while the request is in flight */
+    isLoading: boolean;
 }
-declare function FormSyncForm({ ...props }: FormSyncFormProps): react_jsx_runtime.JSX.Element;
 
-declare function FormSyncButton({ loadingText, children, ...props }: FormSyncButtonProps): react_jsx_runtime.JSX.Element;
+declare function useFormSync(options: FormSyncOptions): FormSyncInstance;
 
-export { FormSyncButton, type FormSyncButtonProps, type FormSyncError, FormSyncForm, type FormSyncResponse, type FormSyncSuccess };
+export { type FormSyncInstance, type FormSyncOptions, type FormSyncResponse, useFormSync };

package/dist/index.js

@@ -1,2 +1,2 @@
 "use client";
-import{createContext as f,useContext as S,useState as l}from"react";import{jsx as x}from"react/jsx-runtime";var d=f(void 0),F=({children:o})=>{let[e,t]=l(!1);return x(d.Provider,{value:{loading:e,setLoading:t},children:o})},r=()=>{let o=S(d);if(!o)throw new Error("useFormSyncContext must be used within FormSyncContextProvider");return o};import{jsx as m,jsxs as C}from"react/jsx-runtime";function v({formId:o,onSuccess:e,onSubmitError:t,children:n,...p}){let{setLoading:s}=r();return C("form",{onSubmit:async i=>{i.preventDefault();let a=i.currentTarget,y=new FormData(a);try{s(!0);let c=await fetch(`http://localhost:8000/v1/s/${o}`,{method:"POST",body:y,headers:{Accept:"application/json"}}),u=await c.json();c.ok?e?.(u):t?.(u),c.ok&&a.reset()}catch{t?.({success:!1,message:"Network error"})}finally{s(!1)}},...p,children:[n,m("input",{type:"text",name:"_fs_hp",hidden:!0})]})}function L({...o}){return m(F,{children:m(v,{...o})})}import{jsx as b}from"react/jsx-runtime";function D({loadingText:o,children:e,...t}){let{loading:n}=r();return b("button",{type:"submit",disabled:n,...t,children:n?o||"Submitting...":e})}export{D as FormSyncButton,L as FormSyncForm};
+import{useState as l,useCallback as F,useRef as S}from"react";var d="https://api.formsync.app";function R(o){let[m,s]=l(!1),t=S(o);return t.current=o,{submit:F(async r=>{r.preventDefault();let{formId:p,onSuccess:f,onError:c,baseURL:i}=t.current,u=(i??d).replace(/\/$/,""),a=r.currentTarget,y=new FormData(a);s(!0);try{let e=await fetch(`${u}/v1/s/${p}`,{method:"POST",body:y,headers:{Accept:"application/json"}}),n=await e.json();e.ok?(a.reset(),f?.(n)):c?.(n)}catch(e){let n={success:!1,message:e instanceof Error?e.message:"An unexpected error occurred."};c?.(n)}finally{s(!1)}},[]),isLoading:m}}export{R as useFormSync};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "formsync",
-    "version": "0.1.1",
+    "version": "0.1.4",
     "description": "The Easiest Way to Accept Form Submissions",
     "keywords": [
         "formsync",