Merge pull request #30 from xendora/readme-update-3

chore: updated readme

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
+<ReactTimer
+    interval={100}
+    start={0}
+    end={t => t === 100}
+    onTick={t => t + 1}
+>
+    {time => <span>{time}</span>}
+</ReactTimer>
+
+// Decremetal counter
+<ReactTimer
+    interval={100}
+    start={100}
+    end={t => t === 0}
+    onTick={t => t - 1}
+>
+    {time => <span>{time}</span>}
+</ReactTimer>
+
+// Infinite counter
+<ReactTimer
+    interval={100}
+    start={0}
+    end={t => false}
+    onTick={t => t + 1}
+>
+    {time => <span>{time}</span>}
+</ReactTimer>
+```
+
 ## 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)