v2.2.0: "react-countdown" npm 📦 migration (#67)

* Initial commit for npm pkg migration with legacy countdown support

* Update version number for minor release

* Small refactorings and test updates

* Fix test

* Some more refactorings

* Update keywords

* Update examples

* Fix examples build

Author: ndresx

.travis.yml

@@ -19,5 +19,5 @@ jobs:
     - stage: 'Build'
       name: 'Package'
       script: yarn build
-    - script: cd ./examples && yarn && yarn build
+    - script: rm -rf ./node_modules && cd ./examples && yarn && yarn build
       name: 'Examples'

README.md

@@ -14,11 +14,11 @@ A customizable countdown component for React.
 You can either install the module via `npm` or `yarn`:
 
 ```
-npm install react-countdown-now --save
+npm install react-countdown --save
 ```
 
 ```
-yarn add react-countdown-now
+yarn add react-countdown
 ```
 
 ## Motivation
@@ -34,14 +34,14 @@ A very simple and minimal example of how to set up a countdown which counts down
 ```js
 import React from 'react';
 import ReactDOM from 'react-dom';
-import Countdown from 'react-countdown-now';
+import Countdown from 'react-countdown';
 
 ReactDOM.render(
   <Countdown date={Date.now() + 10000} />,
   document.getElementById('root')
 );
 ```
-[Live Demo](https://codesandbox.io/s/silent-forest-orfbe)
+[Live Demo](https://codesandbox.io/s/cool-fermat-uk0dq)
 
 ### Custom & Conditional Rendering
 In case you want to change the output of the component, or want to signal that the countdown's work is done, you can do this by either using the [`onComplete`](#oncomplete) callback, a
@@ -52,7 +52,7 @@ custom [`renderer`](#renderer), or by specifying a React child within `<Countdow
 ```js
 import React from 'react';
 import ReactDOM from 'react-dom';
-import Countdown from 'react-countdown-now';
+import Countdown from 'react-countdown';
 
 // Random component
 const Completionist = () => <span>You are good to go!</span>;
@@ -66,14 +66,14 @@ ReactDOM.render(
   document.getElementById('root')
 );
 ```
-[Live Demo](https://codesandbox.io/s/sweet-villani-gvrm9)
+[Live Demo](https://codesandbox.io/s/condescending-bartik-kyp2v)
 
 #### Custom Renderer with Completed Condition
 
 ```js
 import React from 'react';
 import ReactDOM from 'react-dom';
-import Countdown from 'react-countdown-now';
+import Countdown from 'react-countdown';
 
 // Random component
 const Completionist = () => <span>You are good to go!</span>;
@@ -97,15 +97,15 @@ ReactDOM.render(
   document.getElementById('root')
 );
 ```
-[Live Demo](https://codesandbox.io/s/infallible-zhukovsky-ydfrf)
+[Live Demo](https://codesandbox.io/s/sad-zhukovsky-hs7hc)
 
 ### Countdown in Milliseconds
 Here is an example with a countdown of 10 seconds that displays the total time difference in milliseconds. In order to display the milliseconds appropriately, the [`intervalDelay`](#intervaldelay) value needs to be lower than `1000`ms and a [`precision`](#precision) of `1` to `3` should be used. Last but not least, a simple [`renderer`](#renderer) callback needs to be set up.
 
 ```js
 import React from 'react';
 import ReactDOM from 'react-dom';
-import Countdown from 'react-countdown-now';
+import Countdown from 'react-countdown';
 
 ReactDOM.render(
   <Countdown
@@ -117,7 +117,7 @@ ReactDOM.render(
   document.getElementById('root')
 );
 ```
-[Live Demo](https://codesandbox.io/s/affectionate-sunset-2677h)
+[Live Demo](https://codesandbox.io/s/elastic-euclid-6vnlw)
 
 ## Props
 
@@ -235,7 +235,7 @@ Returns a `boolean` for whether the countdown has been completed or not.
 This module also exports 3 simple helper functions which can be utilized to build your own countdown custom [`renderer`](#renderer).
 
 ```js
-import Countdown, { zeroPad, calcTimeDelta, formatTimeDelta } from 'react-countdown-now';
+import Countdown, { zeroPad, calcTimeDelta, formatTimeDelta } from 'react-countdown';
 ```
 
 ### `zeroPad(value, [length = 2])`
@@ -298,5 +298,5 @@ The `options` object consists of the following three component props and is used
 
 MIT
 
-[npm]: https://img.shields.io/npm/v/react-countdown-now.svg
-[npm-url]: https://npmjs.com/package/react-countdown-now
+[npm]: https://img.shields.io/npm/v/react-countdown.svg
+[npm-url]: https://npmjs.com/package/react-countdown

examples/package.json

@@ -16,11 +16,11 @@
   ],
   "dependencies": {
     "@types/react": "^16.8.15",
-    "@types/react-dom": "16.8.4",
+    "@types/react-dom": "16.9.4",
     "react": "^16.8.6",
-    "react-countdown-now": "^2.1.2",
+    "react-countdown": "^2.2.0",
     "react-dom": "^16.8.6",
-    "react-scripts": "3.0.0",
-    "typescript": "3.4.5"
+    "react-scripts": "3.3.0",
+    "typescript": "3.7.4"
   }
 }

examples/src/ControlledCountdown.tsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 
-import Countdown from 'react-countdown-now';
+import Countdown from 'react-countdown';
 
 interface ControlledCountdownState {
   readonly date: number;

examples/src/CountdownApi.tsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 
-import Countdown, { CountdownApi } from 'react-countdown-now';
+import Countdown, { CountdownApi } from 'react-countdown';
 
 export default class CountdownApiExample extends Component {
   countdownApi: CountdownApi | null = null;

examples/src/index.tsx

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 
-import Countdown, { CountdownRenderProps } from 'react-countdown-now';
+import Countdown, { CountdownRenderProps } from 'react-countdown';
 import ControlledCountdown from './ControlledCountdown';
 import CountdownApi from './CountdownApi';