{"_id":"@7segment/countdown-react","_rev":"3-6c41b3d482779d1912d731d3e21bb8b3","name":"@7segment/countdown-react","dist-tags":{"latest":"0.0.4"},"versions":{"0.0.1":{"name":"@7segment/countdown-react","version":"0.0.1","_id":"@7segment/countdown-react@0.0.1","maintainers":[{"name":"sunset-kim","email":"0chickim@gmail.com"}],"dist":{"shasum":"6e5fac4c9c785e0347a8e5493551d5275764aa82","tarball":"https://registry.npmjs.org/@7segment/countdown-react/-/countdown-react-0.0.1.tgz","fileCount":5,"integrity":"sha512-bRP2TcRwBLT5QdeNy85YOl4wCrZRtq+jAUT1SI1VPDVNx9yAXR0hZQBNPl6at7bYEEfsCELjCbwfXKvQdK454w==","signatures":[{"sig":"MEUCIQCPjjhMH3o8jDY68sn+GRto+nYjXpw2vAxH5HCb2mbJtgIgGMdXhhxT5d3S8an52TdjmXno5/mRnfAUfGM8iVfxPt4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21847},"main":"dist/index.es.js","type":"module","_from":"file:7segment-countdown-react-0.0.1.tgz","types":"dist/index.d.ts","scripts":{"dev":"vite","lint":"eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0","test":"vitest","build":"tsc --p ./tsconfig.build.json && vite build","preview":"vite preview","coverage":"vitest run --coverage"},"_npmUser":{"name":"sunset-kim","email":"0chickim@gmail.com"},"_resolved":"/private/var/folders/w1/k43w0qnx7n9g660zj0mg6xn80000gn/T/d156f5e7985e2d7c8b2a84d8be8a4b45/7segment-countdown-react-0.0.1.tgz","_integrity":"sha512-bRP2TcRwBLT5QdeNy85YOl4wCrZRtq+jAUT1SI1VPDVNx9yAXR0hZQBNPl6at7bYEEfsCELjCbwfXKvQdK454w==","_npmVersion":"10.7.0","description":"이 프로젝트는 React 애플리케이션을 위한 유연하고 사용하기 쉬운 카운트다운 컴포넌트를 제공합니다. 세븐 세그먼트 디스플레이 스타일의 시각적 요소를 포함하여 남은 시간을 일, 시간, 분, 초 단위로 표시할 수 있습니다.","directories":{},"_nodeVersion":"20.15.1","dependencies":{"@7segment/core":"0.0.0"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.3.4","jsdom":"^24.1.1","react":"^18.3.1","eslint":"^8.57.0","vitest":"^2.0.4","react-dom":"^18.3.1","typescript":"^5.4.2","@types/node":"^22.0.0","@types/react":"^18.3.3","vite-plugin-dts":"4.0.0-beta.1","@types/react-dom":"^18.3.0","@vitest/coverage-v8":"^2.0.4","@vitejs/plugin-react":"^4.3.1","@testing-library/react":"^16.0.0","@testing-library/jest-dom":"^6.4.8","@typescript-eslint/parser":"^7.15.0","eslint-plugin-react-hooks":"^4.6.2","eslint-plugin-react-refresh":"^0.4.7","@typescript-eslint/eslint-plugin":"^7.15.0"},"peerDependencies":{"react":"^18.3.1","react-dom":"^18.3.1"},"_npmOperationalInternal":{"tmp":"tmp/countdown-react_0.0.1_1722949196907_0.8641497213670069","host":"s3://npm-registry-packages"}},"0.0.2":{"name":"@7segment/countdown-react","version":"0.0.2","_id":"@7segment/countdown-react@0.0.2","maintainers":[{"name":"sunset-kim","email":"0chickim@gmail.com"}],"dist":{"shasum":"236bf1bbf79fe2081533d9bd0b7272883b2cf8c3","tarball":"https://registry.npmjs.org/@7segment/countdown-react/-/countdown-react-0.0.2.tgz","fileCount":5,"integrity":"sha512-Vh1RGN6AJ3CTBApBXhR+/MMkCEM8VY1h0hr225+y2Z8ptvsFZmdv2XBLp5OeTSPdMUjwfizgDuvkGLEz6/5J7A==","signatures":[{"sig":"MEUCIGohImrcD0NcnL3PiOG/6/vPoIcbTljIe0c8ep6aXTaxAiEAzY+XzbTHdEqIr8O1Qzw5EJU0Kh5J48/IhtO2vA2DXLQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21861},"main":"dist/index.es.js","type":"module","_from":"file:7segment-countdown-react-0.0.2.tgz","types":"dist/index.d.ts","scripts":{"dev":"vite","lint":"eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0","test":"vitest","build":"tsc --p ./tsconfig.build.json && vite build","preview":"vite preview","coverage":"vitest run --coverage"},"_npmUser":{"name":"sunset-kim","email":"0chickim@gmail.com"},"_resolved":"/private/var/folders/w1/k43w0qnx7n9g660zj0mg6xn80000gn/T/8ce91ebade936f60784f72e4444cb5e9/7segment-countdown-react-0.0.2.tgz","_integrity":"sha512-Vh1RGN6AJ3CTBApBXhR+/MMkCEM8VY1h0hr225+y2Z8ptvsFZmdv2XBLp5OeTSPdMUjwfizgDuvkGLEz6/5J7A==","_npmVersion":"10.7.0","description":"이 프로젝트는 React 애플리케이션을 위한 유연하고 사용하기 쉬운 카운트다운 컴포넌트를 제공합니다. 세븐 세그먼트 디스플레이 스타일의 시각적 요소를 포함하여 남은 시간을 일, 시간, 분, 초 단위로 표시할 수 있습니다.","directories":{},"_nodeVersion":"20.15.1","dependencies":{"@7segment/core":"0.0.0"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.3.4","jsdom":"^24.1.1","react":"^18.3.1","eslint":"^8.57.0","vitest":"^2.0.4","react-dom":"^18.3.1","typescript":"^5.4.2","@types/node":"^22.0.0","@types/react":"^18.3.3","vite-plugin-dts":"4.0.0-beta.1","@types/react-dom":"^18.3.0","@vitest/coverage-v8":"^2.0.4","@vitejs/plugin-react":"^4.3.1","@testing-library/react":"^16.0.0","@testing-library/jest-dom":"^6.4.8","@typescript-eslint/parser":"^7.15.0","eslint-plugin-react-hooks":"^4.6.2","eslint-plugin-react-refresh":"^0.4.7","@typescript-eslint/eslint-plugin":"^7.15.0"},"peerDependencies":{"react":"^18.3.1","react-dom":"^18.3.1"},"_npmOperationalInternal":{"tmp":"tmp/countdown-react_0.0.2_1723112733955_0.7580575596799315","host":"s3://npm-registry-packages"}},"0.0.3":{"name":"@7segment/countdown-react","version":"0.0.3","keywords":["countdown","segment","seven segment","lcd","react"],"_id":"@7segment/countdown-react@0.0.3","maintainers":[{"name":"sunset-kim","email":"0chickim@gmail.com"}],"dist":{"shasum":"1b482d56f341f07093a3130716a184a585d42965","tarball":"https://registry.npmjs.org/@7segment/countdown-react/-/countdown-react-0.0.3.tgz","fileCount":5,"integrity":"sha512-/Bp87o1R+QhKGAkkN+KBHQ271cNX2KLuI8ZqmPJWpKIU/XTku7TVSKzXKpnm08suYbuBl6xGMbbMI370v3qguQ==","signatures":[{"sig":"MEUCIQCbCCT+W0ZKOSTuBgcJjkU9er5l0FNls+B3t05I17yOmAIgCkEkVGSJoSDroj3Wcwjpied1spp+Qni8FpFyhj+SlZ8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22040},"main":"dist/index.es.js","type":"module","_from":"file:7segment-countdown-react-0.0.3.tgz","types":"dist/index.d.ts","scripts":{"dev":"vite","lint":"eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0","test":"vitest","build":"tsc --p ./tsconfig.build.json && vite build","preview":"vite preview","coverage":"vitest run --coverage"},"_npmUser":{"name":"sunset-kim","email":"0chickim@gmail.com"},"_resolved":"/private/var/folders/w1/k43w0qnx7n9g660zj0mg6xn80000gn/T/0adfe1a43cdbfd1d85a69da09240ca21/7segment-countdown-react-0.0.3.tgz","_integrity":"sha512-/Bp87o1R+QhKGAkkN+KBHQ271cNX2KLuI8ZqmPJWpKIU/XTku7TVSKzXKpnm08suYbuBl6xGMbbMI370v3qguQ==","_npmVersion":"10.7.0","description":"이 프로젝트는 React 애플리케이션을 위한 유연하고 사용하기 쉬운 카운트다운 컴포넌트를 제공합니다. 세븐 세그먼트 디스플레이 스타일의 시각적 요소를 포함하여 남은 시간을 일, 시간, 분, 초 단위로 표시할 수 있습니다.","directories":{},"_nodeVersion":"20.15.1","dependencies":{"@7segment/core":"0.0.0"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.3.4","jsdom":"^24.1.1","react":"^18.3.1","eslint":"^8.57.0","vitest":"^2.0.4","react-dom":"^18.3.1","typescript":"^5.4.2","@types/node":"^22.0.0","@types/react":"^18.3.3","vite-plugin-dts":"4.0.0-beta.1","@types/react-dom":"^18.3.0","@vitest/coverage-v8":"^2.0.4","@vitejs/plugin-react":"^4.3.1","@testing-library/react":"^16.0.0","@testing-library/jest-dom":"^6.4.8","@typescript-eslint/parser":"^7.15.0","eslint-plugin-react-hooks":"^4.6.2","eslint-plugin-react-refresh":"^0.4.7","@typescript-eslint/eslint-plugin":"^7.15.0"},"peerDependencies":{"react":"^18.3.1","react-dom":"^18.3.1"},"_npmOperationalInternal":{"tmp":"tmp/countdown-react_0.0.3_1723268284380_0.12884652353561998","host":"s3://npm-registry-packages"}},"0.0.4":{"name":"@7segment/countdown-react","version":"0.0.4","type":"module","main":"dist/index.es.js","types":"dist/index.d.ts","keywords":["countdown","segment","seven segment","lcd","react"],"dependencies":{"@7segment/core":"0.0.2"},"peerDependencies":{"react":"^18.3.1","react-dom":"^18.3.1"},"devDependencies":{"@testing-library/jest-dom":"^6.4.8","@testing-library/react":"^16.0.0","@types/node":"^22.0.0","@types/react":"^18.3.3","@types/react-dom":"^18.3.0","@typescript-eslint/eslint-plugin":"^7.15.0","@typescript-eslint/parser":"^7.15.0","@vitejs/plugin-react":"^4.3.1","@vitest/coverage-v8":"^2.0.4","eslint":"^8.57.0","eslint-plugin-react-hooks":"^4.6.2","eslint-plugin-react-refresh":"^0.4.7","jsdom":"^24.1.1","react":"^18.3.1","react-dom":"^18.3.1","typescript":"^5.4.2","vite":"^5.3.4","vite-plugin-dts":"4.0.0-beta.1","vitest":"^2.0.4"},"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","test":"vitest","coverage":"vitest run --coverage"},"_id":"@7segment/countdown-react@0.0.4","description":"이 프로젝트는 React 애플리케이션을 위한 유연하고 사용하기 쉬운 카운트다운 컴포넌트를 제공합니다. 세븐 세그먼트 디스플레이 스타일의 시각적 요소를 포함하여 남은 시간을 일, 시간, 분, 초 단위로 표시할 수 있습니다.","_integrity":"sha512-ZijrvGwEc2Uwpo4joEb9NKYf5tgpBlk/KIRJLAhb0IvxWVILYUiipHAejZ8NYaI3TkHMuYXkrGAUi+AKffZ90A==","_resolved":"/private/var/folders/w1/k43w0qnx7n9g660zj0mg6xn80000gn/T/00f355bea8dbaaea68c7a57b0f673417/7segment-countdown-react-0.0.4.tgz","_from":"file:7segment-countdown-react-0.0.4.tgz","_nodeVersion":"20.15.1","_npmVersion":"10.7.0","dist":{"integrity":"sha512-ZijrvGwEc2Uwpo4joEb9NKYf5tgpBlk/KIRJLAhb0IvxWVILYUiipHAejZ8NYaI3TkHMuYXkrGAUi+AKffZ90A==","shasum":"69969ebcd9b71eaaee746bdbd856c60e75e8b937","tarball":"https://registry.npmjs.org/@7segment/countdown-react/-/countdown-react-0.0.4.tgz","fileCount":5,"unpackedSize":22025,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICy0irsA2aUqRaSpyNWbiBG9VGM04L6USBE+/lD5p57zAiEAwr896I+dJbOLsL2ZUBkw/1fXr3bsbKdg4pAslEaDnN0="}]},"_npmUser":{"name":"sunset-kim","email":"0chickim@gmail.com"},"directories":{},"maintainers":[{"name":"sunset-kim","email":"0chickim@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/countdown-react_0.0.4_1723269177001_0.9389413381362866"},"_hasShrinkwrap":false}},"time":{"created":"2024-08-06T12:59:56.794Z","modified":"2024-08-10T05:52:57.426Z","0.0.1":"2024-08-06T12:59:57.097Z","0.0.2":"2024-08-08T10:25:34.135Z","0.0.3":"2024-08-10T05:38:04.544Z","0.0.4":"2024-08-10T05:52:57.185Z"},"keywords":["countdown","segment","seven segment","lcd","react"],"description":"이 프로젝트는 React 애플리케이션을 위한 유연하고 사용하기 쉬운 카운트다운 컴포넌트를 제공합니다. 세븐 세그먼트 디스플레이 스타일의 시각적 요소를 포함하여 남은 시간을 일, 시간, 분, 초 단위로 표시할 수 있습니다.","maintainers":[{"name":"sunset-kim","email":"0chickim@gmail.com"}],"readme":"# Countdown Component\n\n이 프로젝트는 React 애플리케이션을 위한 유연하고 사용하기 쉬운 카운트다운 컴포넌트를 제공합니다. 세븐 세그먼트 디스플레이 스타일의 시각적 요소를 포함하여 남은 시간을 일, 시간, 분, 초 단위로 표시할 수 있습니다.\n\nhttps://github.com/user-attachments/assets/8b87632c-7f6d-4ff0-b3af-479f9c090081\n\n\n## 프로젝트 개요\n\n이 라이브러리는 다음과 같은 주요 기능을 제공합니다\n\n1. `SevenSegment` 컴포넌트는 7-세그먼트 디스플레이 형식을 사용하여 숫자(0-9)를 시각적으로 표시하는 React 컴포넌트입니다. 숫자의 각 세그먼트는 활성화 상태에 따라 다른 색상으로 표시됩니다.\n\n2. `SegmentDisplay` 컴포넌트는 주어진 숫자를 7-세그먼트 디스플레이 형식으로 시각적으로 표시하는 React 컴포넌트입니다. 이 컴포넌트는 SevenSegment 컴포넌트를 사용하여 여러 자릿수를 표시합니다.\n\n3. `Countdown` 컴포넌트는 주어진 목표 날짜(targetDate)까지 남은 시간을 7-세그먼트 디스플레이 형식으로 시각적으로 표시하는 React 컴포넌트입니다. 이 컴포넌트는 useCountdown 훅을 사용하여 남은 시간을 계산하고, SegmentDisplay와 Colon 컴포넌트를 사용하여 남은 시간의 각 부분을 표시합니다.\n\n4. `useCountdown` 훅은 주어진 목표 날짜까지 남은 시간을 계산하고 관리하는 커스텀 React 훅입니다. 이 훅은 남은 시간을 일, 시간, 분, 초 단위로 포맷하여 반환하며, 카운트다운이 0에 도달하면 지정된 콜백 함수를 호출합니다.\n\n5. `useControlledCountdown` 훅은 제어 가능한 카운트다운 타이머를 제공하는 React 훅입니다. 이 훅은 주어진 초기 시간에서 시작하여, 남은 시간을 일, 시간, 분, 초 단위로 포맷하여 반환하며, 카운트다운의 시작, 중지, 초기화 기능을 제공합니다.\n\n## 설치 방법\n\nnpm을 사용하여 패키지를 설치할 수 있습니다:\n\n```bash\nnpm i @7segment/countdown-react\n```\n\n또는 yarn을 사용하는 경우:\n\n```bash\nyarn add @7segment/countdown-react\n```\n\n## 사용 방법\n\n### Seven Segment\n\n다음과 같은 속성을 가집니다.\n\n| 속성 | 타입 | 설명 | 기본값 |\n| ------------------- | ------ | ------------------------------------------------ | ------------ |\n| `digit` | number | 표시할 숫자 (0-9) | - |\n| `onColor` | string | 활성화된 세그먼트의 색상 | \"dodgerblue\" |\n| `offColor` | string | 비활성화된 세그먼트의 색상 | \"aliceblue\" |\n| `size` | number | 컴포넌트의 크기 (픽셀 단위) | 100 |\n| `animationDuration` | number | 세그먼트 색상 변경 애니메이션 지속 시간 (밀리초) | 300 |\n\n```ts\nimport React from \"react\";\nimport { SevenSegment } from \"./path/to/SevenSegment\";\n\nconst App = () => {\n return (\n
\n
Seven Segment Display
\n \n
\n );\n};\n\nexport default App;\n```\n\n### Segment Display\n\n컴포넌트는 아래와 같은 속성을 가집니다\n| 속성 | 타입 | 설명 | 기본값 |\n|----------------------|---------|--------------------------------------------------|-------------|\n| `value` | number | 표시할 숫자 | - |\n| `place` | number | 표시할 자리수 (자릿수를 맞추기 위해 앞에 0을 채움) | 2 |\n| `onColor` | string | 활성화된 세그먼트의 색상 | \"dodgerblue\"|\n| `offColor` | string | 비활성화된 세그먼트의 색상 | \"aliceblue\" |\n| `size` | number | 컴포넌트의 크기 (픽셀 단위) | 100 |\n| `animationDuration` | number | 세그먼트 색상 변경 애니메이션 지속 시간 (밀리초) | 300 |\n\n```ts\nimport React from \"react\";\nimport { SegmentDisplay } from \"./path/to/SegmentDisplay\";\n\nconst App = () => {\n return (\n
\n
Segment Display
\n // 05\n //42\n \n //00123\n
\n );\n};\n\nexport default App;\n```\n\n### Countdown\n\n| 속성 | 타입 | 설명 | 기본값 |\n| ------------------- | -------- | ----------------------------------------------------- | ------------ |\n| `targetDate` | Date | 목표 날짜와 시간 | - |\n| `onEnd` | function | 카운트다운 종료 시 호출되는 콜백 함수 | - |\n| `onColor` | string | 활성화된 세그먼트의 색상 | \"dodgerblue\" |\n| `offColor` | string | 비활성화된 세그먼트의 색상 | \"aliceblue\" |\n| `size` | number | 컴포넌트의 크기 (픽셀 단위) | 100 |\n| `animationDuration` | number | 세그먼트 색상 변경 애니메이션 지속 시간 (밀리초 단위) | 300 |\n| `color` | string | 콜론의 색상 | \"black\" |\n| `colonGap` | number | 콜론 간격 (픽셀 단위) | 10 |\n\n```ts\nimport React from \"react\";\nimport { Countdown } from \"./path/to/Countdown\";\n\nconst App = () => {\n const targetDate = new Date(\"2024-12-31T23:59:59\");\n\n return (\n
\n
Countdown to New Year
\n \n
\n );\n};\n\nexport default App;\n```\n\n### useCountdown\n\n#### Parameter\n\n| 파라미터 | 타입 | 설명 |\n| -------------- | -------- | ---------------------------------------------------- |\n| `targetDate` | Date | 카운트다운의 목표 날짜입니다. |\n| `option` | Object | 선택적 설정 객체입니다. |\n| `option.onEnd` | Function | 카운트다운이 0에 도달했을 때 호출될 콜백 함수입니다. |\n\n#### Returns\n\n| 속성 | 타입 | 설명 |\n| --------- | ------ | --------- |\n| `days` | number | 남은 일수 |\n| `hours` | number | 남은 시간 |\n| `minutes` | number | 남은 분 |\n| `seconds` | number | 남은 초 |\n\n#### Example\n\n```ts\nimport React from \"react\";\nimport { useCountdown } from \"./path/to/useCountdown\";\n\nconst CountdownComponent = () => {\n const { days, hours, minutes, seconds } = useCountdown(\n new Date(\"2025-01-01\"),\n {\n onEnd: () => console.log(\"카운트다운 종료!\"),\n }\n );\n\n return (\n
\n
Countdown to 2025
\n
\n {days}일 {hours}시간 {minutes}분 {seconds}초 남음\n
\n
\n );\n};\n\nexport default CountdownComponent;\n```\n\n### useControlledCountdown\n\n#### Parameter\n\n| 파라미터 | 타입 | 설명 |\n| ---------------- | ------ | ------------------------------- |\n| `initialSeconds` | number | 카운트다운의 초기 시간(초 단위) |\n\n#### Returns\n\n| 속성 | 타입 | 설명 |\n| ----------- | -------- | ----------------------- |\n| `days` | number | 남은 일수 |\n| `hours` | number | 남은 시간 |\n| `minutes` | number | 남은 분 |\n| `seconds` | number | 남은 초 |\n| `isRunning` | boolean | 카운트다운 실행 중 여부 |\n| `start` | function | 카운트다운 시작 함수 |\n| `stop` | function | 카운트다운 중지 함수 |\n| `reset` | function | 카운트다운 초기화 함수 |\n\n#### Example\n\n```ts\nimport React from \"react\";\nimport { useControlledCountdown } from \"./path/to/useControlledCountdown\";\n\nconst CountdownComponent = () => {\n const { days, hours, minutes, seconds, isRunning, start, stop, reset } =\n useControlledCountdown(3600);\n\n return (\n