{"_id":"@allchats/react-compound-timer","name":"@allchats/react-compound-timer","dist-tags":{"latest":"1.2.0"},"versions":{"1.2.0":{"name":"@allchats/react-compound-timer","version":"1.2.0","description":"Timer compound react component","main":"build","types":"build","keywords":["react","timer","countdown","compound","stopwatch"],"homepage":"https://github.com/volkov97/react-compound-timer","repository":{"type":"git","url":"git+https://github.com/volkov97/react-compound-timer.git"},"scripts":{"start":"npx styleguidist server","build":"npx styleguidist build","test":"jest"},"author":{"name":"German Volkov","email":"Volkov.german.1997@gmail.com","url":"https://volkov97.com"},"license":"ISC","devDependencies":{"@types/jest":"^24.0.11","@types/react":"^16.8.14","acorn":"^6.4.1","bufferutil":"^4.0.1","canvas":"^2.6.1","jest":"^25.1.0","react":"^17.0.2","react-docgen-typescript":"^1.16.3","react-dom":"^17.0.2","react-styleguidist":"^11.0.3","ts-jest":"^25.2.1","ts-loader":"^5.3.3","tslint":"^5.12.1","tslint-config-airbnb":"^5.11.1","tslint-react":"^3.6.0","typescript":"^3.3.3","utf-8-validate":"^5.0.2","webpack":"^4.42.0","webpack-cli":"^3.3.11"},"peerDependencies":{"react":"^17.0.2"},"_id":"@allchats/react-compound-timer@1.2.0","bugs":{"url":"https://github.com/volkov97/react-compound-timer/issues"},"_nodeVersion":"20.10.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-A1Dml6o36UDI8MLWElvb7sgXE+WjmuFzfyjoeUM85mmNZcIZeu/kma4K2YlPlmYQUZCxEwI1iv2FXXrhmDdPuA==","shasum":"e7e982f2cffc3243bd778ccfa8582733db4f13ad","tarball":"https://registry.npmjs.org/@allchats/react-compound-timer/-/react-compound-timer-1.2.0.tgz","fileCount":55,"unpackedSize":88957,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDB+uDn1GnWRL2sn5q3tjg3zn7FxxQWHTbOFkn478a0zAIhAN3fB34u1fNyNwHGABk5OOVJm04U1UCpYBI6EuEeFPWr"}]},"_npmUser":{"name":"jonasbpa","email":"jbpa28@gmail.com"},"directories":{},"maintainers":[{"name":"jonasbpa","email":"jbpa28@gmail.com"},{"name":"jefersson","email":"jeferssonpt@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-compound-timer_1.2.0_1710183200373_0.41754482279047966"},"_hasShrinkwrap":false}},"time":{"created":"2024-03-11T18:53:20.298Z","1.2.0":"2024-03-11T18:53:20.549Z","modified":"2024-03-11T18:53:21.108Z"},"maintainers":[{"name":"jonasbpa","email":"jbpa28@gmail.com"},{"name":"jefersson","email":"jeferssonpt@gmail.com"}],"description":"Timer compound react component","homepage":"https://github.com/volkov97/react-compound-timer","keywords":["react","timer","countdown","compound","stopwatch"],"repository":{"type":"git","url":"git+https://github.com/volkov97/react-compound-timer.git"},"author":{"name":"German Volkov","email":"Volkov.german.1997@gmail.com","url":"https://volkov97.com"},"bugs":{"url":"https://github.com/volkov97/react-compound-timer/issues"},"license":"ISC","readme":"# react-compound-timer\n\nTimer compound component for react and react-native to make building timers less painfull.\nIt incapsulates all timer logic - you should only think about rendering!\n\n[See Working Examples](https://volkov97.github.io/react-compound-timer/)\n\n### Forward Count\n\nJust render a simple timer and start counting forward from 0. Use compound components to render time units.\nYou can see all avaliable time units in this example.\n\n```jsx\n<Timer>\n    <Timer.Days /> days\n    <Timer.Hours /> hours\n    <Timer.Minutes /> minutes\n    <Timer.Seconds /> seconds\n    <Timer.Milliseconds /> milliseconds\n</Timer>\n```\n\n### Backward Count\n\nThe same simple timer, but counting backward.\n\n```jsx\n<Timer\n    initialTime={55000}\n    direction=\"backward\"\n>\n    {() => (\n        <React.Fragment>\n            <Timer.Days /> days\n            <Timer.Hours /> hours\n            <Timer.Minutes /> minutes\n            <Timer.Seconds /> seconds\n            <Timer.Milliseconds /> milliseconds\n        </React.Fragment>\n    )}\n</Timer>\n```\n\n### Controls\n\nGet action functions from props and use them to control your timer.\n\n```jsx\n<Timer\n    initialTime={55000}\n>\n    {({ start, resume, pause, stop, reset, timerState }) => (\n        <React.Fragment>\n            <div>\n                <Timer.Days /> days\n                <Timer.Hours /> hours\n                <Timer.Minutes /> minutes\n                <Timer.Seconds /> seconds\n                <Timer.Milliseconds /> milliseconds\n            </div>\n            <div>{timerState}</div>\n            <br />\n            <div>\n                <button onClick={start}>Start</button>\n                <button onClick={pause}>Pause</button>\n                <button onClick={resume}>Resume</button>\n                <button onClick={stop}>Stop</button>\n                <button onClick={reset}>Reset</button>\n            </div>\n        </React.Fragment>\n    )}\n</Timer>\n```\n\n### No autoplay\n\nYou can just render a timer, and then start it only by using action function 'start' from props.\n\n```jsx\n<Timer\n    initialTime={55000}\n    startImmediately={false}\n>\n    {({ start, resume, pause, stop, reset, timerState }) => (\n        <React.Fragment>\n            <div>\n                <Timer.Days /> days\n                <Timer.Hours /> hours\n                <Timer.Minutes /> minutes\n                <Timer.Seconds /> seconds\n                <Timer.Milliseconds /> milliseconds\n            </div>\n            <div>{timerState}</div>\n            <br />\n            <div>\n                <button onClick={start}>Start</button>\n                <button onClick={pause}>Pause</button>\n                <button onClick={resume}>Resume</button>\n                <button onClick={stop}>Stop</button>\n                <button onClick={reset}>Reset</button>\n            </div>\n        </React.Fragment>\n    )}\n</Timer>\n```\n\n### With hooks\n\nWrite your own hooks on timer actions.\n\n```jsx\n<Timer\n    initialTime={55000}\n    startImmediately={false}\n    onStart={() => console.log('onStart hook')}\n    onResume={() => console.log('onResume hook')}\n    onPause={() => console.log('onPause hook')}\n    onStop={() => console.log('onStop hook')}\n    onReset={() => console.log('onReset hook')}\n>\n    {({ start, resume, pause, stop, reset, timerState }) => (\n        <React.Fragment>\n            <div>\n                <Timer.Days /> days\n                <Timer.Hours /> hours\n                <Timer.Minutes /> minutes\n                <Timer.Seconds /> seconds\n                <Timer.Milliseconds /> milliseconds\n            </div>\n            <div>{timerState}</div>\n            <br />\n            <div>\n                <button onClick={start}>Start</button>\n                <button onClick={pause}>Pause</button>\n                <button onClick={resume}>Resume</button>\n                <button onClick={stop}>Stop</button>\n                <button onClick={reset}>Reset</button>\n            </div>\n        </React.Fragment>\n    )}\n</Timer>\n```\n\n### Last Unit Property\n\nControl your last unit. For example, 1 minute 30 seconds can be 90 seconds, if you set lastUnit as 'seconds'.\nIt means that minutes, hours and days will not be computed.\n\n```jsx\n<Timer\n    initialTime={60000 * 60 * 48 + 5000}\n    lastUnit=\"h\"\n    direction=\"backward\"\n>\n    {() => (\n        <React.Fragment>\n            <Timer.Days /> days\n            <Timer.Hours /> hours\n            <Timer.Minutes /> minutes\n            <Timer.Seconds /> seconds\n            <Timer.Milliseconds /> milliseconds\n        </React.Fragment>\n    )}\n</Timer>\n```\n\n### With checkpoints\n\nIf you need to call some functions on certain time - provide checkpoints property. It is an array of objects.\nEach object contains time and callback, that will be fired, when timer intersects checkpoint's time.\n\n```jsx\n<Timer\n    initialTime={60000 * 60 * 48 + 5000}\n    direction=\"backward\"\n    checkpoints={[\n        {\n            time: 60000 * 60 * 48,\n            callback: () => console.log('Checkpoint A'),\n        },\n        {\n            time: 60000 * 60 * 48 - 5000,\n            callback: () => console.log('Checkpoint B'),\n        }\n    ]}\n>\n    {() => (\n        <React.Fragment>\n            <Timer.Days /> days\n            <Timer.Hours /> hours\n            <Timer.Minutes /> minutes\n            <Timer.Seconds /> seconds\n            <Timer.Milliseconds /> milliseconds\n        </React.Fragment>\n    )}\n</Timer>\n```\n\n## React Native\nTimer compound component also works for react-native applications. All you have to do is wrap the elements in a <Text> tag from react-native.\n\n### Countdown example with milliseconds\n```jsx\nimport { View, Text } from 'react-native'\nimport Timer from 'react-compound-timer'\n\n<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>\n    <Timer\n        initialTime={60 * 1000}\n        direction=\"backward\"\n        timeToUpdate={10}\n        checkpoints={[\n            {\n                time: 0,\n                callback: () => alert('countdown finished'),\n            },\n        ]}\n    >\n        <Text style={{ fontFamily: 'Helvetica Neue' }}>\n            <Text style={{ fontSize: 32 }}>\n                <Timer.Seconds />\n            </Text>\n            <Text style={{ fontSize: 12 }}>\n                <Timer.Milliseconds />\n            </Text>\n        </Text>\n    </Timer>\n</View>\n```","readmeFilename":"README.md"}