adjusts component naming scheme and context shape, fixes webpack configurations and dependency lists

- removes modal key from ModalContext
- renames withModalContext to withModal
- renames useModalContext to useModal
- adds source map to development bundle
- adds inline source map to production bundle
- removes react from production bundle
- removes react and react-dom from dependencies
- adds react and react-dom as devDependencies and peerDependencies

Author: jacobsfletch

README.md

@@ -20,18 +20,14 @@ $ yarn add @trbl/react-scroll-info
   import React from 'react';
   import { ScrollInfoProvider, withScrollInfo, useScrollInfo } from '@trbl/react-scroll-info';
 
-  const MyComponent = withScrollInfo(() => <div>My Component</div>);
-  const MyOtherComponent = () => <div>{useScrollInfo()}</div>;
+  const WithScrollInfo = withScrollInfo(({ scrollInfo }) => <div>{scrollInfo}</div>);
+  const UseScrollInfo = () => <div>{useScrollInfo()}</div>;
 
   const App = () => {
     return (
       <ScrollInfoProvider>
-        <MyComponent>
-          ...
-        </MyComponent>
-        <MyOtherComponent>
-          ...
-        </MyOtherComponent>
+        <WithScrollInfo />
+        <UseScrollInfo />
       </ScrollInfoProvider>
     )
   }

demo/App.demo.js

@@ -1,10 +1,12 @@
 import React from 'react';
 import { ScrollInfoProvider } from '../src'; // swap '../src' for '../dist/build.bundle' to demo production build
-import ScrollInfoDemo from './ScrollInfo.demo';
+// import WithScrollInfo from './WithScrollInfo.demo';
+import UseScrollInfo from './UseScrollInfo.demo';
 
 const AppDemo = () => (
   <ScrollInfoProvider>
-    <ScrollInfoDemo />
+    {/* <WithScrollInfo /> */}
+    <UseScrollInfo />
     <div
       id="spacer"
       style={{ height: '16000px', width: '10000px' }}

demo/UseScrollInfo.demo.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import { useScrollInfo } from '../src'; // swap '../src' for '../dist/build.bundle' to demo production build
+
+const UseScrollInfo = () => {
+  const {
+    x,
+    y,
+    xDifference,
+    yDifference,
+    xDirection,
+    yDirection,
+    xPercentage,
+    yPercentage,
+    totalPercentage,
+    eventsFired,
+  } = useScrollInfo();
+
+  return (
+    <div style={{ position: 'fixed' }}>
+      <code>
+        <pre>
+          {'scrollInfo: {'}
+          <br />
+          &emsp;
+          {`x: ${x},`}
+          <br />
+          &emsp;
+          {`y: ${y},`}
+          <br />
+          &emsp;
+          {`xDifference: ${xDifference},`}
+          <br />
+          &emsp;
+          {`yDifference: ${yDifference},`}
+          <br />
+          &emsp;
+          {`xDirection: ${xDirection},`}
+          <br />
+           &emsp;
+          {`yDirection: ${yDirection},`}
+          <br />
+          &emsp;
+          {`xPercentage: ${xPercentage},`}
+          <br />
+          &emsp;
+          {`yPercentage: ${yPercentage},`}
+          <br />
+          &emsp;
+          {`totalPercentage: ${totalPercentage},`}
+          <br />
+          &emsp;
+          {`eventsFired: ${eventsFired},`}
+          <br />
+          {'}'}
+        </pre>
+      </code>
+    </div>
+  );
+};
+
+export default UseScrollInfo;

demo/ScrollInfo.demo.js demo/WithScrollInfo.demo.jsdemo/ScrollInfo.demo.js renamed to demo/WithScrollInfo.demo.js

@@ -1,11 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {
-  // useScrollInfo,
-  withScrollInfo,
-} from '../src'; // swap '../src' for '../dist/build.bundle' to demo production build
+import { withScrollInfo } from '../src'; // swap '../src' for '../dist/build.bundle' to demo production build
 
-const ScrollInfoDemo = (props) => {
+const WithScrollInfo = (props) => {
   const {
     scrollInfo: {
       x,
@@ -19,7 +16,7 @@ const ScrollInfoDemo = (props) => {
       totalPercentage,
       eventsFired,
     },
-  } = props; // to demo hook, change to `useScrollInfo()` and remove `withScrollInfo` HOC
+  } = props;
 
   return (
     <div style={{ position: 'fixed' }}>
@@ -64,7 +61,7 @@ const ScrollInfoDemo = (props) => {
   );
 };
 
-ScrollInfoDemo.propTypes = {
+WithScrollInfo.propTypes = {
   scrollInfo: PropTypes.shape({
     x: PropTypes.number,
     y: PropTypes.number,
@@ -87,4 +84,4 @@ ScrollInfoDemo.propTypes = {
   }).isRequired,
 };
 
-export default withScrollInfo(ScrollInfoDemo);
+export default withScrollInfo(WithScrollInfo);