formsync 0.1.0 → 0.1.1

package/README.md

@@ -1,61 +1,139 @@
-# FormSync – Serverless & Secure
+# FormSync
 
-**Fast, secure and serverless form submissions — without any backend.**
+**FormSync is the easiest way to accept and manage form submissions without building a backend.**
 
-FormSync lets developers collect and manage form submissions effortlessly. Integrate it into your HTML or React projects with a single action URL — no server, no database and no configuration needed.
+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.
 
 ---
 
-## Overview
+## Basic Usage
 
-FormSync is a **serverless form handling platform** designed for developers who want to:
+```tsx
+import { FormSyncForm } from "formsync";
 
--   Accept form submissions instantly
--   Skip backend setup or maintenance
--   Keep their data secure and reliable
--   Integrate seamlessly into existing projects
+<FormSyncForm formId="YOUR_FORM_ID">
+    <input name="email" />
+    <button type="submit">Submit</button>
+</FormSyncForm>
+```
 
-Built for speed, simplicity and modern web apps.
+That’s it.
+No backend. No API routes.
 
 ---
 
-## Features
+## With Success & Error Handling
 
--   **No Backend Required** — Collect and manage form data without writing a single line of server code.
--   **Secure by Design** — Built with CORS protection and HTTPS endpoints.
--   **Pre-Built Components** — Use our pre-built components to quickly integrate forms into your app.
--   **Easy Integration** — Works out of the box with HTML and React forms.
--   **Instant Deployment** — Paste the action URL and start receiving submissions immediately.
--   **Serverless Architecture** — Fully hosted and powered by Vercel.
+```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>
+```
 
 ---
 
-## Basic form example
+## Using the FormSync Button (Recommended)
+
+FormSync provides a **special submit button** that automatically shows loading state.
 
-Add the FormSync endpoint as your form’s `action`:
+```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
-<form action="https://formsync.app/api/submit/your-form-id" method="POST">
-    <input type="text" name="name" placeholder="Your Name" required />
-    <input type="email" name="email" placeholder="Your Email" required />
-    <button type="submit">Send</button>
-</form>
+<input type="text" name="_fs_hp" hidden />
 ```
 
-> That’s it — your form is live and connected.
+Bots fill it → submissions are ignored.
+Humans never see it.
 
-## Why FormSync
+---
 
-FormSync was built to remove the friction of backend setup when handling forms.
-Whether you’re building a static site, a Next.js app, or a quick prototype — FormSync keeps your workflow lightweight and efficient.
+## 🧩 Works With
 
-## Policies
+* React
+* Next.js (App Router & Pages Router)
+* Vite
+* CRA
+* Remix (client side)
 
--   [Privacy Policy](https://www.formsync.app/policies/privacy-policy)
--   [Terms of Service](https://formsync.app/policies/terms-of-service)
--   [Trademark Policy](https://formsync.app/policies/trademark-policy)
--   [All Policy Documents](https://formsync.app/policies)
+---
+
+## 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       |
 
 ---
 
-> **FormSync** — by [SudhuCodes](https://sudhucodes.com) > _Serverless. Secure. Reliable._
+## Links
+
+Website: [https://formsync.app](https://formsync.app)

package/dist/index.cjs

@@ -0,0 +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});

package/dist/index.d.cts

@@ -0,0 +1,29 @@
+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;
+    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> {
+    formId: string;
+    onSuccess?: (res: FormSyncResponse) => void;
+    onSubmitError?: (err: FormSyncResponse) => void;
+}
+declare function FormSyncForm({ ...props }: FormSyncFormProps): react_jsx_runtime.JSX.Element;
+
+declare function FormSyncButton({ loadingText, children, ...props }: FormSyncButtonProps): react_jsx_runtime.JSX.Element;
+
+export { FormSyncButton, type FormSyncButtonProps, type FormSyncError, FormSyncForm, type FormSyncResponse, type FormSyncSuccess };

package/dist/index.d.ts

@@ -0,0 +1,29 @@
+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;
+    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> {
+    formId: string;
+    onSuccess?: (res: FormSyncResponse) => void;
+    onSubmitError?: (err: FormSyncResponse) => void;
+}
+declare function FormSyncForm({ ...props }: FormSyncFormProps): react_jsx_runtime.JSX.Element;
+
+declare function FormSyncButton({ loadingText, children, ...props }: FormSyncButtonProps): react_jsx_runtime.JSX.Element;
+
+export { FormSyncButton, type FormSyncButtonProps, type FormSyncError, FormSyncForm, type FormSyncResponse, type FormSyncSuccess };

package/dist/index.js

@@ -0,0 +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};

package/package.json

@@ -1,21 +1,49 @@
 {
     "name": "formsync",
-    "version": "0.1.0",
-    "description": "**Fast, secure and serverless form submissions — without any backend.**",
-    "main": "index.js",
+    "version": "0.1.1",
+    "description": "The Easiest Way to Accept Form Submissions",
+    "keywords": [
+        "formsync",
+        "react",
+        "nextjs",
+        "forms",
+        "saas",
+        "form-handler"
+    ],
+    "main": "dist/index.js",
+    "module": "dist/index.mjs",
+    "types": "dist/index.d.ts",
+    "exports": {
+        ".": {
+            "import": "./dist/index.js",
+            "require": "./dist/index.mjs"
+        }
+    },
+    "files": [
+        "dist"
+    ],
     "scripts": {
-        "test": "echo \"Error: no test specified\" && exit 1"
+        "build": "tsup",
+        "dev": "tsup --watch"
+    },
+    "peerDependencies": {
+        "react": ">=17"
     },
+    "devDependencies": {
+        "@types/react": "^19.2.7",
+        "react": "^18.2.0",
+        "tsup": "^8.0.1",
+        "typescript": "^5.3.0"
+    },
+    "author": "FormSync",
+    "license": "MIT",
+    "type": "module",
     "repository": {
         "type": "git",
-        "url": "git+https://github.com/sudhucodes/formsync.git"
+        "url": "https://github.com/sudhucodes/formsync.git"
     },
-    "keywords": [],
-    "author": "",
-    "license": "ISC",
-    "type": "commonjs",
+    "homepage": "https://formsync.app",
     "bugs": {
         "url": "https://github.com/sudhucodes/formsync/issues"
-    },
-    "homepage": "https://github.com/sudhucodes/formsync#readme"
+    }
 }