{"_id":"@arcataroger/react-clock-milliseconds","_rev":"2-ed86d3d1bcc76cc161f869718b133b6a","name":"@arcataroger/react-clock-milliseconds","dist-tags":{"latest":"4.3.2"},"versions":{"4.3.0":{"name":"@arcataroger/react-clock-milliseconds","version":"4.3.0","description":"An analog clock for your React app.","main":"dist/cjs/index.js","module":"dist/esm/index.js","source":"src/index.ts","types":"dist/cjs/index.d.ts","sideEffects":["*.css"],"scripts":{"build":"yarn build-js && yarn copy-styles","build-js":"yarn build-js-esm && yarn build-js-cjs","build-js-esm":"tsc --project tsconfig.build.json --outDir dist/esm --module esnext","build-js-cjs":"tsc --project tsconfig.build.json --outDir dist/cjs --module commonjs","clean":"rimraf dist","copy-styles":"node --loader ts-node/esm ./copy-styles.ts","lint":"eslint . --ext .js,.jsx,.ts,.tsx","postinstall":"husky install","prepack":"yarn clean && yarn build","prettier":"prettier --check . --cache","test":"yarn lint && yarn tsc && yarn prettier && yarn unit","tsc":"tsc --noEmit","unit":"vitest run"},"keywords":["clock","digital clock","analog clock","time","react"],"author":{"name":"Wojciech Maj","email":"kontakt@wojtekmaj.pl"},"contributors":[{"name":"Yin Hengli","email":"yinhengliben@gmail.com"}],"license":"MIT","dependencies":{"@types/react":"*","@wojtekmaj/date-utils":"^1.5.0","clsx":"^1.2.1","get-user-locale":"^2.2.1","prop-types":"^15.6.0"},"devDependencies":{"@testing-library/jest-dom":"^5.15.0","@testing-library/react":"^14.0.0","@types/node":"*","eslint":"^8.26.0","eslint-config-wojtekmaj":"^0.8.4","husky":"^8.0.0","jsdom":"^21.1.0","prettier":"^2.7.0","pretty-quick":"^3.1.0","react":"^18.2.0","react-dom":"^18.2.0","rimraf":"^3.0.0","ts-node":"^10.9.1","typescript":"^5.0.0","vitest":"^0.30.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0","react-dom":"^16.8.0 || ^17.0.0 || ^18.0.0"},"repository":{"type":"git","url":"git+https://github.com/wojtekmaj/react-clock.git"},"funding":"https://github.com/wojtekmaj/react-clock?sponsor=1","packageManager":"yarn@3.1.0","gitHead":"54240f0a607e5d08addb7189227ba1250ef1f611","bugs":{"url":"https://github.com/wojtekmaj/react-clock/issues"},"homepage":"https://github.com/wojtekmaj/react-clock#readme","_id":"@arcataroger/react-clock-milliseconds@4.3.0","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-IK6d+rPoqQ/Ai5A33gY3YpaEg3X3Quo0NkxVTiUivL1XSrf6zDiV55qfAdT7nazIvJ1+oLjyOlFu72kEjK22Zg==","shasum":"7b52660b1d6f67e19b490400d2df4f9200cb9565","tarball":"https://registry.npmjs.org/@arcataroger/react-clock-milliseconds/-/react-clock-milliseconds-4.3.0.tgz","fileCount":55,"unpackedSize":80104,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB+xBwCBimKRRqAdhWCrL+pkJmE1ABNYiyKahzqQ9/lKAiAWYzmZoKJNSgDDpsKq3P6Ji19x/CVj8Eac5qzJf5xo7A=="}]},"_npmUser":{"name":"arcataroger","email":"arcataroger@gmail.com"},"directories":{},"maintainers":[{"name":"arcataroger","email":"arcataroger@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-clock-milliseconds_4.3.0_1687319542019_0.30239171553753064"},"_hasShrinkwrap":false},"4.3.1":{"name":"@arcataroger/react-clock-milliseconds","version":"4.3.1","description":"An analog clock for your React app.","main":"dist/cjs/index.js","module":"dist/esm/index.js","source":"src/index.ts","types":"dist/cjs/index.d.ts","sideEffects":["*.css"],"scripts":{"build":"yarn build-js && yarn copy-styles","build-js":"yarn build-js-esm && yarn build-js-cjs","build-js-esm":"tsc --project tsconfig.build.json --outDir dist/esm --module esnext","build-js-cjs":"tsc --project tsconfig.build.json --outDir dist/cjs --module commonjs","clean":"rimraf dist","copy-styles":"node --loader ts-node/esm ./copy-styles.ts","lint":"eslint . --ext .js,.jsx,.ts,.tsx","postinstall":"husky install","prepack":"yarn clean && yarn build","prettier":"prettier --check . --cache","test":"yarn lint && yarn tsc && yarn prettier && yarn unit","tsc":"tsc --noEmit","unit":"vitest run"},"keywords":["clock","digital clock","analog clock","time","react"],"author":{"name":"Wojciech Maj","email":"kontakt@wojtekmaj.pl"},"contributors":[{"name":"Yin Hengli","email":"yinhengliben@gmail.com"}],"license":"MIT","dependencies":{"@types/react":"*","@arcataroger/date-utils-milliseconds":"^1.5.1","clsx":"^1.2.1","get-user-locale":"^2.2.1","prop-types":"^15.6.0"},"devDependencies":{"@testing-library/jest-dom":"^5.15.0","@testing-library/react":"^14.0.0","@types/node":"*","eslint":"^8.26.0","eslint-config-wojtekmaj":"^0.8.4","husky":"^8.0.0","jsdom":"^21.1.0","prettier":"^2.7.0","pretty-quick":"^3.1.0","react":"^18.2.0","react-dom":"^18.2.0","rimraf":"^3.0.0","ts-node":"^10.9.1","typescript":"^5.0.0","vitest":"^0.30.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0","react-dom":"^16.8.0 || ^17.0.0 || ^18.0.0"},"repository":{"type":"git","url":"git+https://github.com/wojtekmaj/react-clock.git"},"funding":"https://github.com/wojtekmaj/react-clock?sponsor=1","packageManager":"yarn@3.1.0","gitHead":"e70c7d615df0b67cfe17a12c3a4922a130fef0bf","bugs":{"url":"https://github.com/wojtekmaj/react-clock/issues"},"homepage":"https://github.com/wojtekmaj/react-clock#readme","_id":"@arcataroger/react-clock-milliseconds@4.3.1","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-iGWXoi3z3CMPP0aa0Iu+uOUfS6GnJ/i6IJSYMJn9nLjCQBwNZqsLp7YThVB7T3CT39E7CYmPpsb7dStPpirugw==","shasum":"2bee607032faebdbc61498675ca84dd06732d208","tarball":"https://registry.npmjs.org/@arcataroger/react-clock-milliseconds/-/react-clock-milliseconds-4.3.1.tgz","fileCount":55,"unpackedSize":80281,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCWr3b4fKGriPxv7gpbfHXQcC64tRADh78TwQT2uQJRBAIgBwAalQSq0Vk9bk1SDFJBzUstvkOIKm7ArYLOv5Le77A="}]},"_npmUser":{"name":"arcataroger","email":"arcataroger@gmail.com"},"directories":{},"maintainers":[{"name":"arcataroger","email":"arcataroger@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-clock-milliseconds_4.3.1_1687319988716_0.6677354653536474"},"_hasShrinkwrap":false},"4.3.2":{"name":"@arcataroger/react-clock-milliseconds","version":"4.3.2","description":"An analog clock for your React app.","main":"dist/cjs/index.js","module":"dist/esm/index.js","source":"src/index.ts","types":"dist/cjs/index.d.ts","sideEffects":["*.css"],"scripts":{"build":"yarn build-js && yarn copy-styles","build-js":"yarn build-js-esm && yarn build-js-cjs","build-js-esm":"tsc --project tsconfig.build.json --outDir dist/esm --module esnext","build-js-cjs":"tsc --project tsconfig.build.json --outDir dist/cjs --module commonjs","clean":"rimraf dist","copy-styles":"node --loader ts-node/esm ./copy-styles.ts","lint":"eslint . --ext .js,.jsx,.ts,.tsx","prepack":"yarn clean && yarn build","prettier":"prettier --check . --cache","test":"yarn lint && yarn tsc && yarn prettier && yarn unit","tsc":"tsc --noEmit","unit":"vitest run"},"keywords":["clock","digital clock","analog clock","time","react"],"author":{"name":"Wojciech Maj","email":"kontakt@wojtekmaj.pl"},"contributors":[{"name":"Yin Hengli","email":"yinhengliben@gmail.com"}],"license":"MIT","dependencies":{"@types/react":"*","@arcataroger/date-utils-milliseconds":"^1.5.1","clsx":"^1.2.1","get-user-locale":"^2.2.1","prop-types":"^15.6.0"},"devDependencies":{"@testing-library/jest-dom":"^5.15.0","@testing-library/react":"^14.0.0","@types/node":"*","eslint":"^8.26.0","eslint-config-wojtekmaj":"^0.8.4","husky":"^8.0.0","jsdom":"^21.1.0","prettier":"^2.7.0","pretty-quick":"^3.1.0","react":"^18.2.0","react-dom":"^18.2.0","rimraf":"^3.0.0","ts-node":"^10.9.1","typescript":"^5.0.0","vitest":"^0.30.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0","react-dom":"^16.8.0 || ^17.0.0 || ^18.0.0"},"repository":{"type":"git","url":"git+https://github.com/wojtekmaj/react-clock.git"},"funding":"https://github.com/wojtekmaj/react-clock?sponsor=1","packageManager":"yarn@3.1.0","gitHead":"f9cd22e48c71f32d88a839f6794a2f3849aa488f","bugs":{"url":"https://github.com/wojtekmaj/react-clock/issues"},"homepage":"https://github.com/wojtekmaj/react-clock#readme","_id":"@arcataroger/react-clock-milliseconds@4.3.2","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-rK6FY+sgoxTv0S6CEdppNKrhi2za1sYLur0+UkZBO2K8Ey4zrnL3pcAissXyNxJtI3Y/kX5VPrlfdnEgAwUCiA==","shasum":"184b412e2d188799e4bd371d0084f4d80f904440","tarball":"https://registry.npmjs.org/@arcataroger/react-clock-milliseconds/-/react-clock-milliseconds-4.3.2.tgz","fileCount":55,"unpackedSize":80245,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDjcCBQZ61qWZzYHGcg5j2L9S4SQh2xSQvqhnWAoG+4qAiEAhUZyLseScrTz4IBJXxNDVNpGTs8mSGSs92O7q+QSfcA="}]},"_npmUser":{"name":"arcataroger","email":"arcataroger@gmail.com"},"directories":{},"maintainers":[{"name":"arcataroger","email":"arcataroger@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-clock-milliseconds_4.3.2_1687320078624_0.3094394119777111"},"_hasShrinkwrap":false}},"time":{"created":"2023-06-21T03:52:21.966Z","4.3.0":"2023-06-21T03:52:22.233Z","modified":"2023-06-21T04:01:18.962Z","4.3.1":"2023-06-21T03:59:48.887Z","4.3.2":"2023-06-21T04:01:18.853Z"},"maintainers":[{"name":"arcataroger","email":"arcataroger@gmail.com"}],"description":"An analog clock for your React app.","homepage":"https://github.com/wojtekmaj/react-clock#readme","keywords":["clock","digital clock","analog clock","time","react"],"repository":{"type":"git","url":"git+https://github.com/wojtekmaj/react-clock.git"},"contributors":[{"name":"Yin Hengli","email":"yinhengliben@gmail.com"}],"author":{"name":"Wojciech Maj","email":"kontakt@wojtekmaj.pl"},"bugs":{"url":"https://github.com/wojtekmaj/react-clock/issues"},"license":"MIT","readme":"[![npm](https://img.shields.io/npm/v/react-clock.svg)](https://www.npmjs.com/package/react-clock) ![downloads](https://img.shields.io/npm/dt/react-clock.svg) [![CI](https://github.com/wojtekmaj/react-clock/workflows/CI/badge.svg)](https://github.com/wojtekmaj/react-clock/actions)\n\n# React-Clock\n\nAn analog clock for your React app.\n\nForked from [@wojtekmaj/react-clock](https://github.com/wojtekmaj/react-clock) to add milliseconds support until [the relevant upstream PR](https://github.com/wojtekmaj/react-clock/pull/204) is accepted.\n\n## tl;dr\n\n- Install by executing `npm install react-clock` or `yarn add react-clock`.\n- Import by adding `import Clock from 'react-clock'`.\n- Use by adding `<Clock />`.\n\n## Demo\n\nA minimal demo page can be found in `sample` directory.\n\n[Online demo](http://projects.wojtekmaj.pl/react-clock/) is also available!\n\n## Installation\n\nAdd React-Clock to your project by executing `npm install react-clock` or `yarn add react-clock`.\n\n### Usage\n\nHere's an example of basic usage:\n\n```js\nimport React, { useEffect, useState } from 'react';\nimport Clock from 'react-clock';\n\nfunction MyApp() {\n  const [value, setValue] = useState(new Date());\n\n  useEffect(() => {\n    const interval = setInterval(() => setValue(new Date()), 1000);\n\n    return () => {\n      clearInterval(interval);\n    };\n  }, []);\n\n  return (\n    <div>\n      <p>Current time:</p>\n      <Clock value={value} />\n    </div>\n  );\n}\n```\n\n### Custom styling\n\nIf you want to use default React-Clock styling to build upon it, you can import React-Clock's styles by using:\n\n```js\nimport 'react-clock/dist/Clock.css';\n```\n\n## User guide\n\n### Clock\n\nDisplays a complete clock.\n\n#### Props\n\n| Prop name                | Description                                                                                                               | Default value           | Example values                                                                                      |\n| ------------------------ | ------------------------------------------------------------------------------------------------------------------------- | ----------------------- | --------------------------------------------------------------------------------------------------- |\n| className                | Class name(s) that will be added along with `\"react-clock\"` to the main React-Clock `<time>` element.                     | n/a                     | <ul><li>String: `\"class1 class2\"`</li><li>Array of strings: `[\"class1\", \"class2 class3\"]`</li></ul> |\n| formatHour               | Function called to override default formatting of hour marks. Can be used to use your own formatting function.            | (default formatter)     | `(locale, hour) => formatHour(hour, 'HH')`                                                          |\n| hourHandLength           | Hour hand length, in %.                                                                                                   | `50`                    | `80`                                                                                                |\n| hourHandOppositeLength   | The length of the part of an hour hand on the opposite side the hand is pointing to, in %.                                | `10`                    | `20`                                                                                                |\n| hourHandWidth            | Hour hand width, in pixels.                                                                                               | `4`                     | `3`                                                                                                 |\n| hourMarksLength          | Hour marks length, in %.                                                                                                  | `10`                    | `8`                                                                                                 |\n| hourMarksWidth           | Hour marks width, in pixels.                                                                                              | `3`                     | `2`                                                                                                 |\n| locale                   | Locale that should be used by the clock. Can be any [IETF language tag](https://en.wikipedia.org/wiki/IETF_language_tag). | User's browser settings | `\"hu-HU\"`                                                                                           |\n| minuteHandLength         | Minute hand length, in %.                                                                                                 | `70`                    | `80`                                                                                                |\n| minuteHandOppositeLength | The length of the part of a minute hand on the opposite side the hand is pointing to, in %.                               | `10`                    | `20`                                                                                                |\n| minuteHandWidth          | Minute hand width, in pixels.                                                                                             | `2`                     | `3`                                                                                                 |\n| minuteMarksLength        | Minute marks length, in %.                                                                                                | `6`                     | `8`                                                                                                 |\n| minuteMarksWidth         | Minute marks width, in pixels.                                                                                            | `1`                     | `2`                                                                                                 |\n| renderHourMarks          | Whether hour marks shall be rendered.                                                                                     | `true`                  | `false`                                                                                             |\n| renderMinuteHand         | Whether minute hand shall be rendered.                                                                                    | `true`                  | `false`                                                                                             |\n| renderMinuteMarks        | Whether minute marks shall be rendered.                                                                                   | `true`                  | `false`                                                                                             |\n| renderNumbers            | Whether numbers shall be rendered.                                                                                        | `false`                 | `true`                                                                                              |\n| renderSecondHand         | Whether second hand shall be rendered.                                                                                    | `true`                  | `false`                                                                                             |\n| secondHandLength         | Second hand length, in %.                                                                                                 | `90`                    | `80`                                                                                                |\n| secondHandOppositeLength | The length of the part of a second hand on the opposite side the hand is pointing to, in %.                               | `10`                    | `20`                                                                                                |\n| secondHandWidth          | Second hand width, in pixels.                                                                                             | `1`                     | `2`                                                                                                 |\n| useMilliseconds          | If `true`, all rendered hands will use angles in between full integer seconds. Useful for stopwatches.                    | `false`                 | `true`                                                                                              |\n| size                     | Clock size, in pixels (e.g. `200`) or as string (e.g. `\"50vw\"`).                                                          | `150`                   | <ul><li>Number: `250`</li><li>String: `\"50vw\"`</li></ul>                                            |\n| value                    | Clock value. Must be provided.                                                                                            | n/a                     | Date: `new Date()`                                                                                  |\n\n## License\n\nThe MIT License.\n\n## Author\n\n<table>\n  <tr>\n    <td>\n      <img src=\"https://github.com/wojtekmaj.png?s=100\" width=\"100\">\n    </td>\n    <td>\n      Wojciech Maj<br />\n      <a href=\"mailto:kontakt@wojtekmaj.pl\">kontakt@wojtekmaj.pl</a><br />\n      <a href=\"https://wojtekmaj.pl\">https://wojtekmaj.pl</a>\n    </td>\n  </tr>\n</table>\n","readmeFilename":"README.md"}