From 86f15307cf2527084570d6a280ff1c7b393f25b4 Mon Sep 17 00:00:00 2001
From: bySabi Files <bysabi.files@gmail.com>
Date: Mon, 18 Mar 2019 11:47:49 +0100
Subject: [PATCH] fix some README typo

---
 example/pages/mouse.js | 55 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 example/pages/mouse.js

diff --git a/example/pages/mouse.js b/example/pages/mouse.js
new file mode 100644
index 00000000..69cbce44
--- /dev/null
+++ b/example/pages/mouse.js
@@ -0,0 +1,55 @@
+import { useState, useEffect } from 'react';
+import { createHook } from 'hookleton';
+
+const useMousePosition = createHook(() => {
+  const [position, setPosition] = useState({ x: null, y: null });
+
+  const handleMouseMove = e => setPosition({ x: e.pageX, y: e.pageY });
+
+  useEffect(() => {
+    window.addEventListener('mousemove', handleMouseMove);
+    return () => window.removeEventListener('mousemove', handleMouseMove);
+  }, []);
+
+  return [position];
+});
+
+const MouseHost = () => (useMousePosition.use(), null);
+
+const Mouse = () => {
+  const [mousePosition] = useMousePosition();
+  return (
+    <div style={{ borderStyle: 'solid' }}>
+      x: {mousePosition.x}, y: {mousePosition.y}
+    </div>
+  );
+};
+
+// put <Mouse /> in a table of 1x12 cells
+const TableMouse = () => (
+  <table>
+    <tbody>
+      <tr>
+        {Array.from({ length: 12 }).map((_, idx) => (
+          <td key={idx}>
+            <Mouse />
+          </td>
+        ))}
+      </tr>
+    </tbody>
+  </table>
+);
+
+// repeat <TableMouse /> 100 times
+export default () => (
+  <>
+    <MouseHost />
+    <ul style={{ listStyle: 'none' }}>
+      {Array.from({ length: 100 }).map((_, idx) => (
+        <li key={idx}>
+          <TableMouse />
+        </li>
+      ))}
+    </ul>
+  </>
+);