https://github.com/toluade/protime-react-component

A simple timer component and hook for your react app.
https://github.com/toluade/protime-react-component

Last synced: about 1 month ago
JSON representation

A simple timer component and hook for your react app.

• Host: GitHub
• URL: https://github.com/toluade/protime-react-component
• Owner: Toluade
• Created: 2024-04-19T15:14:26.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-04-22T09:50:13.000Z (10 months ago)
• Last Synced: 2024-11-30T22:34:10.911Z (2 months ago)
• Language: TypeScript
• Homepage:
• Size: 436 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# ProTime

[![NPM](https://img.shields.io/npm/v/@toluade/protime-react-component.svg)](https://www.npmjs.com/package/@toluade/protime-react-component) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

> A simple timer component and hook for your react app.

## Install

npm

```sh npm

npm i @toluade/protime-react-component --save

```

yarn

```sh yarn

yarn add @toluade/protime-react-component

```

## ProTime Component

- Returns a react component that displays a countdown timer.

### Props

- `startDate: string | Date`

  - The timer won't start until this time is reached.

- `endDate: string | Date`

  - This is the time the timer will count down to.

- `className: string`

  - This is the className property of the container element.

### Example Usage

```js

import { ProTime } from '@toluade/protime-react-component'

function App() {

  const startDate = '2024-04-19T09:00'

  const endDate = '2024-12-25T09:00'

  return (

    


      

    

  )

}

```


## useProTime Hook

- Returns an object with the values `{ days, hours, minutes, seconds,}`.

### Props

- `startDate: string | Date`

  - The timer won't start until this time is reached.

- `endDate: string | Date`

  - This is the time the timer will count down to.

- `isFormatted?: boolean`

  - If you want the values returned formatted with a "0" in front when the value is less than 10, set to `true`. The default value is `false`.

### Example Usage

```js

import { useProTime } from '@toluade/protime-react-component'

function App() {

  const startDate = '2024-04-19T09:00'

  const endDate = '2024-12-25T09:00'

  const { days, hours, minutes, seconds } = useProTime(startDate, endDate, true)

  return (

    


      


        {days}days

        {hours}hours

        {minutes}minutes

        {seconds}seconds

      

    

  )

}

```


## License

MIT © [Toluade](https://github.com/Toluade)