diff --git a/README.md b/README.md index c76bab8..d9e42b0 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,11 @@ # react-timer > A minimalistic yet customizable timer component! + [Live demo](https://xendora.github.io/react-timer/examples) -[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/) +![Travis (.org) branch](https://img.shields.io/travis/xendora/react-timer/master?style=for-the-badge) ![GitHub Release Date](https://img.shields.io/github/release-date/xendora/react-timer?style=for-the-badge) ![npm](https://img.shields.io/npm/v/@xendora/react-timer?style=for-the-badge) ![NPM](https://img.shields.io/npm/l/@xendora/react-timer?style=for-the-badge) +![npm bundle size](https://img.shields.io/bundlephobia/min/@xendora/react-timer?style=for-the-badge) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/@xendora/react-timer?style=for-the-badge) ![Basic Timer with 100ms interval](docs/images/incremental-counter.gif "Basic Timer with 100ms interval") @@ -20,6 +22,41 @@ npm install @xendora/react-timer yarn add @xendora/react-timer ``` +### Usage +```js +import ReactTimer from "@xendora/react-timer"; + +// Incremental counter + t === 100} + onTick={t => t + 1} +> + {time => {time}} + + +// Decremetal counter + t === 0} + onTick={t => t - 1} +> + {time => {time}} + + +// Infinite counter + false} + onTick={t => t + 1} +> + {time => {time}} + +``` + ## Props | Name | Type | Description | | ------------- | ------------- | ------------- | @@ -33,4 +70,4 @@ yarn add @xendora/react-timer ## License -MIT © [xendora](https://github.com/xendora) +MIT © [xendora](https://github.com/xendora) \ No newline at end of file