https://github.com/jxom/react-t-minus

React component to handle simple countdowns
https://github.com/jxom/react-t-minus

Last synced: about 1 month ago
JSON representation

React component to handle simple countdowns

• Host: GitHub
• URL: https://github.com/jxom/react-t-minus
• Owner: jxom
• License: mit
• Created: 2018-06-12T06:15:58.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2019-10-18T00:39:12.000Z (over 4 years ago)
• Last Synced: 2024-04-20T05:42:47.627Z (2 months ago)
• Language: JavaScript
• Homepage: https://jxom.github.io/react-t-minus/
• Size: 454 KB
• Stars: 14
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-react-render-props - react-t-minus
• awesome-react-headless-components - React T-Minus - React component to handle simple countdowns (Libraries)
• awesome-react-render-props - react-t-minus

README

        
# React T-Minus

> A React component to handle countdowns



## Install

`npm install react-t-minus`

## Example

```jsx

import T from 'react-t-minus';

 console.log('blast off!')}

  onTick={({ secondsLeft }) => console.log(secondsLeft)}

>

  {({ isComplete, secondsLeft }) =>

    isComplete ? (

      

    ) : (

      
{secondsLeft} seconds until launch...

    )

  }


```

### More examples

- [Storybook](https://jxom.github.io/react-t-minus/)

- [Storybook Stories](https://github.com/jxom/react-t-minus/blob/master/src/__stories__/index.stories.js)

## Props

### minus

Type: `number`

The number (in seconds) to countdown from.

### onComplete

Type: `function()`

The function to invoke when the countdown is complete.

### onTick

Type: `function({ secondsLeft: number })`

The function to invoke per tick of the countdown. Also includes how many seconds are left (`secondsLeft`).

### Render props

#### isComplete

Type: `boolean`

Returns whether or not the countdown is complete

#### secondsLeft

Type: `number`

Returns the amount of seconds left

## License

MIT © [jxom](http://jxom.io)