feat(HotKeyWrapper): Add new lifeCycle (componentWillReceiveProps)

Also add the demo page taking in consideration the change due to the HMR

.travis.yml

@@ -1,5 +1,9 @@
 language: node_js
 
+cache:
+  directories:
+    - node_modules
+
 notifications:
   email: false
 

demo/src/Container.js

@@ -0,0 +1,23 @@
+import HotkeyWrapper from '../../src';
+import React, { Component } from 'react';
+import {
+  WhyYouShouldUseIt,
+  BuiltWith,
+  Installation,
+  InAction,
+  Props,
+  License,
+} from './sections';
+
+const Container = () => (
+  <div className="container">
+    <WhyYouShouldUseIt />
+    <BuiltWith />
+    <Installation />
+    <InAction />
+    <Props />
+    <License />
+  </div>
+);
+
+export default Container;

demo/src/Demo.css

@@ -1,33 +1,107 @@
+:root {
+  --white: #e0fbfc;
+  --gunMetal: #293241;
+  --lightRed: #ee6c4d;
+  --purpleNavy: #3d5a80;
+  --paleCerulean: #98c1d9;
+}
+
 body {
-  background: linear-gradient(90deg, #63008c, #a700da 70%);
   margin: 0;
   padding: 0;
-  font-family: sans-serif;
+  font-family: 'Nunito', sans-serif;
 }
 
-.main-container {
-  margin: auto;
-  max-width: 800px;
+#demo {
+  background: linear-gradient(
+    to top right,
+    var(--purpleNavy),
+    var(--paleCerulean)
+  );
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  flex-direction: column;
+}
+
+header {
+  color: var(--white);
   text-align: center;
 }
 
-h1 {
-  color: white;
+header > h1 {
+  font-size: 40px;
 }
 
-.container {
-  border-radius: 25px;
-  background: #ffffff;
+header > h2 {
+  font-size: 25px;
 }
 
-.home {
+.container {
+  border-radius: 25px;
+  background: var(--white);
+  color: var(--gunMetal);
   display: flex;
   justify-content: center;
   flex-direction: column;
   align-items: center;
+  margin: 0 30px;
+  width: 600px;
   padding: 1.5rem 2rem;
+  flex: 1;
+  box-shadow: 0 0 80px -4px rgba(0, 20, 40, 0.1);
+}
+
+.container > section {
+  width: 100%;
+}
+
+.container > section > table {
+  font-size: 14px;
+  border-collapse: collapse;
+  line-height: 30px;
+  text-align: left;
+}
+
+.container > section > table > tr > tr {
+  padding: 5px;
+}
+
+.container > section > table > tr > td {
+  padding: 5px;
+}
+
+.container > section > h2 {
+  font-size: 20px;
+  text-align: left;
+}
+
+.container > section > pre {
+  padding: 10px;
+  overflow: auto;
+  overflow-y: hidden;
+  border-radius: 10px;
+  line-height: 20px;
+  box-shadow: 0 0 20px 7px rgba(63, 63, 63, 0.4);
+}
+
+.container > section > pre code {
+  padding: 10px;
+}
+
+footer {
+  text-align: end;
+  width: 100%;
+  margin-right: 20px;
 }
 
-.home > * {
-  margin: 10px;
+@media (max-width: 600px) {
+  .container {
+    width: 100%;
+    border-radius: 0px;
+    margin: 0;
+    padding: 0;
+  }
 }

demo/src/Demo.js

@@ -1,6 +1,9 @@
 import React, { Component } from 'react';
 import { render } from 'react-dom';
-import Menu from './Menu1';
+import Container from './Container';
+import Title from './Title';
+import Footer from './Footer';
+import GithubLink from './GithubLink';
 import './Demo.css';
 
 export default class Demo extends Component {
@@ -12,13 +15,12 @@ export default class Demo extends Component {
 
   render() {
     return (
-      <div className="main-container">
-        <h1>react-hotkey-tooltip</h1>
-        <div className="container">
-          <button onClick={this.toggleMenu}>Toggle</button>
-          {this.state.showMenu && <Menu />}
-        </div>
-      </div>
+      <React.Fragment>
+        <Title />
+        <Container />
+        <Footer />
+        <GithubLink />
+      </React.Fragment>
     );
   }
 }

demo/src/Footer.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+const Footer = () => {
+  return (
+    <footer>
+      <p>
+        Result of <a href="http://www.100daysofcode.com/">#100DaysOfCode</a> -
+        Develop with ❤️
+      </p>
+    </footer>
+  );
+};
+
+export default Footer;

demo/src/GithubLink.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import GithubCorner from 'react-github-corner';
+
+const GithubLink = () => (
+  <GithubCorner
+    href="https://github.com/EmaSuriano/weather-styled-icon"
+    octoColor="#EE6C4D"
+    bannerColor="#e0fbfc"
+    size={80}
+    direction="right"
+  />
+);
+
+export default GithubLink;

demo/src/Title.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import HotkeyWrapper from 'lib';
+
+const Title = () => {
+  return (
+    <header>
+      <HotkeyWrapper
+        hotkey="r+h+t"
+        onHotkeyPressed={() =>
+          window.open('https://www.youtube.com/watch?v=dQw4w9WgXcQ')
+        }
+        tooltipHotkey="h"
+        tooltipProps={{
+          theme: 'light',
+          size: 'big',
+          arrow: true,
+        }}
+      >
+        <h1 ref={c => (this.title = c)} tabIndex="0">
+          React Hotkey Tooltip
+        </h1>
+      </HotkeyWrapper>
+      <h2>A global Hotkey provider with built in tooltip for React</h2>
+    </header>
+  );
+};
+
+export default Title;

demo/src/index.js

@@ -1,5 +1,12 @@
 import React, { Component } from 'react';
-import { render } from 'react-dom';
+import ReactDOM from 'react-dom';
 import Demo from './Demo';
+import WebFont from 'webfontloader';
 
-render(<Demo />, document.querySelector('#demo'));
+WebFont.load({
+  google: {
+    families: ['Nunito:300,400,700', 'sans-serif'],
+  },
+});
+
+ReactDOM.render(<Demo />, document.querySelector('#demo'));

demo/src/sections/BuiltWith.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import HotkeyWrapper from 'lib';
+
+const BuiltWith = () => (
+  <section>
+    <h2>Built with</h2>
+    <p>
+      Why mess up with document.addEventListener or positioning/styling tooltips
+      if there are a lot of open source libraries that can do that for me. This
+      are the chosen ones!
+    </p>
+    <ul>
+      <li>
+        <HotkeyWrapper
+          hotkey="m+t"
+          onHotkeyPressed={() => this.mousetrapLink.click()}
+          tooltipProps={{
+            arrow: true,
+            position: 'top',
+          }}
+          tooltipHotkey="h"
+        >
+          <a
+            href="https://github.com/ccampbell/mousetrap"
+            ref={a => (this.mousetrapLink = a)}
+            target="_blank"
+          >
+            mousetrap
+          </a>
+        </HotkeyWrapper>: to bind and unbind hotkeys globally 🌐
+      </li>
+      <li>
+        <HotkeyWrapper
+          hotkey="r+t"
+          onHotkeyPressed={() => this.reactTippyLink.click()}
+          tooltipHotkey="h"
+        >
+          <a
+            href="https://github.com/tvkhoa/react-tippy"
+            ref={a => (this.reactTippyLink = a)}
+            target="_blank"
+          >
+            react-tippy
+          </a>
+        </HotkeyWrapper>: to display beautiful tooltips 😄
+      </li>
+    </ul>
+  </section>
+);
+
+export default BuiltWith;