upgrade packages and lint rules

Author: mohsinulhaq

.size-snapshot.json

@@ -2,17 +2,17 @@
   "dist/index.js": {
     "bundled": 7471,
     "minified": 7471,
-    "gzipped": 2219
+    "gzipped": 2246
   },
   "lib/cjs/index.js": {
     "bundled": 14096,
     "minified": 7791,
-    "gzipped": 2148
+    "gzipped": 2149
   },
   "lib/esm/index.js": {
     "bundled": 14044,
     "minified": 7758,
-    "gzipped": 2144,
+    "gzipped": 2145,
     "treeshaked": {
       "rollup": {
         "code": 7197,

README.md

@@ -30,50 +30,54 @@ or
 
 ```jsx
 import React from 'react';
-import { render } from 'react-dom';
+import {render} from 'react-dom';
 import TooltipTrigger from 'react-popper-tooltip';
 
+const Tooltip = ({
+  getTooltipProps,
+  getArrowProps,
+  tooltipRef,
+  arrowRef,
+  placement
+}) => (
+  <div
+    {...getTooltipProps({
+      ref: tooltipRef,
+      className: 'tooltip-container'
+      /* your props here */
+    })}
+  >
+    <div
+      {...getArrowProps({
+        ref: arrowRef,
+        'data-placement': placement,
+        className: 'tooltip-arrow'
+        /* your props here */
+      })}
+    />
+    Hello, World!
+  </div>
+);
+
+const Trigger = ({getTriggerProps, triggerRef}) => (
+  <span
+    {...getTriggerProps({
+      ref: triggerRef,
+      className: 'trigger'
+      /* your props here */
+    })}
+  >
+    Click Me!
+  </span>
+);
+
 render(
   <TooltipTrigger
     placement="right"
     trigger="click"
-    tooltip={({
-      getTooltipProps,
-      getArrowProps,
-      tooltipRef,
-      arrowRef,
-      placement
-    }) => (
-      <div
-        {...getTooltipProps({
-          ref: tooltipRef,
-          className: 'tooltip-container'
-          /* your props here */
-        })}
-      >
-        <div
-          {...getArrowProps({
-            ref: arrowRef,
-            'data-placement': placement,
-            className: 'tooltip-arrow'
-            /* your props here */
-          })}
-        />
-        Hello, World!
-      </div>
-    )}
+    tooltip={Tooltip}
   >
-    {({ getTriggerProps, triggerRef }) => (
-      <span
-        {...getTriggerProps({
-          ref: triggerRef,
-          className: 'trigger'
-          /* your props here */
-        })}
-      >
-        Click Me!
-      </span>
-    )}
+    {Trigger}
   </TooltipTrigger>,
   document.getElementById('root')
 );
@@ -94,7 +98,7 @@ import React from 'react';
 import TooltipTrigger from 'react-popper-tooltip';
 import 'react-popper-tooltip/dist/styles.css';
 
-const Tooltip = ({ tooltip, children, hideArrow ...props }) => (
+const Tooltip = ({tooltip, children, hideArrow ...props}) => (
   <TooltipTrigger
     {...props}
     tooltip={({
@@ -121,7 +125,7 @@ const Tooltip = ({ tooltip, children, hideArrow ...props }) => (
       </div>
     )}
   >
-    {({ getTriggerProps, triggerRef }) => (
+    {({getTriggerProps, triggerRef}) => (
       <span
         {...getTriggerProps({
           ref: triggerRef,
@@ -305,7 +309,7 @@ const tooltip = (
 These functions are used to apply props to the elements that you render. 
 It's advisable to pass all your props to that function rather than applying them on the element 
 yourself to avoid your props being overridden (or overriding the props returned). For example
-`<button {...getTriggerProps({ onClick: event => console.log(event))}>Click me</button>`
+`<button {...getTriggerProps({onClick: event => console.log(event))}>Click me</button>`
 
 ### children function
 

babel.config.js

@@ -10,7 +10,12 @@ module.exports = {
     '@babel/react'
   ],
   plugins: [
-    ['@babel/proposal-class-properties', { loose: true }],
-    ['transform-react-remove-prop-types', { removeImport: true }]
-  ]
+    ['@babel/proposal-class-properties', {loose: true}],
+    ['transform-react-remove-prop-types', {removeImport: true}]
+  ],
+  env: {
+    test: {
+      presets: ['@babel/env']
+    }
+  }
 };

docs/examples/BasicTooltipTrigger.js

@@ -1,48 +1,46 @@
-import React, { memo } from 'react';
+import React, {memo} from 'react';
 import TooltipTrigger from '../../src';
 import '../../src/styles.css';
 
-const BasicTooltipTrigger = memo(
-  ({ tooltip, children, hideArrow, ...props }) => (
-    <TooltipTrigger
-      {...props}
-      tooltip={({
-        getTooltipProps,
-        getArrowProps,
-        tooltipRef,
-        arrowRef,
-        placement
-      }) => (
-        <span
-          {...getTooltipProps({
-            ref: tooltipRef,
-            className: 'tooltip-container'
-          })}
-        >
-          {!hideArrow && (
-            <span
-              {...getArrowProps({
-                ref: arrowRef,
-                'data-placement': placement,
-                className: 'tooltip-arrow'
-              })}
-            />
-          )}
-          {tooltip}
-        </span>
-      )}
-    >
-      {({ getTriggerProps, triggerRef }) => (
-        <span
-          {...getTriggerProps({
-            ref: triggerRef
-          })}
-        >
-          {children}
-        </span>
-      )}
-    </TooltipTrigger>
-  )
-);
+const BasicTooltipTrigger = memo(({tooltip, children, hideArrow, ...props}) => (
+  <TooltipTrigger
+    {...props}
+    tooltip={({
+      getTooltipProps,
+      getArrowProps,
+      tooltipRef,
+      arrowRef,
+      placement
+    }) => (
+      <span
+        {...getTooltipProps({
+          ref: tooltipRef,
+          className: 'tooltip-container'
+        })}
+      >
+        {!hideArrow && (
+          <span
+            {...getArrowProps({
+              ref: arrowRef,
+              'data-placement': placement,
+              className: 'tooltip-arrow'
+            })}
+          />
+        )}
+        {tooltip}
+      </span>
+    )}
+  >
+    {({getTriggerProps, triggerRef}) => (
+      <span
+        {...getTriggerProps({
+          ref: triggerRef
+        })}
+      >
+        {children}
+      </span>
+    )}
+  </TooltipTrigger>
+));
 
 export default BasicTooltipTrigger;

docs/examples/EscapeToClose.js

@@ -7,7 +7,7 @@ export default class EscapeToClose extends React.Component {
   componentWillUnmount() {
     document.removeEventListener('keydown', this._handleKeyDown);
   }
-  _handleKeyDown = ({ key }) => {
+  _handleKeyDown = ({key}) => {
     if (key === 'Escape') {
       this.props.closeTooltip();
     }

docs/examples/utils.js

@@ -5,9 +5,9 @@ export class StateContainer extends React.Component {
     on: false
   };
 
-  set = on => this.setState({ on });
+  set = on => this.setState({on});
 
-  toggle = () => this.setState(prevState => ({ on: !prevState.on }));
+  toggle = () => this.setState(prevState => ({on: !prevState.on}));
 
   render() {
     return this.props.children({

rollup.config.js

@@ -1,8 +1,8 @@
 import babel from 'rollup-plugin-babel';
 import resolve from 'rollup-plugin-node-resolve';
 import commonjs from 'rollup-plugin-commonjs';
-import { terser } from 'rollup-plugin-terser';
-import { sizeSnapshot } from 'rollup-plugin-size-snapshot';
+import {terser} from 'rollup-plugin-terser';
+import {sizeSnapshot} from 'rollup-plugin-size-snapshot';
 import pkg from './package.json';
 
 const input = 'src/index.js';
@@ -13,10 +13,10 @@ const globals = {
   'react-popper': 'ReactPopper'
 };
 const external = id => !id.startsWith('.') && !id.startsWith('/');
-const getBabelOptions = ({ useESModules = true } = {}) => ({
+const getBabelOptions = ({useESModules = true} = {}) => ({
   exclude: 'node_modules/**',
   runtimeHelpers: true,
-  plugins: [['@babel/plugin-transform-runtime', { useESModules }]]
+  plugins: [['@babel/plugin-transform-runtime', {useESModules}]]
 });
 
 export default [
@@ -51,7 +51,7 @@ export default [
       interop: false
     },
     external,
-    plugins: [babel(getBabelOptions({ useESModules: false })), sizeSnapshot()]
+    plugins: [babel(getBabelOptions({useESModules: false})), sizeSnapshot()]
   },
   {
     input,

src/Tooltip.js

@@ -1,9 +1,9 @@
 /* eslint-disable react/no-find-dom-node */
-import React, { Component } from 'react';
-import { findDOMNode } from 'react-dom';
+import React, {Component} from 'react';
+import {findDOMNode} from 'react-dom';
 import T from 'prop-types';
-import { TooltipContext } from './utils';
-import { callAll } from './utils';
+import {TooltipContext} from './utils';
+import {callAll} from './utils';
 
 const MUTATION_OBSERVER_CONFIG = {
   childList: true,
@@ -75,7 +75,7 @@ export default class Tooltip extends Component {
     document.removeEventListener('contextmenu', this._handleOutsideRightClick);
 
   componentDidMount() {
-    const { trigger } = this.props;
+    const {trigger} = this.props;
     const observer = (this.observer = new MutationObserver(() => {
       this.props.scheduleUpdate();
     }));
@@ -95,7 +95,7 @@ export default class Tooltip extends Component {
   }
 
   componentWillUnmount() {
-    const { trigger } = this.props;
+    const {trigger} = this.props;
     this.observer.disconnect();
 
     if (trigger === 'click' || trigger === 'right-click') {
@@ -123,15 +123,15 @@ export default class Tooltip extends Component {
 
   getArrowProps = (props = {}) => ({
     ...props,
-    style: { ...props.style, ...this.props.arrowProps.style }
+    style: {...props.style, ...this.props.arrowProps.style}
   });
 
   getTooltipProps = (props = {}) => {
     const isHoverTriggered = this.props.trigger === 'hover';
 
     return {
       ...props,
-      style: { ...props.style, ...this.props.style },
+      style: {...props.style, ...this.props.style},
       onMouseEnter: callAll(
         isHoverTriggered && this.props.clearScheduled,
         props.onMouseEnter
@@ -144,7 +144,7 @@ export default class Tooltip extends Component {
   };
 
   render() {
-    const { arrowProps, placement, tooltip, innerRef } = this.props;
+    const {arrowProps, placement, tooltip, innerRef} = this.props;
 
     return (
       <TooltipContext.Provider