{"_id":"react-bulk-form","_rev":"39-4902ae08022d78cd963be02fdf9eb454","name":"react-bulk-form","dist-tags":{"latest":"1.0.11"},"versions":{"1.0.8-9":{"name":"react-bulk-form","version":"1.0.8-9","keywords":["cdg","react","bulk","form"],"author":{"url":"CDG","name":"Choi Deok Gyeong"},"license":"ISC","_id":"react-bulk-form@1.0.8-9","maintainers":[{"name":"hjcdg1","email":"hjcdg197@gmail.com"}],"homepage":"https://github.com/hjcdg1/react-bulk-form#readme","bugs":{"url":"https://github.com/hjcdg1/react-bulk-form/issues"},"dist":{"shasum":"4771eafd29889db573d25afa509e579890bb71a6","tarball":"https://registry.npmjs.org/react-bulk-form/-/react-bulk-form-1.0.8-9.tgz","fileCount":31,"integrity":"sha512-SH4R/x5Hkgm77JJTGOG/iVGbsEtjE4G9asxCmteDt0djGI4NFh11geEQB5nUF6llOhp9c9vgdWJEsyyP/VWpFg==","signatures":[{"sig":"MEUCIBgLdu57+qsoKawXHOQmo8KGH4zF+gMLoc05SakwwxzgAiEAzWXqz37QsjIwMOH4X2tgFKexmW/0RLwcShEUag9ERq4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":24562},"main":"./dist/index.cjs","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.cjs"}},"gitHead":"8706a6606157fcac32477f28869213dfa42aebf7","scripts":{"build":"rm -rf dist && npm run build:types && npm run build:runtime","build:types":"tsc","build:runtime":"node ./esbuild.mjs"},"_npmUser":{"name":"hjcdg1","email":"hjcdg197@gmail.com"},"repository":{"url":"git+https://github.com/hjcdg1/react-bulk-form.git","type":"git"},"_npmVersion":"10.9.0","description":"A simple React library for managing form-related states in bulk.","directories":{},"_nodeVersion":"20.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^19.0.0","eslint":"^8.57.1","esbuild":"^0.25.0","typescript":"^5.8.2","@babel/core":"^7.26.9","@types/react":"^19.0.10","@babel/preset-env":"^7.26.9","@babel/preset-react":"^7.26.3","eslint-plugin-react":"^7.37.4","esbuild-plugin-babel":"^0.2.3","eslint-config-airbnb":"^19.0.4","eslint-plugin-import":"^2.31.0","eslint-config-prettier":"^10.0.2","eslint-plugin-jsx-a11y":"^6.10.2","eslint-plugin-prettier":"^5.2.3","@babel/preset-typescript":"^7.26.0","@typescript-eslint/parser":"^7.18.0","eslint-plugin-react-hooks":"^4.6.2","eslint-config-airbnb-typescript":"^18.0.0","@typescript-eslint/eslint-plugin":"^7.18.0"},"peerDependencies":{"react":">= 18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-bulk-form_1.0.8-9_1741253317679_0.4784344507527527","host":"s3://npm-registry-packages-npm-production"}},"1.0.8-10":{"name":"react-bulk-form","version":"1.0.8-10","keywords":["cdg","react","bulk","form"],"author":{"url":"CDG","name":"Choi Deok Gyeong"},"license":"ISC","_id":"react-bulk-form@1.0.8-10","maintainers":[{"name":"hjcdg1","email":"hjcdg197@gmail.com"}],"homepage":"https://github.com/hjcdg1/react-bulk-form#readme","bugs":{"url":"https://github.com/hjcdg1/react-bulk-form/issues"},"dist":{"shasum":"154e157515ca0ac424d1a02314872e206f09768a","tarball":"https://registry.npmjs.org/react-bulk-form/-/react-bulk-form-1.0.8-10.tgz","fileCount":34,"integrity":"sha512-F2NgnsY2U8LE8BzrWM49AQFH7N8ff0pIuncowW73p7YVfMcG/0O27xCQRq2ElMGielgoNQcXvmtEbfhwYhb1uQ==","signatures":[{"sig":"MEYCIQCcYI4lWj2SL/vwZjXWxwxWX1AcMGp7WO1kzlcLDvaRHgIhAMmvzKdtpWXYvVKSyuYVpK+k+5DbT7ETNmqPS8tkCXbd","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":26920},"main":"./dist/index.cjs","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.cjs"}},"gitHead":"f552efd13cd81b4a6f160a06b93e88b0768ec57b","scripts":{"build":"rm -rf dist && npm run build:types && npm run build:runtime","build:types":"tsc","build:runtime":"node ./esbuild.mjs"},"_npmUser":{"name":"hjcdg1","email":"hjcdg197@gmail.com"},"repository":{"url":"git+https://github.com/hjcdg1/react-bulk-form.git","type":"git"},"_npmVersion":"10.9.0","description":"A simple React library for managing form-related states in bulk.","directories":{},"_nodeVersion":"20.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^19.0.0","eslint":"^8.57.1","esbuild":"^0.25.0","typescript":"^5.8.2","@babel/core":"^7.26.9","@types/react":"^19.0.10","@babel/preset-env":"^7.26.9","@babel/preset-react":"^7.26.3","eslint-plugin-react":"^7.37.4","esbuild-plugin-babel":"^0.2.3","eslint-config-airbnb":"^19.0.4","eslint-plugin-import":"^2.31.0","eslint-config-prettier":"^10.0.2","eslint-plugin-jsx-a11y":"^6.10.2","eslint-plugin-prettier":"^5.2.3","@babel/preset-typescript":"^7.26.0","@typescript-eslint/parser":"^7.18.0","eslint-plugin-react-hooks":"^4.6.2","eslint-config-airbnb-typescript":"^18.0.0","@typescript-eslint/eslint-plugin":"^7.18.0"},"peerDependencies":{"react":">= 18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-bulk-form_1.0.8-10_1741342927831_0.925492513056384","host":"s3://npm-registry-packages-npm-production"}},"1.0.9":{"name":"react-bulk-form","version":"1.0.9","keywords":["cdg","react","bulk","form"],"author":{"url":"CDG","name":"Choi Deok Gyeong"},"license":"ISC","_id":"react-bulk-form@1.0.9","maintainers":[{"name":"hjcdg1","email":"hjcdg197@gmail.com"}],"homepage":"https://github.com/hjcdg1/react-bulk-form#readme","bugs":{"url":"https://github.com/hjcdg1/react-bulk-form/issues"},"dist":{"shasum":"dab4619ca4cc9bfb67312a5edfa6dba7e830051d","tarball":"https://registry.npmjs.org/react-bulk-form/-/react-bulk-form-1.0.9.tgz","fileCount":34,"integrity":"sha512-I6swIODu6FPeMF/oVyFBQ+r0rOH0nWKrKIAfQ7OmiKuxU0X/UXwhn8yLD1LbedKZIxAQ2z0bLUXXlbyvsIx88Q==","signatures":[{"sig":"MEUCIQDigWDyrI18YXcI+5H4gfQMn3yYjx80jCjeeRMwCJeAKwIgcMS/et8C15USo88whZL740uPrK4Kg0jhFPvSmf2w6zc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":25475},"main":"./dist/index.cjs","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.cjs"}},"gitHead":"0a8cc9dbbe744c520deb5aed647e3dfca15bcc10","scripts":{"build":"rm -rf dist && npm run build:types && npm run build:runtime","build:types":"tsc","build:runtime":"node ./esbuild.mjs"},"_npmUser":{"name":"hjcdg1","email":"hjcdg197@gmail.com"},"repository":{"url":"git+https://github.com/hjcdg1/react-bulk-form.git","type":"git"},"_npmVersion":"10.9.0","description":"A simple React library for managing form-related states in bulk.","directories":{},"_nodeVersion":"20.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^19.0.0","eslint":"^8.57.1","esbuild":"^0.25.0","typescript":"^5.8.2","@babel/core":"^7.26.9","@types/react":"^19.0.10","@babel/preset-env":"^7.26.9","@babel/preset-react":"^7.26.3","eslint-plugin-react":"^7.37.4","esbuild-plugin-babel":"^0.2.3","eslint-config-airbnb":"^19.0.4","eslint-plugin-import":"^2.31.0","eslint-config-prettier":"^10.0.2","eslint-plugin-jsx-a11y":"^6.10.2","eslint-plugin-prettier":"^5.2.3","@babel/preset-typescript":"^7.26.0","@typescript-eslint/parser":"^7.18.0","eslint-plugin-react-hooks":"^4.6.2","eslint-config-airbnb-typescript":"^18.0.0","@typescript-eslint/eslint-plugin":"^7.18.0"},"peerDependencies":{"react":">= 18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-bulk-form_1.0.9_1741597579392_0.9611922385856608","host":"s3://npm-registry-packages-npm-production"}},"1.0.10":{"name":"react-bulk-form","version":"1.0.10","keywords":["cdg","react","bulk","form"],"author":{"url":"CDG","name":"Choi Deok Gyeong"},"license":"ISC","_id":"react-bulk-form@1.0.10","maintainers":[{"name":"hjcdg1","email":"hjcdg197@gmail.com"}],"homepage":"https://github.com/hjcdg1/react-bulk-form#readme","bugs":{"url":"https://github.com/hjcdg1/react-bulk-form/issues"},"dist":{"shasum":"3084d99c33382c6a801ce62fd1da890404b9090b","tarball":"https://registry.npmjs.org/react-bulk-form/-/react-bulk-form-1.0.10.tgz","fileCount":31,"integrity":"sha512-tQOrEthKAeHiDE/E+Zwmz9YJFUk+AgcTPb9fw4dUZrmUf9DXMnOjraq6TiCkoLmuo5me/9QHwB+6FptOgIf65Q==","signatures":[{"sig":"MEUCIQClhfBUJfUvdGF0TkdIfVOf9kBI8ShWY8p/R0EqLghtSQIgKsez2J/0sxDtkCuaniYPmi+/WVY1F8n/Gn4cjtwxdyw=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":24990},"main":"./dist/index.cjs","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.cjs"}},"gitHead":"646ccc1a4ddcc3aa6a8f9bfa656656753e65a2e2","scripts":{"build":"rm -rf dist && npm run build:types && npm run build:runtime","build:types":"tsc","build:runtime":"node ./esbuild.mjs"},"_npmUser":{"name":"hjcdg1","email":"hjcdg197@gmail.com"},"repository":{"url":"git+https://github.com/hjcdg1/react-bulk-form.git","type":"git"},"_npmVersion":"10.9.0","description":"A simple React library for managing form-related states in bulk.","directories":{},"_nodeVersion":"20.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^19.0.0","eslint":"^8.57.1","esbuild":"^0.25.0","typescript":"^5.8.2","@babel/core":"^7.26.9","@types/react":"^19.0.10","@babel/preset-env":"^7.26.9","@babel/preset-react":"^7.26.3","eslint-plugin-react":"^7.37.4","esbuild-plugin-babel":"^0.2.3","eslint-config-airbnb":"^19.0.4","eslint-plugin-import":"^2.31.0","eslint-config-prettier":"^10.0.2","eslint-plugin-jsx-a11y":"^6.10.2","eslint-plugin-prettier":"^5.2.3","@babel/preset-typescript":"^7.26.0","@typescript-eslint/parser":"^7.18.0","eslint-plugin-react-hooks":"^4.6.2","eslint-config-airbnb-typescript":"^18.0.0","@typescript-eslint/eslint-plugin":"^7.18.0"},"peerDependencies":{"react":">= 18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-bulk-form_1.0.10_1741691551234_0.735545883679358","host":"s3://npm-registry-packages-npm-production"}},"1.0.11":{"name":"react-bulk-form","version":"1.0.11","author":{"name":"Choi Deok Gyeong","url":"CDG"},"description":"A simple React library for managing form-related states in bulk.","keywords":["cdg","react","bulk","form"],"license":"ISC","repository":{"type":"git","url":"git+https://github.com/hjcdg1/react-bulk-form.git"},"publishConfig":{"access":"public"},"types":"./dist/index.d.ts","module":"./dist/index.mjs","main":"./dist/index.cjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.cjs"}},"scripts":{"build:types":"tsc","build:runtime":"node ./esbuild.mjs","build":"rm -rf dist && npm run build:types && npm run build:runtime"},"devDependencies":{"@babel/core":"^7.26.9","@babel/preset-env":"^7.26.9","@babel/preset-react":"^7.26.3","@babel/preset-typescript":"^7.26.0","@types/react":"^19.0.10","@typescript-eslint/eslint-plugin":"^7.18.0","@typescript-eslint/parser":"^7.18.0","esbuild":"^0.25.0","esbuild-plugin-babel":"^0.2.3","eslint":"^8.57.1","eslint-config-airbnb":"^19.0.4","eslint-config-airbnb-typescript":"^18.0.0","eslint-config-prettier":"^10.0.2","eslint-plugin-import":"^2.31.0","eslint-plugin-jsx-a11y":"^6.10.2","eslint-plugin-prettier":"^5.2.3","eslint-plugin-react":"^7.37.4","eslint-plugin-react-hooks":"^4.6.2","react":"^19.0.0","typescript":"^5.8.2"},"peerDependencies":{"react":">= 18.0.0"},"_id":"react-bulk-form@1.0.11","gitHead":"0620a6f66fc553fddd5068f7485d90cd7bc987f5","bugs":{"url":"https://github.com/hjcdg1/react-bulk-form/issues"},"homepage":"https://github.com/hjcdg1/react-bulk-form#readme","_nodeVersion":"20.18.0","_npmVersion":"10.9.0","dist":{"integrity":"sha512-MIPQaT8CSmqFJ3Jcf98tzb7bpiujRQExFQXdtAEUtECrnID9RdvqrKTJmSsiNgWHohIFwcKvka4HHtI/lmRgjw==","shasum":"b9ad3f3b22344fab0aaea5190ad585256ea05e9f","tarball":"https://registry.npmjs.org/react-bulk-form/-/react-bulk-form-1.0.11.tgz","fileCount":31,"unpackedSize":27127,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIEULMznLz4lVdAq/NcGLc1Nm/Mu2v1dYfVII/dFT/DvMAiAUAcrHvwte6/1brVPz6mLUdTnW2if+NqS81Ew4g91awQ=="}]},"_npmUser":{"name":"hjcdg1","email":"hjcdg197@gmail.com"},"directories":{},"maintainers":[{"name":"hjcdg1","email":"hjcdg197@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-bulk-form_1.0.11_1741927524056_0.5431051766221457"},"_hasShrinkwrap":false}},"time":{"created":"2025-03-02T05:01:58.982Z","modified":"2025-03-14T04:45:24.420Z","1.0.0":"2025-03-02T05:01:59.223Z","1.0.1":"2025-03-02T05:10:45.688Z","1.0.2":"2025-03-02T05:58:00.622Z","1.0.3":"2025-03-02T06:00:12.885Z","1.0.4":"2025-03-02T06:06:16.915Z","1.0.5":"2025-03-02T06:14:22.041Z","1.0.6":"2025-03-02T06:30:48.689Z","1.0.7":"2025-03-02T07:03:42.217Z","1.0.8":"2025-03-02T16:25:38.447Z","1.0.8-1":"2025-03-04T06:39:36.232Z","1.0.8-2":"2025-03-04T06:47:37.529Z","1.0.8-3":"2025-03-04T07:41:30.702Z","1.0.8-4":"2025-03-04T09:10:41.895Z","1.0.8-5":"2025-03-04T15:01:18.339Z","1.0.8-6":"2025-03-04T15:47:00.705Z","1.0.8-7":"2025-03-06T03:43:10.880Z","1.0.8-8":"2025-03-06T03:56:51.965Z","1.0.8-9":"2025-03-06T09:28:37.839Z","1.0.8-10":"2025-03-07T10:22:08.008Z","1.0.9":"2025-03-10T09:06:19.569Z","1.0.10":"2025-03-11T11:12:31.418Z","1.0.11":"2025-03-14T04:45:24.240Z"},"bugs":{"url":"https://github.com/hjcdg1/react-bulk-form/issues"},"author":{"name":"Choi Deok Gyeong","url":"CDG"},"license":"ISC","homepage":"https://github.com/hjcdg1/react-bulk-form#readme","keywords":["cdg","react","bulk","form"],"repository":{"type":"git","url":"git+https://github.com/hjcdg1/react-bulk-form.git"},"description":"A simple React library for managing form-related states in bulk.","maintainers":[{"name":"hjcdg1","email":"hjcdg197@gmail.com"}],"readme":"# react-bulk-form\n\nA simple React library for managing form-related states in bulk.\n\n## Mental Model\n\nIt manages form field values and errors(i.e., validation results based on statically declared rules, for colocation) in bulk, and tracks form-level or field-level status.\n\nHow to implement the UX of forms based on these states is not a concern of this package, and therefore it minimizes secondary interfaces.\n\n## Install\n\n```bash\n$ npm install react-bulk-form\n\n// or\n$ yarn add react-bulk-form\n```\n\n## Usage\n\n#### Define Types\n\nYou should define the following two types to use this package.\n\n```ts\n/**\n * Define the type of the form values, which should be object type.\n * Each property should not be `undefined`.\n */\ntype PostFormValues = {\n  title: string;\n  content: string;\n}\n\n/**\n * Define the type representing the keys of the form validation rules to use.\n * If you don't use the validation rules, you don't need to define this type.\n * These keys don't need to match the field names, for better flexibility.\n */\ntype PostFormRuleKey = 'titleMinLengthCheck' | 'titleMaxLengthCheck' | 'contentMinLengthCheck';\n```\n\n#### useForm\n\n```ts\nimport { useForm } from 'react-bulk-form';\n\nconst {\n  /**\n   * The values of the form.\n   * The type of this object is the `PostFormValues` type.\n   *\n   * Example: `{ title: 'current title', content: 'current content' }`\n   */\n  values,\n\n  /**\n   * The errors of the form.\n   * The type of each property name is `string` type, for considering the errors set by `setErrors`,\n   * but it supports auto-completion for properties corresponding to the `PostFormRuleKey` type.\n   *\n   * Example: `{ titleMinLengthCheck: true }`\n   */\n  errors,\n\n  /**\n   * The fields whose values differ from their default values.\n   * The type of each property name is the `keyof PostFormValues` type.\n   *\n   * Example: `{ title: true }`\n   */\n  dirtyFields,\n\n  /**\n   * The fields whose values have been changed. (Regardless of matching their default value.)\n   * The type of each property name is the `keyof PostFormValues` type.\n   *\n   * Example: `{ title: true }`\n   */\n  touchedFields,\n\n  /**\n   * The flags representing the status of the form.\n   */\n  flags: {\n    /**\n     * Whether the values of the form are valid, based on the validation rules.\n     * It equals to `Object.keys(errors).length === 0`.\n     */\n    isValid,\n\n    /**\n     * Whether the values of the form are different from the default values.\n     * It equals to `Object.keys(dirtyFields).length > 0`.\n     */\n    isDirty,\n  },\n\n  /**\n   * Set the values of the form. (It supports partial updates.)\n   *\n   * Example: `setValues({ title: 'new title' })`\n   */\n  setValues,\n\n  /**\n   * Set the errors of the form manually. (It supports partial updates.)\n   * Those errors will be cleared when the values or the validation rules of the form are changed.\n   * It is recommended to use this only when you need to perform heavy validation(e.g., async API calls)\n   * for one-time validation(e.g., in submit handler). For other cases, don't use this.\n   *\n   * Example: `setErrors({ titleDuplicationCheck: true })`\n   */\n  setErrors,\n\n  /**\n   * Reset the values and the validation rules of the form to the default values, and clear the errors.\n   */\n  reset,\n\n  /**\n   * Commit the values of the form to the default values. (`flags.isDirty` will be set to `false`.)\n   * In general, it is used right after submitting the form, for refreshing the default values.\n   */\n  commit,\n} = useForm<PostFormValues, PostFormRuleKey>({\n  /**\n   * Set default values of the form.\n   * The type of this object should be the `PostFormValues` type.\n   */\n  defaultValues: {\n    title: '',\n    content: '',\n  },\n\n  /**\n   * Set validation rules for the form.\n   * The type of each property name should be the `PostFormRuleKey` type.\n   */\n  rules: {\n    titleMinLengthCheck: (values) => values.title.length >= 4,\n    titleMaxLengthCheck: (values) => values.title.length <= 128,\n    contentMinLengthCheck: (values) => values.content.length >= 16,\n  },\n});\n```\n\n#### FormProvider, useFormContext\n\n```tsx\nimport { useForm, FormProvider, useFormContext } from 'react-bulk-form';\n\n// The parent component provides the form to the children.\nfunction Parent() {\n  const form = useForm<PostFormValues, PostFormRuleKey>({ ... });\n  ...\n\n  return (\n    <FormProvider form={form}>\n      <Child />\n    </FormProvider>\n  );\n}\n\n// The child component can use the form provided from `<FormProvider>`.\nfunction Child() {\n  const {\n    values,\n    errors,\n    ...\n  } = useFormContext<PostFormValues, PostFormRuleKey>();\n  ...\n}\n```\n","readmeFilename":"README.md"}