Refactor to be hook based

README.md

@@ -41,7 +41,34 @@ export default class App extends Component {
 }
 ```
 
-Note: You should replace the original `div` you would like to make scrollable with the `ScrollingComponent`. 
+Note: You should replace the original `div` you would like to make scrollable with the `ScrollingComponent`.
+
+### useDndScrolling
+```js
+import React, { Component, useRef } from 'react';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import { useDndScrolling } from 'react-dnd-scrolling';
+import DragItem from './DragItem';
+import './App.css';
+
+const ITEMS = [1,2,3,4,5,6,7,8,9,10];
+
+export default function App() {
+  const ref = useRef();
+  useDndScrolling(ref);
+
+  return (
+    <DndProvider backend={HTML5Backend}>
+      <div ref={ref} className="App">
+        {ITEMS.map(n => (
+          <DragItem key={n} label={`Item ${n}`} />
+        ))}
+      </div>
+    </DndProvider>
+  );
+}
+```
 
 ### Easing Example
 
@@ -92,7 +119,7 @@ export default App(props) {
   );
 }
 ```
-Note: You should replace the original `div` you would like to make scrollable with the `ScrollingComponent`. 
+Note: You should replace the original `div` you would like to make scrollable with the `ScrollingComponent`.
 
 ### Virtualized Example
 

package.json

@@ -43,19 +43,20 @@
   ],
   "license": "MIT",
   "dependencies": {
+    "defaults": "^1.0.4",
     "hoist-non-react-statics": "3.x",
     "lodash.throttle": "^4.1.1",
     "prop-types": "15.x",
     "raf": "^3.4.1"
   },
   "devDependencies": {
-    "@node-loader/babel": "^2.0.1",
     "@babel/cli": "^7.17.6",
     "@babel/core": "^7.17.8",
     "@babel/eslint-parser": "^7.17.0",
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
     "@babel/register": "^7.17.7",
+    "@node-loader/babel": "^2.0.1",
     "chai": "^4.3.6",
     "eslint": "^8.12.0",
     "eslint-config-airbnb": "^19.0.4",