{"id":40339182,"url":"https://github.com/psaia/react-serial-forms","last_synced_at":"2026-01-20T08:38:20.327Z","repository":{"id":32549610,"uuid":"36131909","full_name":"psaia/react-serial-forms","owner":"psaia","description":"A lightweight and extendable SSR-friendly form library (for React).","archived":false,"fork":false,"pushed_at":"2021-05-10T17:26:27.000Z","size":2807,"stargazers_count":168,"open_issues_count":2,"forks_count":18,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-11-01T13:06:31.893Z","etag":null,"topics":["async","forms","react","react-hooks","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/psaia.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-05-23T16:31:59.000Z","updated_at":"2025-09-26T07:24:39.000Z","dependencies_parsed_at":"2022-09-11T09:01:02.406Z","dependency_job_id":null,"html_url":"https://github.com/psaia/react-serial-forms","commit_stats":null,"previous_names":["levinteractive/react-serial-forms"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/psaia/react-serial-forms","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/psaia%2Freact-serial-forms","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/psaia%2Freact-serial-forms/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/psaia%2Freact-serial-forms/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/psaia%2Freact-serial-forms/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/psaia","download_url":"https://codeload.github.com/psaia/react-serial-forms/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/psaia%2Freact-serial-forms/sbom","scorecard":{"id":113874,"data":{"date":"2025-08-04","repo":{"name":"github.com/psaia/react-serial-forms","commit":"f7f197b8b50635a280653cf70b5e9424b843bb45"},"scorecard":{"version":"v5.2.1-28-gc1d103a9","commit":"c1d103a9bb9f635ec7260bf9aa0699466fa4be0e"},"score":2.2,"checks":[{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#packaging"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#token-permissions"}},{"name":"Code-Review","score":0,"reason":"Found 2/28 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#code-review"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#pinned-dependencies"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#dangerous-workflow"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#binary-artifacts"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#maintained"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#security-policy"}},{"name":"License","score":0,"reason":"license file not detected","details":["Warn: project does not have a license file"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#license"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#fuzzing"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#branch-protection"}},{"name":"Vulnerabilities","score":7,"reason":"3 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#vulnerabilities"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 4 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#sast"}}]},"last_synced_at":"2025-08-15T21:12:05.745Z","repository_id":32549610,"created_at":"2025-08-15T21:12:05.745Z","updated_at":"2025-08-15T21:12:05.745Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28599193,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-20T02:08:49.799Z","status":"ssl_error","status_checked_at":"2026-01-20T02:08:44.148Z","response_time":117,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["async","forms","react","react-hooks","typescript"],"created_at":"2026-01-20T08:38:20.273Z","updated_at":"2026-01-20T08:38:20.321Z","avatar_url":"https://github.com/psaia.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Serial Forms v3\n\n**Note:** Version 3 has been rebuilt from the ground up and is incompatible with\nprior major versions.\n\nSerial Forms is optimized to be mostly unopinionated, fast, and extendible. This\nmodule is useful for complex or large applications with a variety of form\ninput components.\n\n* First-class citizen TypeScript module\n* React hooks interface\n* Simple async-capable validation protocol\n* Simple input masking protocol\n* SSR Friendly\n* Light weight\n* Great form utility belt for the major frameworks - Relay, Apollo, Redux, etc.\n\n```\n                   ▲                ▲\n                   │                │\n                   │                │\n                Values     Validation Results\n                   │                │\n                   │                │\n                   │                │\n\n ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓\n ┃                                                     ┃\n ┃                                                     ┃\n ┃                    Form Instance                    ┃\n ┃                                                     ┃\n ┃                                                     ┃\n ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛\n\n           ▲                │              │\n           │                │              │\n           │                │              │\n    Input Mutations    Validation     Input State\n           │                │              │\n           │                │              │\n           │                ▼              ▼\n\n               ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐\n                ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐\n               │  ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐\n                │\n               └  │   Input Instance    │\n                └ ─\n                  └ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘\n```\n\n## Installation\n\n```\nnpm i --save react-serial-forms\n```\n\n## Usage\n\nBetter documentation is coming soon. See the example below for API implementation.\n\n```typescript\nimport React from \"react\";\nimport FormErrors from \"react-serial-forms/lib/components/FormErrors\";\nimport Input from \"react-serial-forms/lib/components/inputs/Input\";\nimport useForm from \"react-serial-forms/lib/hooks/use-form\";\nimport { validations } from \"react-serial-forms/lib/validation\";\nimport phoneMask from \"react-serial-forms/lib/masks/phone\";\n\nfunction MyComponent() {\n  const [form, saving, onSubmit] = useForm(\n\n    // Set the initial values for the inputs used in the form.\n    {\n      name: \"\",\n      cellPhone: \"\"\n    },\n\n    // Handle the form submission. values =\u003e { cellPhone: ..., name: ... }\n    async values =\u003e {\n      const remoteErrors = await makeRemoteRequestWithValues(values);\n      // Do stuff with errors from the server perhaps.\n    }\n  );\n\n  if (saving) {\n    return \u003cp\u003eForm is saving.\u003c/p\u003e\n  }\n\n  return (\n    \u003cform onSubmit={onSubmit}\u003e\n      \u003cInput\n        type=\"text\"\n        name=\"name\"\n        label=\"Your Name\"\n        form={form}\n        placeholder=\"John Doe\"\n        validations={[validations.required(\"Your name is required.\")]}\n      /\u003e\n      \u003cInput\n        type=\"text\"\n        name=\"cellPhone\"\n        label=\"Your Phone Number\"\n        mask={phoneMask}\n        form={form}\n        placeholder=\"555-555-5555\"\n        validations={[validations.phone(\"A valid phone number is required.\")]}\n      /\u003e\n    \u003c/form\u003e\n  );\n}\n```\n\n\n### Using a custom component\n\n```typescript\nimport React from \"react\";\nimport Textarea from \"../custom-inputs/Textarea\"; // Assume you have your own.\nimport { BaseInputProps } from \"react-serial-forms/lib/types\";\nimport Form from \"react-serial-forms/lib/form\";\nimport Errors from \"react-serial-forms/lib/components/FormErrors\";\nimport useInput from \"react-serial-forms/lib/hooks/use-input\";\n\nexport interface Props extends BaseInputProps\u003cForm\u003e {\n  bold: boolean;\n  italic: boolean;\n  underline: boolean;\n  ol: boolean;\n  ul: boolean;\n}\n\nexport default function Wysiwyg(props: Props) {\n  const [id, dirty, currentValue, errors, onChange] = useInput({\n    name: props.name,\n    getValueFromEvent: val =\u003e val,\n    defaultValue: \"\",\n    form: props.form,\n    validations: props.validations\n  });\n\n  return (\n    \u003cdiv className=\"input-wrapper\"\u003e\n      {props.label ? \u003clabel htmlFor={id}\u003e{props.label}\u003c/label\u003e : null}\n      \u003cTextarea\n        onChange={onChange}\n        value={currentValue}\n        bold={props.bold}\n        italic={props.italic}\n        underline={props.underline}\n        ol={props.ol}\n        ul={props.ul}\n      /\u003e\n      {props.helper ? (\n        \u003csmall\n          className=\"helper-text\"\n          dangerouslySetInnerHTML={{ __html: props.helper }}\n        /\u003e\n      ) : null}\n      \u003cErrors errors={dirty ? errors : []} /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\nNow you can use this component simply by importing it:\n\n```typescript\n...\n  \u003cWysiwyg\n    type=\"text\"\n    name=\"description\"\n    bold={true}\n    italic={false}\n    ol={true}\n    underline={false}\n    ul={false}\n    form={form}\n    validations={[validations.required(\"A description is required.\")]}\n  /\u003e\n...\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpsaia%2Freact-serial-forms","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpsaia%2Freact-serial-forms","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpsaia%2Freact-serial-forms/lists"}