react-clock
Advanced tools
react-clock - npm Package Compare versions
Comparing version 4.5.1 to 4.6.0
@@ -5,28 +5,175 @@ import React from 'react'; | ||
| export type ClockProps = { | ||
| /** | ||
| * Class name(s) that will be added along with `"react-clock"` to the main react-clock `<time>` element. | ||
| * | ||
| * @example 'class1 class2' | ||
| * @example ['class1', 'class2 class3'] | ||
| */ | ||
| className?: ClassName; | ||
| /** | ||
| * Function called to override default formatting of hour marks. Can be used to use your own formatting function. | ||
| * | ||
| * @example (locale, hour) => formatHour(hour, 'HH') | ||
| */ | ||
| formatHour?: typeof defaultFormatHour; | ||
| /** | ||
| * Hour hand length, in %. | ||
| * | ||
| * @default 50 | ||
| * @example 80 | ||
| */ | ||
| hourHandLength?: HandLength; | ||
| /** | ||
| * The length of the part of an hour hand on the opposite side the hand is pointing to, in %. | ||
| * | ||
| * @default 10 | ||
| * @example 20 | ||
| */ | ||
| hourHandOppositeLength?: OppositeHandLength; | ||
| /** | ||
| * Hour hand width, in pixels. | ||
| * | ||
| * @default 4 | ||
| * @example 3 | ||
| */ | ||
| hourHandWidth?: HandWidth; | ||
| /** | ||
| * Hour marks length, in %. | ||
| * | ||
| * @default 10 | ||
| * @example 8 | ||
| */ | ||
| hourMarksLength?: MarkLength; | ||
| /** | ||
| * Hour marks width, in pixels. | ||
| * | ||
| * @default 3 | ||
| * @example 2 | ||
| */ | ||
| hourMarksWidth?: MarkWidth; | ||
| /** | ||
| * Locale that should be used by the clock. Can be any [IETF language tag](https://en.wikipedia.org/wiki/IETF_language_tag). | ||
| * | ||
| * **Note**: When using SSR, setting this prop may help resolving hydration errors caused by locale mismatch between server and client. | ||
| * | ||
| * @example 'hu-HU' | ||
| */ | ||
| locale?: string; | ||
| /** | ||
| * Minute hand length, in %. | ||
| * | ||
| * @default 70 | ||
| * @example 80 | ||
| */ | ||
| minuteHandLength?: HandLength; | ||
| /** | ||
| * The length of the part of a minute hand on the opposite side the hand is pointing to, in %. | ||
| * | ||
| * @default 10 | ||
| * @example 20 | ||
| */ | ||
| minuteHandOppositeLength?: OppositeHandLength; | ||
| /** | ||
| * Minute hand width, in pixels. | ||
| * | ||
| * @default 2 | ||
| * @example 3 | ||
| */ | ||
| minuteHandWidth?: HandWidth; | ||
| /** | ||
| * Minute marks length, in %. | ||
| * | ||
| * @default 6 | ||
| * @example 8 | ||
| */ | ||
| minuteMarksLength?: MarkLength; | ||
| /** | ||
| * Minute marks width, in pixels. | ||
| * | ||
| * @default 1 | ||
| * @example 2 | ||
| */ | ||
| minuteMarksWidth?: MarkWidth; | ||
| /** | ||
| * Whether hour marks shall be rendered. | ||
| * | ||
| * @default true | ||
| * @example false | ||
| */ | ||
| renderHourMarks?: boolean; | ||
| /** | ||
| * Whether minute hand shall be rendered. | ||
| * | ||
| * @default true | ||
| * @example false | ||
| */ | ||
| renderMinuteHand?: boolean; | ||
| /** | ||
| * Whether minute marks shall be rendered. | ||
| * | ||
| * @default true | ||
| * @example false | ||
| */ | ||
| renderMinuteMarks?: boolean; | ||
| /** | ||
| * Whether numbers shall be rendered. | ||
| * | ||
| * @default true | ||
| * @example false | ||
| */ | ||
| renderNumbers?: boolean; | ||
| /** | ||
| * Whether second hand shall be rendered. | ||
| * | ||
| * @default true | ||
| * @example false | ||
| */ | ||
| renderSecondHand?: boolean; | ||
| /** | ||
| * Second hand length, in %. | ||
| * | ||
| * @default 90 | ||
| * @example 80 | ||
| */ | ||
| secondHandLength?: HandLength; | ||
| /** | ||
| * The length of the part of a second hand on the opposite side the hand is pointing to, in %. | ||
| * | ||
| * @default 10 | ||
| * @example 20 | ||
| */ | ||
| secondHandOppositeLength?: OppositeHandLength; | ||
| /** | ||
| * Second hand width, in pixels. | ||
| * | ||
| * @default 1 | ||
| * @example 2 | ||
| */ | ||
| secondHandWidth?: HandWidth; | ||
| /** | ||
| * Clock size, in pixels (e.g. `200`) or as string (e.g. `"50vw"`). | ||
| * | ||
| * @default 150 | ||
| * @example 260 | ||
| * @example '50vw' | ||
| */ | ||
| size?: React.CSSProperties['width']; | ||
| /** | ||
| * Whether to use millisecond precision. | ||
| * | ||
| * @default false | ||
| * @example true | ||
| */ | ||
| useMillisecondPrecision?: boolean; | ||
| /** | ||
| * Clock value. Must be provided. | ||
| * | ||
| * @example new Date() | ||
| */ | ||
| value?: string | Date | null; | ||
| }; | ||
| /** | ||
| * Displays a complete clock. | ||
| */ | ||
| declare const Clock: React.FC<ClockProps>; | ||
| export default Clock; |
@@ -14,2 +14,5 @@ "use strict"; | ||
| var propTypes_js_1 = require("./shared/propTypes.js"); | ||
| /** | ||
| * Displays a complete clock. | ||
| */ | ||
| var Clock = function Clock(_a) { | ||
@@ -16,0 +19,0 @@ var className = _a.className, formatHour = _a.formatHour, _b = _a.hourHandLength, hourHandLength = _b === void 0 ? 50 : _b, hourHandOppositeLength = _a.hourHandOppositeLength, _c = _a.hourHandWidth, hourHandWidth = _c === void 0 ? 4 : _c, _d = _a.hourMarksLength, hourMarksLength = _d === void 0 ? 10 : _d, _e = _a.hourMarksWidth, hourMarksWidth = _e === void 0 ? 3 : _e, locale = _a.locale, _f = _a.minuteHandLength, minuteHandLength = _f === void 0 ? 70 : _f, minuteHandOppositeLength = _a.minuteHandOppositeLength, _g = _a.minuteHandWidth, minuteHandWidth = _g === void 0 ? 2 : _g, _h = _a.minuteMarksLength, minuteMarksLength = _h === void 0 ? 6 : _h, _j = _a.minuteMarksWidth, minuteMarksWidth = _j === void 0 ? 1 : _j, _k = _a.renderHourMarks, renderHourMarks = _k === void 0 ? true : _k, _l = _a.renderMinuteHand, renderMinuteHand = _l === void 0 ? true : _l, _m = _a.renderMinuteMarks, renderMinuteMarks = _m === void 0 ? true : _m, renderNumbers = _a.renderNumbers, _o = _a.renderSecondHand, renderSecondHand = _o === void 0 ? true : _o, _p = _a.secondHandLength, secondHandLength = _p === void 0 ? 90 : _p, secondHandOppositeLength = _a.secondHandOppositeLength, _q = _a.secondHandWidth, secondHandWidth = _q === void 0 ? 1 : _q, _r = _a.size, size = _r === void 0 ? 150 : _r, useMillisecondPrecision = _a.useMillisecondPrecision, value = _a.value; |
@@ -5,28 +5,175 @@ import React from 'react'; | ||
| export type ClockProps = { | ||
| /** | ||
| * Class name(s) that will be added along with `"react-clock"` to the main react-clock `<time>` element. | ||
| * | ||
| * @example 'class1 class2' | ||
| * @example ['class1', 'class2 class3'] | ||
| */ | ||
| className?: ClassName; | ||
| /** | ||
| * Function called to override default formatting of hour marks. Can be used to use your own formatting function. | ||
| * | ||
| * @example (locale, hour) => formatHour(hour, 'HH') | ||
| */ | ||
| formatHour?: typeof defaultFormatHour; | ||
| /** | ||
| * Hour hand length, in %. | ||
| * | ||
| * @default 50 | ||
| * @example 80 | ||
| */ | ||
| hourHandLength?: HandLength; | ||
| /** | ||
| * The length of the part of an hour hand on the opposite side the hand is pointing to, in %. | ||
| * | ||
| * @default 10 | ||
| * @example 20 | ||
| */ | ||
| hourHandOppositeLength?: OppositeHandLength; | ||
| /** | ||
| * Hour hand width, in pixels. | ||
| * | ||
| * @default 4 | ||
| * @example 3 | ||
| */ | ||
| hourHandWidth?: HandWidth; | ||
| /** | ||
| * Hour marks length, in %. | ||
| * | ||
| * @default 10 | ||
| * @example 8 | ||
| */ | ||
| hourMarksLength?: MarkLength; | ||
| /** | ||
| * Hour marks width, in pixels. | ||
| * | ||
| * @default 3 | ||
| * @example 2 | ||
| */ | ||
| hourMarksWidth?: MarkWidth; | ||
| /** | ||
| * Locale that should be used by the clock. Can be any [IETF language tag](https://en.wikipedia.org/wiki/IETF_language_tag). | ||
| * | ||
| * **Note**: When using SSR, setting this prop may help resolving hydration errors caused by locale mismatch between server and client. | ||
| * | ||
| * @example 'hu-HU' | ||
| */ | ||
| locale?: string; | ||
| /** | ||
| * Minute hand length, in %. | ||
| * | ||
| * @default 70 | ||
| * @example 80 | ||
| */ | ||
| minuteHandLength?: HandLength; | ||
| /** | ||
| * The length of the part of a minute hand on the opposite side the hand is pointing to, in %. | ||
| * | ||
| * @default 10 | ||
| * @example 20 | ||
| */ | ||
| minuteHandOppositeLength?: OppositeHandLength; | ||
| /** | ||
| * Minute hand width, in pixels. | ||
| * | ||
| * @default 2 | ||
| * @example 3 | ||
| */ | ||
| minuteHandWidth?: HandWidth; | ||
| /** | ||
| * Minute marks length, in %. | ||
| * | ||
| * @default 6 | ||
| * @example 8 | ||
| */ | ||
| minuteMarksLength?: MarkLength; | ||
| /** | ||
| * Minute marks width, in pixels. | ||
| * | ||
| * @default 1 | ||
| * @example 2 | ||
| */ | ||
| minuteMarksWidth?: MarkWidth; | ||
| /** | ||
| * Whether hour marks shall be rendered. | ||
| * | ||
| * @default true | ||
| * @example false | ||
| */ | ||
| renderHourMarks?: boolean; | ||
| /** | ||
| * Whether minute hand shall be rendered. | ||
| * | ||
| * @default true | ||
| * @example false | ||
| */ | ||
| renderMinuteHand?: boolean; | ||
| /** | ||
| * Whether minute marks shall be rendered. | ||
| * | ||
| * @default true | ||
| * @example false | ||
| */ | ||
| renderMinuteMarks?: boolean; | ||
| /** | ||
| * Whether numbers shall be rendered. | ||
| * | ||
| * @default true | ||
| * @example false | ||
| */ | ||
| renderNumbers?: boolean; | ||
| /** | ||
| * Whether second hand shall be rendered. | ||
| * | ||
| * @default true | ||
| * @example false | ||
| */ | ||
| renderSecondHand?: boolean; | ||
| /** | ||
| * Second hand length, in %. | ||
| * | ||
| * @default 90 | ||
| * @example 80 | ||
| */ | ||
| secondHandLength?: HandLength; | ||
| /** | ||
| * The length of the part of a second hand on the opposite side the hand is pointing to, in %. | ||
| * | ||
| * @default 10 | ||
| * @example 20 | ||
| */ | ||
| secondHandOppositeLength?: OppositeHandLength; | ||
| /** | ||
| * Second hand width, in pixels. | ||
| * | ||
| * @default 1 | ||
| * @example 2 | ||
| */ | ||
| secondHandWidth?: HandWidth; | ||
| /** | ||
| * Clock size, in pixels (e.g. `200`) or as string (e.g. `"50vw"`). | ||
| * | ||
| * @default 150 | ||
| * @example 260 | ||
| * @example '50vw' | ||
| */ | ||
| size?: React.CSSProperties['width']; | ||
| /** | ||
| * Whether to use millisecond precision. | ||
| * | ||
| * @default false | ||
| * @example true | ||
| */ | ||
| useMillisecondPrecision?: boolean; | ||
| /** | ||
| * Clock value. Must be provided. | ||
| * | ||
| * @example new Date() | ||
| */ | ||
| value?: string | Date | null; | ||
| }; | ||
| /** | ||
| * Displays a complete clock. | ||
| */ | ||
| declare const Clock: React.FC<ClockProps>; | ||
| export default Clock; |
@@ -9,2 +9,5 @@ import React from 'react'; | ||
| import { isHandLength, isOppositeHandLength, isHandWidth, isMarkLength, isMarkWidth, } from './shared/propTypes.js'; | ||
| /** | ||
| * Displays a complete clock. | ||
| */ | ||
| var Clock = function Clock(_a) { | ||
@@ -11,0 +14,0 @@ var className = _a.className, formatHour = _a.formatHour, _b = _a.hourHandLength, hourHandLength = _b === void 0 ? 50 : _b, hourHandOppositeLength = _a.hourHandOppositeLength, _c = _a.hourHandWidth, hourHandWidth = _c === void 0 ? 4 : _c, _d = _a.hourMarksLength, hourMarksLength = _d === void 0 ? 10 : _d, _e = _a.hourMarksWidth, hourMarksWidth = _e === void 0 ? 3 : _e, locale = _a.locale, _f = _a.minuteHandLength, minuteHandLength = _f === void 0 ? 70 : _f, minuteHandOppositeLength = _a.minuteHandOppositeLength, _g = _a.minuteHandWidth, minuteHandWidth = _g === void 0 ? 2 : _g, _h = _a.minuteMarksLength, minuteMarksLength = _h === void 0 ? 6 : _h, _j = _a.minuteMarksWidth, minuteMarksWidth = _j === void 0 ? 1 : _j, _k = _a.renderHourMarks, renderHourMarks = _k === void 0 ? true : _k, _l = _a.renderMinuteHand, renderMinuteHand = _l === void 0 ? true : _l, _m = _a.renderMinuteMarks, renderMinuteMarks = _m === void 0 ? true : _m, renderNumbers = _a.renderNumbers, _o = _a.renderSecondHand, renderSecondHand = _o === void 0 ? true : _o, _p = _a.secondHandLength, secondHandLength = _p === void 0 ? 90 : _p, secondHandOppositeLength = _a.secondHandOppositeLength, _q = _a.secondHandWidth, secondHandWidth = _q === void 0 ? 1 : _q, _r = _a.size, size = _r === void 0 ? 150 : _r, useMillisecondPrecision = _a.useMillisecondPrecision, value = _a.value; |
| { | ||
| "name": "react-clock", | ||
| "version": "4.5.1", | ||
| "version": "4.6.0", | ||
| "description": "An analog clock for your React app.", | ||
@@ -32,3 +32,3 @@ "type": "module", | ||
| "test": "yarn lint && yarn tsc && yarn prettier && yarn unit", | ||
| "tsc": "tsc --noEmit", | ||
| "tsc": "tsc", | ||
| "unit": "vitest", | ||
@@ -62,3 +62,3 @@ "watch": "yarn build-js-esm --watch & yarn build-js-cjs --watch & nodemon --watch src --ext css --exec \"yarn copy-styles\"" | ||
| "devDependencies": { | ||
| "@testing-library/jest-dom": "^5.15.0", | ||
| "@testing-library/jest-dom": "^6.0.0", | ||
| "@testing-library/react": "^14.0.0", | ||
@@ -76,4 +76,4 @@ "@types/node": "*", | ||
| "rimraf": "^3.0.0", | ||
| "typescript": "^5.0.0", | ||
| "vitest": "^0.34.0" | ||
| "typescript": "^5.3.2", | ||
| "vitest": "^1.0.2" | ||
| }, | ||
@@ -80,0 +80,0 @@ "peerDependencies": { |
@@ -1,2 +0,2 @@ | ||
| [](https://www.npmjs.com/package/react-clock)  [](https://github.com/wojtekmaj/react-clock/actions) | ||
| [](https://www.npmjs.com/package/react-clock)  [](https://github.com/wojtekmaj/react-clock/actions) | ||
@@ -17,3 +17,3 @@ # react-clock | ||
| [Online demo](http://projects.wojtekmaj.pl/react-clock/) is also available! | ||
| [Online demo](https://projects.wojtekmaj.pl/react-clock/) is also available! | ||
@@ -68,28 +68,28 @@ ## Installation | ||
| | Prop name | Description | Default value | Example values | | ||
| | ------------------------ | ------------------------------------------------------------------------------------------------------------------------- | ----------------------- | --------------------------------------------------------------------------------------------------- | | ||
| | 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> | | ||
| | 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')` | | ||
| | hourHandLength | Hour hand length, in %. | `50` | `80` | | ||
| | hourHandOppositeLength | The length of the part of an hour hand on the opposite side the hand is pointing to, in %. | `10` | `20` | | ||
| | hourHandWidth | Hour hand width, in pixels. | `4` | `3` | | ||
| | hourMarksLength | Hour marks length, in %. | `10` | `8` | | ||
| | hourMarksWidth | Hour marks width, in pixels. | `3` | `2` | | ||
| | 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"` | | ||
| | minuteHandLength | Minute hand length, in %. | `70` | `80` | | ||
| | minuteHandOppositeLength | The length of the part of a minute hand on the opposite side the hand is pointing to, in %. | `10` | `20` | | ||
| | minuteHandWidth | Minute hand width, in pixels. | `2` | `3` | | ||
| | minuteMarksLength | Minute marks length, in %. | `6` | `8` | | ||
| | minuteMarksWidth | Minute marks width, in pixels. | `1` | `2` | | ||
| | renderHourMarks | Whether hour marks shall be rendered. | `true` | `false` | | ||
| | renderMinuteHand | Whether minute hand shall be rendered. | `true` | `false` | | ||
| | renderMinuteMarks | Whether minute marks shall be rendered. | `true` | `false` | | ||
| | renderNumbers | Whether numbers shall be rendered. | `false` | `true` | | ||
| | renderSecondHand | Whether second hand shall be rendered. | `true` | `false` | | ||
| | secondHandLength | Second hand length, in %. | `90` | `80` | | ||
| | secondHandOppositeLength | The length of the part of a second hand on the opposite side the hand is pointing to, in %. | `10` | `20` | | ||
| | secondHandWidth | Second hand width, in pixels. | `1` | `2` | | ||
| | 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> | | ||
| | useMillisecondPrecision | Whether to use millisecond precision. | `false` | `true` | | ||
| | value | Clock value. Must be provided. | n/a | Date: `new Date()` | | ||
| | Prop name | Description | Default value | Example values | | ||
| | ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------- | --------------------------------------------------------------------------------------------------- | | ||
| | 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> | | ||
| | 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')` | | ||
| | hourHandLength | Hour hand length, in %. | `50` | `80` | | ||
| | hourHandOppositeLength | The length of the part of an hour hand on the opposite side the hand is pointing to, in %. | `10` | `20` | | ||
| | hourHandWidth | Hour hand width, in pixels. | `4` | `3` | | ||
| | hourMarksLength | Hour marks length, in %. | `10` | `8` | | ||
| | hourMarksWidth | Hour marks width, in pixels. | `3` | `2` | | ||
| | locale | Locale that should be used by the clock. Can be any [IETF language tag](https://en.wikipedia.org/wiki/IETF_language_tag). **Note**: When using SSR, setting this prop may help resolving hydration errors caused by locale mismatch between server and client. | Server locale/User's browser settings | `"hu-HU"` | | ||
| | minuteHandLength | Minute hand length, in %. | `70` | `80` | | ||
| | minuteHandOppositeLength | The length of the part of a minute hand on the opposite side the hand is pointing to, in %. | `10` | `20` | | ||
| | minuteHandWidth | Minute hand width, in pixels. | `2` | `3` | | ||
| | minuteMarksLength | Minute marks length, in %. | `6` | `8` | | ||
| | minuteMarksWidth | Minute marks width, in pixels. | `1` | `2` | | ||
| | renderHourMarks | Whether hour marks shall be rendered. | `true` | `false` | | ||
| | renderMinuteHand | Whether minute hand shall be rendered. | `true` | `false` | | ||
| | renderMinuteMarks | Whether minute marks shall be rendered. | `true` | `false` | | ||
| | renderNumbers | Whether numbers shall be rendered. | `false` | `true` | | ||
| | renderSecondHand | Whether second hand shall be rendered. | `true` | `false` | | ||
| | secondHandLength | Second hand length, in %. | `90` | `80` | | ||
| | secondHandOppositeLength | The length of the part of a second hand on the opposite side the hand is pointing to, in %. | `10` | `20` | | ||
| | secondHandWidth | Second hand width, in pixels. | `1` | `2` | | ||
| | 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> | | ||
| | useMillisecondPrecision | Whether to use millisecond precision. | `false` | `true` | | ||
| | value | Clock value. Must be provided. | n/a | Date: `new Date()` | | ||
@@ -96,0 +96,0 @@ ## License |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by16.89%
89400
- Lines of code
- increased by28.67%
2006