{"_id":"@craftgear/rhf-time-picker","_rev":"2-c687549b1c1870e826071d5220f4b2ef","name":"@craftgear/rhf-time-picker","dist-tags":{"latest":"1.0.1"},"versions":{"0.0.0":{"name":"@craftgear/rhf-time-picker","private":false,"version":"0.0.0","type":"module","main":"dist/main.js","types":"dist/main.d.ts","sideEffects":["**/*.css"],"scripts":{"dev":"vite","build":"tsc --p ./tsconfig-build.json && vite build","lint":"eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0","preview":"vite preview","prepublishOnly":"npm run build"},"peerDependencies":{"clsx":"^2.1.1","react":"^18.2.0","react-dom":"^18.2.0","react-hook-form":"^7.51.3","react-icons":"^5.1.0"},"devDependencies":{"@types/node":"^20.12.7","@types/react":"^18.3.1","@types/react-dom":"^18.2.22","@typescript-eslint/eslint-plugin":"^7.2.0","@typescript-eslint/parser":"^7.2.0","@vitejs/plugin-react-swc":"^3.5.0","eslint":"^8.57.0","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-react-refresh":"^0.4.6","react":"^18.2.0","react-dom":"^18.2.0","react-hook-form":"^7.51.3","react-icons":"^5.1.0","typescript":"^5.2.2","vite":"^5.2.0","vite-plugin-dts":"^3.9.0","vite-plugin-lib-inject-css":"^2.0.1"},"_id":"@craftgear/rhf-time-picker@0.0.0","gitHead":"9000d16594b9c6495d33501c150b7aa88bb009c2","description":"a simple time picker component for react-hook-form","_nodeVersion":"18.17.1","_npmVersion":"10.2.1","dist":{"integrity":"sha512-7NQ6FT/TfBL2hh8rvkPs6x3lRUWW2zWCfvEo4/J+3EI6sU+8cwrTnG+Jc6naK49aTrA0gYbkxRw2GHXMT1DSQA==","shasum":"bf2d27e111961c44e61dcce571e7213900d8edca","tarball":"https://registry.npmjs.org/@craftgear/rhf-time-picker/-/rhf-time-picker-0.0.0.tgz","fileCount":6,"unpackedSize":15821,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD6NRa8UVYW4U4+i+LgzQVFnUwsFvEN4xZVqBeJCNZH0wIgHREAkS5fQpRrMlbBxhKfkz/rN2z6fS+g9N237+ODCSo="}]},"_npmUser":{"name":"craftgear","email":"craftgear@gmail.com"},"directories":{},"maintainers":[{"name":"craftgear","email":"craftgear@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rhf-time-picker_0.0.0_1714284424773_0.8200654768657636"},"_hasShrinkwrap":false},"1.0.0":{"name":"@craftgear/rhf-time-picker","private":false,"version":"1.0.0","type":"module","main":"dist/main.js","types":"dist/main.d.ts","sideEffects":["**/*.css"],"scripts":{"dev":"vite","build":"tsc --p ./tsconfig-build.json && vite build","lint":"eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0","preview":"vite preview","prepublishOnly":"npm run build"},"peerDependencies":{"clsx":"^2.1.1","react":"^18.2.0","react-dom":"^18.2.0","react-hook-form":"^7.51.3","react-icons":"^5.1.0"},"devDependencies":{"@types/node":"^20.12.7","@types/react":"^18.3.1","@types/react-dom":"^18.2.22","@typescript-eslint/eslint-plugin":"^7.2.0","@typescript-eslint/parser":"^7.2.0","@vitejs/plugin-react-swc":"^3.5.0","eslint":"^8.57.0","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-react-refresh":"^0.4.6","react":"^18.2.0","react-dom":"^18.2.0","react-hook-form":"^7.51.3","react-icons":"^5.1.0","typescript":"^5.2.2","vite":"^5.2.0","vite-plugin-dts":"^3.9.0","vite-plugin-lib-inject-css":"^2.0.1"},"_id":"@craftgear/rhf-time-picker@1.0.0","gitHead":"9000d16594b9c6495d33501c150b7aa88bb009c2","description":"a simple time picker component for react-hook-form","_nodeVersion":"18.17.1","_npmVersion":"10.2.1","dist":{"integrity":"sha512-YB+gMpakY/LmbVq1Y1FrBNziMlHhVbqyuPBrQryDFZsfo2fLlcw16hGXyhZmT7OHgsn2GOGNIfM1yWmthQMpjQ==","shasum":"2fe0509e3e5a6a9ca1c7cee8254751d0c990c12d","tarball":"https://registry.npmjs.org/@craftgear/rhf-time-picker/-/rhf-time-picker-1.0.0.tgz","fileCount":6,"unpackedSize":15821,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDEU1wkmTPPooDZSfvEXWN9gliN9n/KWA5rWYsxaE1VzgIhAIUnRJDGV5FbCw2Xisz0xKH46qyHfDFrWMIjoiCWKVNE"}]},"_npmUser":{"name":"craftgear","email":"craftgear@gmail.com"},"directories":{},"maintainers":[{"name":"craftgear","email":"craftgear@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rhf-time-picker_1.0.0_1714284440254_0.7300963546654784"},"_hasShrinkwrap":false},"1.0.1":{"name":"@craftgear/rhf-time-picker","private":false,"version":"1.0.1","type":"module","main":"dist/main.js","types":"dist/main.d.ts","sideEffects":["**/*.css"],"scripts":{"dev":"vite","build":"tsc --p ./tsconfig-build.json && vite build","lint":"eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0","preview":"vite preview","prepublishOnly":"npm run build"},"peerDependencies":{"clsx":"^2.1.1","react":"^18.2.0","react-dom":"^18.2.0","react-hook-form":"^7.51.3","react-icons":"^5.1.0"},"devDependencies":{"@types/node":"^20.12.7","@types/react":"^18.3.1","@types/react-dom":"^18.2.22","@typescript-eslint/eslint-plugin":"^7.2.0","@typescript-eslint/parser":"^7.2.0","@vitejs/plugin-react-swc":"^3.5.0","eslint":"^8.57.0","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-react-refresh":"^0.4.6","react":"^18.2.0","react-dom":"^18.2.0","react-hook-form":"^7.51.3","react-icons":"^5.1.0","typescript":"^5.2.2","vite":"^5.2.0","vite-plugin-dts":"^3.9.0","vite-plugin-lib-inject-css":"^2.0.1"},"_id":"@craftgear/rhf-time-picker@1.0.1","gitHead":"9000d16594b9c6495d33501c150b7aa88bb009c2","description":"a simple time picker component for react-hook-form","_nodeVersion":"18.17.1","_npmVersion":"10.2.1","dist":{"integrity":"sha512-SNTDwVwaleOZ3tOUwAmRZqJ2QMvxDOX8HZrNmCyT2bRiiq8veb4WNq68piES3y1AT4BielEz/vWNCxu5iFGXxw==","shasum":"85ec113c28e121449c4ad259a9e42db1ba432e8e","tarball":"https://registry.npmjs.org/@craftgear/rhf-time-picker/-/rhf-time-picker-1.0.1.tgz","fileCount":6,"unpackedSize":15832,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCME/c0hJ8brWgrsMFfqR3wcnR2HXgRz+A6LOblWLj7dgIgH7FNj5HiPzEu0+43a2/FpDEjE0vXOPqdrTe4HBGQNlI="}]},"_npmUser":{"name":"craftgear","email":"craftgear@gmail.com"},"directories":{},"maintainers":[{"name":"craftgear","email":"craftgear@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rhf-time-picker_1.0.1_1714284468901_0.7140128252010349"},"_hasShrinkwrap":false}},"time":{"created":"2024-04-28T06:07:04.669Z","0.0.0":"2024-04-28T06:07:04.939Z","modified":"2024-04-28T06:07:49.236Z","1.0.0":"2024-04-28T06:07:20.403Z","1.0.1":"2024-04-28T06:07:49.068Z"},"maintainers":[{"name":"craftgear","email":"craftgear@gmail.com"}],"description":"a simple time picker component for react-hook-form","readme":"# rhf-time-picker\n\na simple time picker component for react-hook-form\n\n\n[gif](./images/time-picker.gif)\n\n\n## Install\n\n```bash\nnpm i @craftgear/rhf-time-picker\n```\n\n## Usage\n\n```tsx\nimport React from 'react';\nimport { useForm } from 'react-hook-form';\nimport { TimePicker } from 'rhf-time-picker';\n\nconst App = () => {\n  const { setValue, handleSubmit } = useForm();\n  const onSubmit = (data) => {\n      console.log(data);\n  };\n\n  return (\n    <form onSubmit={handleSubmit(onSubmit)}>\n      <TimePicker\n        name=\"time\"\n        setValue={setValue}\n        defaultValue=\"12:00\"\n      />\n      <button type=\"submit\">Submit</button>\n    </form>\n  );\n};\n```\n\n### Can I just use `{...register('time')}` like normal input elements?\n \nUnfortunately no.\n\nI couldn't find the way to fire `change` event on input elements for the life of me.\nExcept for using `input._valueTracker?.setValue()` which I'd like to avoid using.\n\nSo I resorted to using `setValue` function from `react-hook-form` to set the value.\n\n### Props\n\nName                    | Type                                  | Default   | Desscription\n---                     | ---                                   | ---       | ---\nname                    | string                                |           | **required** name of the input\nsetValue                | (name: string, value: string) => void |           | **required** setValue function from `useForm`\ndefaultValue            | string                                | undefined | default value of the input\nhourRange               | number[]                              | [0, 23]   | range of hours\nminStep                 | number                                | 5         | step of minutes\nokButtonText            | string                                | 'OK'      | text of the OK button\nshowClockIcon           | boolean                               | true      | whether to show the clock icon\nstyle                   | React.CSSProperties                   | undefined | style of the TimePicker\nclassName               | string                                | undefined | className of the TimePicker \npopupClassName          | string                                | undefined | className of the popup\nselectClassName         | string                                | undefined | className of hour and minut select\nokButtonClassName       | string                                | undefined | className of the OK button\nselectedOptionClassName | string                                | undefined | className of the selected hour/minute option\n\n","readmeFilename":"README.md"}