{"_id":"@aminnairi/react-form","_rev":"8-af309acb0c6a44e91dda8cf06c577e0d","name":"@aminnairi/react-form","description":"Form utilities for React written in TypeScript","dist-tags":{"latest":"2.0.3"},"versions":{"0.1.0":{"name":"@aminnairi/react-form","version":"0.1.0","keywords":["react","form","input","textarea","checkbox","radio","select","validation","error","hook"],"author":{"url":"https://github.com/aminnairi","name":"Amin NAIRI"},"license":"MIT","_id":"@aminnairi/react-form@0.1.0","maintainers":[{"name":"aminnairi","email":"nairi.amin@gmail.com"}],"homepage":"https://github.com/aminnairi/react-form","bugs":{"url":"https://github.com/aminnairi/react-form/issues"},"dist":{"shasum":"ea6b6ff8db46777d572aca987d299f9c5113abb1","tarball":"https://registry.npmjs.org/@aminnairi/react-form/-/react-form-0.1.0.tgz","fileCount":7,"integrity":"sha512-rET2YCIcUANcC9dU4ShWarhZlfqqWFuxBiniZSaG6+ut72Yeg0rLbfOtkPvbjy7r8ISrCSNnMOJVzqmlva1gXA==","signatures":[{"sig":"MEYCIQCOo4NnEDH+X/XJEYiKzA93lhkbgShx3Aaxn2oUlxHTnQIhAM/1mh4mxGTHD3iiTM4vpdBBBagBRDcU0sbhoE8W2xt6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18061},"main":"dist/index.common.js","types":"dist/index.d.ts","module":"dist/index.module.js","browser":"dist/index.browser.js","gitHead":"34c6226b9ad532a0aa78143f37a2f310848da1f1","scripts":{"build":"rollup --config rollup.config.ts --configPlugin esbuild","types":"tsc --project tsconfig.json --declaration --emitDeclarationOnly"},"_npmUser":{"name":"aminnairi","email":"nairi.amin@gmail.com"},"repository":{"url":"git+https://github.com/aminnairi/react-form.git","type":"git"},"_npmVersion":"8.19.2","description":"Form utilities for React written in TypeScript","directories":{},"sideEffects":false,"_nodeVersion":"20.3.1","_hasShrinkwrap":false,"devDependencies":{"rollup":"3.25.3","typescript":"5.1.5","@types/react":"18.2.14","rollup-plugin-delete":"2.0.0","@rollup/plugin-terser":"0.4.3","rollup-plugin-esbuild":"5.0.0"},"peerDependencies":{"react":"18.2.0"},"_npmOperationalInternal":{"tmp":"tmp/react-form_0.1.0_1687987407899_0.2795193311230171","host":"s3://npm-registry-packages"}},"1.0.0":{"name":"@aminnairi/react-form","version":"1.0.0","keywords":["react","form","input","textarea","checkbox","radio","select","validation","error","hook"],"author":{"url":"https://github.com/aminnairi","name":"Amin NAIRI"},"license":"MIT","_id":"@aminnairi/react-form@1.0.0","maintainers":[{"name":"aminnairi","email":"nairi.amin@gmail.com"}],"homepage":"https://github.com/aminnairi/react-form","bugs":{"url":"https://github.com/aminnairi/react-form/issues"},"dist":{"shasum":"879dba340895522d4f7741b21beb6dd921eedf1c","tarball":"https://registry.npmjs.org/@aminnairi/react-form/-/react-form-1.0.0.tgz","fileCount":7,"integrity":"sha512-ZGLiBG/EHyhEYeKLr2gkCji0SCy6sjITto87/ExG4XSvkGc7AD1VjH7dLtyuD9H3jh61AsCPDW0UozSc2qGbug==","signatures":[{"sig":"MEUCIGgpCgQq8gAWquCiHImTd+QodTXAuCrzESIjUQevLqHMAiEAsmeFjxz7iSE5OvcyjEgWldP2Km5eFSOoyrs3UCeQbUw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":26047},"main":"dist/index.common.js","types":"dist/index.d.ts","module":"dist/index.module.js","browser":"dist/index.browser.js","gitHead":"f549e69cf8771874c58a54f9e57cf800031b0cdb","scripts":{"build":"rollup --config rollup.config.ts --configPlugin esbuild","types":"tsc --project tsconfig.json --declaration --emitDeclarationOnly"},"_npmUser":{"name":"aminnairi","email":"nairi.amin@gmail.com"},"repository":{"url":"git+https://github.com/aminnairi/react-form.git","type":"git"},"_npmVersion":"10.1.0","description":"Form utilities for React written in TypeScript","directories":{},"sideEffects":false,"_nodeVersion":"20.6.1","dependencies":{"@mobily/ts-belt":"3.13.1"},"_hasShrinkwrap":false,"devDependencies":{"rollup":"3.25.3","typescript":"5.1.5","@types/react":"18.2.14","rollup-plugin-delete":"2.0.0","@rollup/plugin-terser":"0.4.3","rollup-plugin-esbuild":"5.0.0","@rollup/plugin-node-resolve":"15.2.3"},"peerDependencies":{"react":"18.2.0"},"_npmOperationalInternal":{"tmp":"tmp/react-form_1.0.0_1697753270040_0.621332883053813","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@aminnairi/react-form","version":"1.0.1","keywords":["react","form","input","textarea","checkbox","radio","select","validation","error","hook"],"author":{"url":"https://github.com/aminnairi","name":"Amin NAIRI"},"license":"MIT","_id":"@aminnairi/react-form@1.0.1","maintainers":[{"name":"aminnairi","email":"nairi.amin@gmail.com"}],"homepage":"https://github.com/aminnairi/react-form","bugs":{"url":"https://github.com/aminnairi/react-form/issues"},"dist":{"shasum":"9cbfdfe8f53848913fc7e0c6cac99e047aeddb04","tarball":"https://registry.npmjs.org/@aminnairi/react-form/-/react-form-1.0.1.tgz","fileCount":7,"integrity":"sha512-mHgpzIYgDQ7bSi6d9lamdQPXyb+dgw+CwRTfEE/OetQWK6qoLQckutL5yr0VIlJIYnZvXbUS76Z9LG6VQfqBgw==","signatures":[{"sig":"MEYCIQDEODshUwayB1LdWbcbSG/repAfUYAyREb1rrHg2Iv8KgIhAKlJ7At/nY/km6/EQktHRGilL6p3a+AUA0pysBq22s/j","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":28482},"main":"dist/index.common.js","types":"dist/index.d.ts","module":"dist/index.module.js","browser":"dist/index.browser.js","gitHead":"9c04a08c84ed857ee258f6333dd1139954dc5d99","scripts":{"build":"rollup --config rollup.config.ts --configPlugin esbuild","types":"tsc --project tsconfig.json --declaration --emitDeclarationOnly"},"_npmUser":{"name":"aminnairi","email":"nairi.amin@gmail.com"},"repository":{"url":"git+https://github.com/aminnairi/react-form.git","type":"git"},"_npmVersion":"10.1.0","description":"Form utilities for React written in TypeScript","directories":{},"sideEffects":false,"_nodeVersion":"20.6.1","dependencies":{"@mobily/ts-belt":"3.13.1"},"_hasShrinkwrap":false,"devDependencies":{"rollup":"3.25.3","typescript":"5.1.5","@types/react":"18.2.14","rollup-plugin-delete":"2.0.0","@rollup/plugin-terser":"0.4.3","rollup-plugin-esbuild":"5.0.0","@rollup/plugin-node-resolve":"15.2.3"},"peerDependencies":{"react":"18.2.0"},"_npmOperationalInternal":{"tmp":"tmp/react-form_1.0.1_1697807964485_0.7694748731751067","host":"s3://npm-registry-packages"}},"1.1.0":{"name":"@aminnairi/react-form","version":"1.1.0","keywords":["react","form","input","textarea","checkbox","radio","select","validation","error","hook"],"author":{"url":"https://github.com/aminnairi","name":"Amin NAIRI"},"license":"MIT","_id":"@aminnairi/react-form@1.1.0","maintainers":[{"name":"aminnairi","email":"nairi.amin@gmail.com"}],"homepage":"https://github.com/aminnairi/react-form","bugs":{"url":"https://github.com/aminnairi/react-form/issues"},"dist":{"shasum":"1df6d6de7608e8e4edfda765c1055cb6eae77912","tarball":"https://registry.npmjs.org/@aminnairi/react-form/-/react-form-1.1.0.tgz","fileCount":7,"integrity":"sha512-JXNt4nshhVoxx8ju44FA75p7zQ34ODtIjAZEd+XHzTZCPunZDLHYmxbtKIess7PANAp1kX7Wy5kXuetyWhWeZA==","signatures":[{"sig":"MEYCIQCQkccn2yzVUtqnVBE7SeG6BKwWdXkGJaQ0W9WrBeVZqwIhALmPCqQQZau7tQEnQp8QRxXgsw35ZiUgW4qigpSSlePa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":28506},"main":"dist/index.common.js","types":"dist/index.d.ts","module":"dist/index.module.js","browser":"dist/index.browser.js","gitHead":"1d109808e95927fc57236341d18fa5f0490f8b84","scripts":{"build":"rollup --config rollup.config.ts --configPlugin esbuild","types":"tsc --project tsconfig.json --declaration --emitDeclarationOnly"},"_npmUser":{"name":"aminnairi","email":"nairi.amin@gmail.com"},"repository":{"url":"git+https://github.com/aminnairi/react-form.git","type":"git"},"_npmVersion":"10.1.0","description":"Form utilities for React written in TypeScript","directories":{},"sideEffects":false,"_nodeVersion":"20.6.1","dependencies":{"@mobily/ts-belt":"3.13.1"},"_hasShrinkwrap":false,"devDependencies":{"rollup":"3.25.3","typescript":"5.1.5","@types/react":"18.2.14","rollup-plugin-delete":"2.0.0","@rollup/plugin-terser":"0.4.3","rollup-plugin-esbuild":"5.0.0","@rollup/plugin-node-resolve":"15.2.3"},"peerDependencies":{"react":"18.2.0"},"_npmOperationalInternal":{"tmp":"tmp/react-form_1.1.0_1697808263925_0.2681023721075968","host":"s3://npm-registry-packages"}},"1.1.1":{"name":"@aminnairi/react-form","version":"1.1.1","keywords":["react","form","input","textarea","checkbox","radio","select","validation","error","hook"],"author":{"url":"https://github.com/aminnairi","name":"Amin NAIRI"},"license":"MIT","_id":"@aminnairi/react-form@1.1.1","maintainers":[{"name":"aminnairi","email":"nairi.amin@gmail.com"}],"homepage":"https://github.com/aminnairi/react-form","bugs":{"url":"https://github.com/aminnairi/react-form/issues"},"dist":{"shasum":"de2ad40ffdc7c3f3a53326033be5e53c45b73a65","tarball":"https://registry.npmjs.org/@aminnairi/react-form/-/react-form-1.1.1.tgz","fileCount":7,"integrity":"sha512-FQCM8m4A9x0Hol2vNLDgWqron1cQLz45TnFeXLdjSPyobPi0KO2dRcbhvSfYPY57eZ/CPDnzog2WWCkWYZeJ7Q==","signatures":[{"sig":"MEYCIQC9IfcOgGUPOrSj3N4zBolUuE8pinDvTna2R9/vayCIUAIhAN4MWhLb9fCUfzKtaQjkr5yg1hoiHx+/B2scEnZ3Wjmk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":28497},"main":"dist/index.common.js","types":"dist/index.d.ts","module":"dist/index.module.js","browser":"dist/index.browser.js","gitHead":"f437d7404e3ac5d21105279f0335ddce23084107","scripts":{"build":"rollup --config rollup.config.ts --configPlugin esbuild","types":"tsc --project tsconfig.json --declaration --emitDeclarationOnly"},"_npmUser":{"name":"aminnairi","email":"nairi.amin@gmail.com"},"repository":{"url":"git+https://github.com/aminnairi/react-form.git","type":"git"},"_npmVersion":"10.1.0","description":"Form utilities for React written in TypeScript","directories":{},"sideEffects":false,"_nodeVersion":"20.6.1","dependencies":{"@mobily/ts-belt":"3.13.1"},"_hasShrinkwrap":false,"devDependencies":{"rollup":"3.25.3","typescript":"5.1.5","@types/react":"18.2.14","rollup-plugin-delete":"2.0.0","@rollup/plugin-terser":"0.4.3","rollup-plugin-esbuild":"5.0.0","@rollup/plugin-node-resolve":"15.2.3"},"peerDependencies":{"react":"18.2.0"},"_npmOperationalInternal":{"tmp":"tmp/react-form_1.1.1_1697808827754_0.36959640419036766","host":"s3://npm-registry-packages"}},"2.0.0":{"name":"@aminnairi/react-form","version":"2.0.0","keywords":["react","form","input","textarea","checkbox","radio","select","validation","error","hook"],"author":{"url":"https://github.com/aminnairi","name":"Amin NAIRI"},"license":"MIT","_id":"@aminnairi/react-form@2.0.0","maintainers":[{"name":"aminnairi","email":"nairi.amin@gmail.com"}],"homepage":"https://github.com/aminnairi/react-form","bugs":{"url":"https://github.com/aminnairi/react-form/issues"},"dist":{"shasum":"f8681f27b36e6e6266470b4d6859d29dd820b6b6","tarball":"https://registry.npmjs.org/@aminnairi/react-form/-/react-form-2.0.0.tgz","fileCount":7,"integrity":"sha512-ErvTibNPfpKQ44C0usE41YEXcjShkPoB6MNbcg3TCWctYy/QJmvf7h7MUOV40pUnApRjomD6YFXwJS0BKvJryw==","signatures":[{"sig":"MEUCIGyODJFY4+Xlwtx5BEkEegahRl4wNK/NzDV5EbMCNBfNAiEAwpLqDIaOkq+2qrJeJCzUvKgcFDmwDFBzX51b2r/LHOg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22128},"main":"dist/index.common.js","types":"dist/index.d.ts","module":"dist/index.module.js","browser":"dist/index.browser.js","gitHead":"d4f73c271ca315d69497a2c3be2402886dd1f673","scripts":{"build":"rollup --config rollup.config.ts --configPlugin esbuild","types":"tsc --project tsconfig.json --declaration --emitDeclarationOnly"},"_npmUser":{"name":"aminnairi","email":"nairi.amin@gmail.com"},"repository":{"url":"git+https://github.com/aminnairi/react-form.git","type":"git"},"_npmVersion":"10.1.0","description":"Form utilities for React written in TypeScript","directories":{},"sideEffects":false,"_nodeVersion":"20.6.1","dependencies":{"@mobily/ts-belt":"3.13.1"},"_hasShrinkwrap":false,"devDependencies":{"rollup":"3.25.3","typescript":"5.1.5","@types/react":"18.2.14","rollup-plugin-delete":"2.0.0","@rollup/plugin-terser":"0.4.3","rollup-plugin-esbuild":"5.0.0","@rollup/plugin-node-resolve":"15.2.3"},"peerDependencies":{"react":"18.2.0"},"_npmOperationalInternal":{"tmp":"tmp/react-form_2.0.0_1697837612489_0.9892978925345577","host":"s3://npm-registry-packages"}},"2.0.1":{"name":"@aminnairi/react-form","version":"2.0.1","keywords":["react","form","input","textarea","checkbox","radio","select","validation","error","hook"],"author":{"url":"https://github.com/aminnairi","name":"Amin NAIRI"},"license":"MIT","_id":"@aminnairi/react-form@2.0.1","maintainers":[{"name":"aminnairi","email":"nairi.amin@gmail.com"}],"homepage":"https://github.com/aminnairi/react-form","bugs":{"url":"https://github.com/aminnairi/react-form/issues"},"dist":{"shasum":"32ac667f993a7238c348d18b79ce318089074986","tarball":"https://registry.npmjs.org/@aminnairi/react-form/-/react-form-2.0.1.tgz","fileCount":5,"integrity":"sha512-0NLOOfR43zLCufQ4S2CqtFY4+mx+H+TRhfaYaueO9Z3LSJkARTc9a028y/bpt2YaIVMX8ziyPpHDBj8VEku6xA==","signatures":[{"sig":"MEUCIFoorC3qWBSTlVLP66j/mDJLWSMqn295/7Lv/iUJ8nvkAiEAsvD15lckpLdsGvB2dZMkjZGpSZlxxYgIOyriWuWKP5M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18470},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"4a8c9bb9243a9eeb99220c7ed8b88ed762cdb4ee","scripts":{"build":"rollup --config rollup.config.ts --configPlugin esbuild","types":"tsc --project tsconfig.json --declaration --emitDeclarationOnly"},"_npmUser":{"name":"aminnairi","email":"nairi.amin@gmail.com"},"repository":{"url":"git+https://github.com/aminnairi/react-form.git","type":"git"},"_npmVersion":"10.1.0","description":"Form utilities for React written in TypeScript","directories":{},"sideEffects":false,"_nodeVersion":"20.6.1","dependencies":{"@mobily/ts-belt":"3.13.1"},"_hasShrinkwrap":false,"devDependencies":{"rollup":"3.25.3","typescript":"5.1.5","@types/react":"18.2.14","rollup-plugin-delete":"2.0.0","@rollup/plugin-terser":"0.4.3","rollup-plugin-esbuild":"5.0.0","@rollup/plugin-commonjs":"25.0.7","@rollup/plugin-node-resolve":"15.2.3"},"peerDependencies":{"react":"18.2.0"},"_npmOperationalInternal":{"tmp":"tmp/react-form_2.0.1_1698399388907_0.06404735979272669","host":"s3://npm-registry-packages"}},"2.0.2":{"name":"@aminnairi/react-form","version":"2.0.2","keywords":["react","form","input","textarea","checkbox","radio","select","validation","error","hook"],"author":{"url":"https://github.com/aminnairi","name":"Amin NAIRI"},"license":"MIT","_id":"@aminnairi/react-form@2.0.2","maintainers":[{"name":"aminnairi","email":"nairi.amin@gmail.com"}],"homepage":"https://github.com/aminnairi/react-form","bugs":{"url":"https://github.com/aminnairi/react-form/issues"},"dist":{"shasum":"a574e5ac5af7b4a63c611d9ed324f8466de97712","tarball":"https://registry.npmjs.org/@aminnairi/react-form/-/react-form-2.0.2.tgz","fileCount":5,"integrity":"sha512-VECcbYQGajHtjxQfoGhXNSGbCKw4kDAvAgBNI8xzv65jfyH+8JdmCrX41VpAGlczcoSnnshmcuzOywm4ehfSeg==","signatures":[{"sig":"MEUCIGOjXyhY+TYMeRUdtwViJQAoHRgCMOlqGI65U67LwJNvAiEA6uFgjNsIGlWvCZuUrkliMHeICamyEzaRkZ5Pe0iQxKw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18490},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","gitHead":"8d576759587127660f5666eb4c7328d97d36870b","scripts":{"build":"rollup --config rollup.config.ts --configPlugin esbuild","types":"tsc --project tsconfig.json --declaration --emitDeclarationOnly"},"_npmUser":{"name":"aminnairi","email":"nairi.amin@gmail.com"},"repository":{"url":"git+https://github.com/aminnairi/react-form.git","type":"git"},"_npmVersion":"10.1.0","description":"Form utilities for React written in TypeScript","directories":{},"sideEffects":false,"_nodeVersion":"20.6.1","dependencies":{"@mobily/ts-belt":"3.13.1"},"_hasShrinkwrap":false,"devDependencies":{"rollup":"3.25.3","typescript":"5.1.5","@types/react":"18.2.14","rollup-plugin-delete":"2.0.0","@rollup/plugin-terser":"0.4.3","rollup-plugin-esbuild":"5.0.0","@rollup/plugin-commonjs":"25.0.7","@rollup/plugin-node-resolve":"15.2.3"},"peerDependencies":{"react":"18.2.0"},"_npmOperationalInternal":{"tmp":"tmp/react-form_2.0.2_1698952392931_0.06787650002327994","host":"s3://npm-registry-packages"}},"2.0.3":{"type":"module","sideEffects":false,"name":"@aminnairi/react-form","types":"dist/index.d.ts","description":"Form utilities for React written in TypeScript","version":"2.0.3","homepage":"https://github.com/aminnairi/react-form","license":"MIT","main":"dist/index.js","bugs":{"url":"https://github.com/aminnairi/react-form/issues"},"author":{"name":"Amin NAIRI","url":"https://github.com/aminnairi"},"repository":{"type":"git","url":"git+https://github.com/aminnairi/react-form.git"},"keywords":["react","form","input","textarea","checkbox","radio","select","validation","error","hook"],"scripts":{"build":"rollup --config rollup.config.ts --configPlugin esbuild","types":"tsc --project tsconfig.json --declaration --emitDeclarationOnly"},"peerDependencies":{"react":">=16.8.0"},"devDependencies":{"@rollup/plugin-commonjs":"25.0.7","@rollup/plugin-node-resolve":"15.2.3","@rollup/plugin-terser":"0.4.3","@types/react":"18.2.14","rollup":"3.25.3","rollup-plugin-delete":"2.0.0","rollup-plugin-esbuild":"5.0.0","typescript":"5.1.5"},"dependencies":{"@mobily/ts-belt":"3.13.1"},"_id":"@aminnairi/react-form@2.0.3","gitHead":"b6c7f46eeb92c20d68cc54fed812abfaab7b3bea","_nodeVersion":"22.2.0","_npmVersion":"10.8.0","dist":{"integrity":"sha512-el6qtH8W0Ud4FHyA57J7WAXjzCRdIbLDMagZbMXZson3n2zMPe8smqBI8c6HVzg2rAMXLI18BayoZI10zGuODg==","shasum":"1adc1c9b7523878acfe6d276321b5c737359d41f","tarball":"https://registry.npmjs.org/@aminnairi/react-form/-/react-form-2.0.3.tgz","fileCount":5,"unpackedSize":18492,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGKn2mP3skgcZd/MMGGATo6hgxa+3PGxdoiqhmJ/+PVgAiEAsgHFyG7soJ5TU0N7tXIeexWFDBUxmkIu/v/zL6fo+JU="}]},"_npmUser":{"name":"aminnairi","email":"nairi.amin@gmail.com"},"directories":{},"maintainers":[{"name":"aminnairi","email":"nairi.amin@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-form_2.0.3_1718221106265_0.18195637840062284"},"_hasShrinkwrap":false}},"time":{"created":"2023-06-28T21:23:27.731Z","modified":"2024-06-12T19:38:26.670Z","0.1.0":"2023-06-28T21:23:28.112Z","1.0.0":"2023-10-19T22:07:50.352Z","1.0.1":"2023-10-20T13:19:24.674Z","1.1.0":"2023-10-20T13:24:24.167Z","1.1.1":"2023-10-20T13:33:47.936Z","2.0.0":"2023-10-20T21:33:32.646Z","2.0.1":"2023-10-27T09:36:29.127Z","2.0.2":"2023-11-02T19:13:13.181Z","2.0.3":"2024-06-12T19:38:26.507Z"},"maintainers":[{"name":"aminnairi","email":"nairi.amin@gmail.com"}],"author":{"name":"Amin NAIRI","url":"https://github.com/aminnairi"},"repository":{"type":"git","url":"git+https://github.com/aminnairi/react-form.git"},"keywords":["react","form","input","textarea","checkbox","radio","select","validation","error","hook"],"license":"MIT","homepage":"https://github.com/aminnairi/react-form","bugs":{"url":"https://github.com/aminnairi/react-form/issues"},"readme":"# @aminnairi/react-form\n\nForm utilities for React written in TypeScript\n\n[![version](https://img.shields.io/npm/v/%40aminnairi/react-form)](https://npmjs.com/package/@aminnairi/react-form) [![types](https://img.shields.io/npm/types/%40aminnairi%2Freact-form)](https://github.com/aminnairi/react-form) [![](https://img.shields.io/bundlephobia/minzip/%40aminnairi/react-form)](https://bundlephobia.com/package/@aminnairi/react-form)\n\n\n## Summary\n\n- [Features](#features)\n- [Requirements](#requirements)\n- [Installation](#installation)\n- [Usage](#usage)\n  - [Fields](#fields)\n  - [Inputs](#inputs)\n  - [Submission](#submission)\n  - [Errors](#errors)\n  - [Transformations](#transformations)\n  - [References](#references)\n  - [Programmatic Value Setting](#programmatic-value-setting)\n  - [Form status](#form-status)\n- [Contributing](#contributing)\n- [License](#license)\n- [Code Of Conduct](#code-of-conduct)\n- [Security](#security)\n\n\n\n## Features\n\n- Written in TypeScript from the ground up\n- Convenience functions & properties allowing you to quickly scafold forms in seconds\n- Sane default behavior for a better user experience\n- Lifted state logic for you with full control over the UI logic\n- Best developer experience when used with TypeScript\n- No assumptions made when validating data: use your library of choice, whether it is Zod, Joi, Yup, etc... No \n\n[Go back to summary](#summary)\n\n## Requirements\n\n- [Node](https://nodejs.org/en)\n- [NPM](https://npmjs.com/)\n\n[Go back to summary](#summary)\n\n## Installation\n\n```bash\nnpm install @aminnairi/react-form\n```\n\n[Go back to summary](#summary)\n\n## Installation\n\n```bash\nnpm uninstall @aminnairi/react-form\n```\n\n[Go back to summary](#summary)\n\n## Usage\n\n```tsx\nimport { RefObject, createRef, useCallback, useEffect } from \"react\";\nimport { SubmitCallbackInfered, useForm, noValidation, noTransformation } from \"@aminnairi/react-form\";\n\n// Define your fields as a type\ntype Fields = {\n  readonly name: string,\n  readonly country: \"fr\" | \"en\" | \"es\",\n  readonly age: number,\n  readonly aggreed: boolean,\n  readonly avatar: File,\n}\n\n// Define the references that will be used to control focus for your fields\ntype References = {\n  readonly name: RefObject<HTMLInputElement>,\n  readonly country: RefObject<HTMLSelectElement>,\n  readonly age: RefObject<HTMLInputElement>,\n  readonly aggreed: RefObject<HTMLInputElement>,\n  readonly avatar: RefObject<HTMLInputElement>,\n}\n\nexport default function App() {\n  const { fields, touchedFields, errors, references, set, input, select, file, check, disabled, submit, dirty } = useForm<Fields, References>({\n    // Fields must comply with the shape of your data\n    fields: {\n      // Fields can be strings\n      name: \"\",\n      country: \"fr\",\n      // Or numbers\n      age: 0,\n      // Or boolean\n      aggreed: false,\n      // Or files (File and FileList)\n      avatar: new File([], \"\"),\n    },\n    // Validation provide a mechanism for returning errors that you can plug\n    // with your favorite data validation library like Zod, Joi, etc...\n    validations: {\n      // Validation always provide the entire fields object\n      name: (value, fields) => {\n        // So that you can check for errors with other fields inside one field\n        // as well\n        if (value === fields.country) {\n          return \"The name should be different from the country\";\n        }\n\n        // Return an empty string if you don't have any errors\n        return \"\";\n      },\n      // You do not need to provide explicit validation for each field\n      country: noValidation,\n      // But this is a good way of sending feedback via errors\n      aggreed: (value) => {\n        // Values are correctly infered from the Fields type to prevent typing\n        // mistsakes\n        if (value !== true) {\n          return \"You must agree the terms of use\"\n        }\n\n        // Return an empty string if you don't have any errors\n        return \"\";\n      },\n      avatar: (value) => {\n        const fiftyKb = 50000;\n\n        // You can validate files from the client side\n        if (value.size > fiftyKb) {\n          // Pretty useful to unload the server, isn't it?\n          return \"File is too large\";\n        }\n\n        // Here, no errors so an empty string\n        return \"\";\n      },\n    },\n    // Transformation are useful if you need to restrain the input from a user\n    transformations: {\n      // You don't need to provide transformation for each field\n      name: noTransformation,\n      // Fields that have no transformation will simply get the raw value from\n      // the user\n      country: noTransformation,\n      // But this is always a good thing to provide some transformation to\n      // prevent user's mistaskes\n      age: (value, fields) => {\n        // You also have access to all other properties here\n        if (fields.country ==== \"fr\") {\n          // So that you can have complex transformation for your field\n          if (value < 18) {\n            return 18;\n          }\n\n          if (value > 50) {\n            return 50;\n          }\n        } \n\n        // You may want different transformation based on the value of other\n        // fields for instance\n        if (fields.country === \"es\") {\n          if (value < 16) {\n            return 16;\n          }\n\n          if (value > 60) {\n            return 60;\n          }\n        }\n\n        return value;\n      },\n      // Again no explicit transformation is required if you don't want\n      aggreed: noTransformation,\n      // Simply call this function to disable transformation\n      avatar: noTransformation,\n    },\n    // References are used to focus the first field that has an error when\n    // submitting the form, this means that you must not disable the submit\n    // button to have this feature\n    references: {\n      // This is always the same function that is called\n      name: createRef(),\n      // Because we need to get a reference\n      country: createRef(),\n      // To those elements\n      age: createRef(),\n      // In order to trigger the HTMLElement.focus\n      aggreed: createRef(),\n      // Function and focus the first field that may have an error, you can\n      // always disable the submit button whenever the form has errors in order\n      // to disable this behavior\n      avatar: createRef()\n    }\n  });\n\n  // Here we use the SubmitCallbackInfered in order to \"guess\" the fields that\n  // are used in this form but this may be a bit overkill if you already defined\n  // your fields by hand using the generic argument and you may want to simply\n  // create a function that has the Fields as argument without calling this\n  // TypeScript utility type\n  const request: SubmitCallbackInfered<typeof submit> = useCallback((fields) => {\n    // The function is purposely made for requesting data from your server using\n    // asynchronous requests sur as Fetch or Axios, and the default behavior of\n    // the browser sending an HTTP request is automatically prevented when\n    // passing this function to the submit function (see below)\n    console.log(fields.age);\n  }, []);\n\n  useEffect(() => {\n    // Use the set function if you need to manually set fields, this is great\n    // for when you want to display a details page with a form to update an item\n    // and want to provide the user with some initial data that may be requested\n    // from an asynchronous HTTP request, in this case the set function is\n    // useful\n    set(\"age\", 10);\n    set(\"name\", \"Jean\");\n    // Do not put `set` in the dependencies array, otherwise you'll create an\n    // infinite loop, you  can disable the\n    // eslint-plugin-react-hook/rules-of-hook rule if you'd like\n  }, []);\n\n  return (\n    <form onSubmit={submit(request)}>\n      {/* dirty is a boolean that will be true whenever the user has changed one\n      of the field in the form */}\n      {dirty && <small>This is a hint information.</small>}\n      {/* disabled on the other hand is a boolean that is true whenever one of\n      the field has an error, this is pretty useful if you need to disable the\n      entire form until the user has made the correct input but remember that by\n      doing so, you disable the auto focus feature that allows a user to quickly\n      navigate through errors when the form is submitted */}\n      {disabled && <small>Form contains error, please check your inputs</small>}\n      <div>\n        {/* the references property contains all properties defined in the\n        References type that allow you to plug a React ref to an element, and\n        whenever the user has an error in another field, by typing enter or by\n        submitting the form, the reference will be used to focus the field that\n        has an error, of course this won't work if you don't add it manually in\n        the JSX code so don't forget it! */}\n        <input ref={references.name} type=\"text\" value={fields.name} onChange={input(\"name\")} />\n        {touchedFields.name && <small style={{ color: \"red\" }}>{errors.name}</small>}\n      </div>\n      <div>\n        {/* The input function will contain a nice utility function that will\n        help you quickly update any field that is an HTMLInputElement, and this\n        input will be controlled by its field value here in the fields property */}\n        <input ref={references.age} type=\"number\" value={fields.age} onChange={input(\"age\")} />\n        {touchedFields.age && <small style={{ color: \"red\" }}>{errors.age}</small>}\n      </div>\n      <div>\n        <label htmlFor=\"aggreed\">Aggreed</label>\n        {/* The check function is another utility function that will help you\n        check out checkboxes quickly without the hassle of defining your own\n        update function for checkboxes, remember that checkboxes have the\n        checked property that will be used instead of the value! */}\n        <input ref={references.aggreed} id=\"aggreed\" type=\"checkbox\" checked={fields.aggreed} onChange={check(\"aggreed\")} />\n        {/* the touchedFields property is here to help you know whether a field\n        has been touched, this is similar to the dirty property, except it is\n        used on a per-field basis */}\n        {touchedFields.aggreed && <small style={{ color: \"red\" }}>{errors.aggreed}</small>}\n      </div>\n      <div>\n        {/* The select function is here to help you work with selects in the\n        same fashion as the input or check functions, it works solely on select\n        fields so that it will update the value correctly for our elements that\n        needs selection */}\n        <select value={fields.country} onChange={select(\"country\")} ref={references.country}>\n          <option value=\"fr\">France</option>\n          <option value=\"es\">Spain</option>\n          <option value=\"en\">England</option>\n        </select>\n        {touchedFields.country && <small style={{ color: \"red\" }}>{errors.country}</small>}\n      </div>\n      <div>\n        {/* You can of course have files in your forms as well! You can use the\n        file function for a unique file, or the files function for a list of\n        files to upload to your server, watch out for files because you don't\n        need to provide a value for these fields, only the onChange function is\n        necesssary here */}\n        <input type=\"file\" onChange={file(\"avatar\")} ref={references.avatar} />\n        {touchedFields.avatar && <small style={{ color: \"red\" }}>{errors.avatar}</small>}\n      </div>\n      <button type=\"submit\">\n        Submit\n      </button>\n    </form>\n  );\n}\n```\n\n[Go back to summary](#summary)\n\n## Changelog\n\nSee [`CHANGELOG.md`](./CHANGELOG.md).\n\n[Go back to summary](#summary)\n\n## Contributing\n\nSee [`CONTRIBUTING.md`](./CONTRIBUTING.md).\n\n[Go back to summary](#summary)\n\n## License\n\nSee [`LICENSE`](./LICENSE).\n\n[Go back to summary](#summary)\n\n## Code Of Conduct\n\nSee [`CODE_OF_CONDUCT.md`](./CODE_OF_CONDUCT.md).\n\n[Go back to summary](#summary)\n\n## Security\n\nSee [`SECURITY.md`](./SECURITY.md).\n\n[Go back to summary](#summary)","readmeFilename":"README.md"}