update: documentation

README.md

@@ -45,10 +45,15 @@ You can customise your mouse follower by changing - background color, scale, rad
 follower.
 
 ```jsx
-import { FollowerProvider } from 'react-mouse-follower';
+import { MouseFollower } from 'react-mouse-follower';
 
 function App() {
-  return <FollowerProvider>{/* rest of your components go here */}</FollowerProvider>;
+  return (
+    <div>
+      <MouseFollower />
+      // rest of the code
+    </div>
+  );
 }
 
 export default App;
@@ -168,13 +173,13 @@ export default function MyComponent() {
 
 All functions provided:
 
-| Name                | Description                                 |
-| ------------------- | ------------------------------------------- |
-| addOptionLayer      | pushes new options layer on the top         |
-| removePreviousLayer | removes top most layer                      |
-| clearLayers         | clears all previous layers                  |
-| logLayers           | logs all layers in the stack on the console |
-| topLayer            | returns the top most layer                  |
+| Name                | Description                         |
+| ------------------- | ----------------------------------- |
+| addOptionLayer      | pushes new options layer on the top |
+| removePreviousLayer | removes top most layer              |
+| clearLayers         | clears all previous layers          |
+| log                 | logs all events on the console      |
+| topLayer            | returns the top most layer          |
 
 <br>
 

src/component/follower.tsx

@@ -1,5 +1,5 @@
 import { FollowerInitialiserComponent } from './follower_init.js';
 
-export function Follower() {
+export function MouseFollower() {
   return <FollowerInitialiserComponent />;
 }

src/hook/control_options.hook.tsx

@@ -2,13 +2,14 @@ import useMouseStore from '../store/index.js';
 
 export function useControlOptions() {
   const store = useMouseStore((state) => ({
+    topLayer: state.layers[state.layers.length > 0 ? state.layers.length - 1 : null],
     addOptionLayer: state.pushLayer,
     removePreviousLayer: state.popLayer,
     clearLayers: state.clearLayers,
+    log: state.log,
   }));
 
   return {
-    // logLayers: logStack,
     ...store,
   };
 }

src/store/index.ts

@@ -5,20 +5,27 @@ import { MouseSettings } from '../types/index.js';
 interface useMouseStoreInterface {
   curSettings: MouseSettings;
   layers: MouseSettings[];
+  logging: boolean;
 
   pushLayer: (newLayer: MouseSettings) => void;
   popLayer: () => void;
   clearLayers: () => void;
+  log: () => void;
 }
 
 const log =
   (config: StateCreator<useMouseStoreInterface>) =>
   (set: SetState<useMouseStoreInterface>, get: GetState<useMouseStoreInterface>, api: StoreApi<useMouseStoreInterface>) =>
     config(
       (args) => {
-        console.log('  applying', args);
-        set(args);
-        console.log('  new state', get());
+        const prev = get();
+        if (prev.logging) {
+          console.log('  applying', args);
+          set(args);
+          console.log('  new state', get());
+        } else {
+          set(args);
+        }
       },
       get,
       api,
@@ -28,6 +35,7 @@ const useMouseStore = create<useMouseStoreInterface>(
   log((set) => ({
     curSettings: {},
     layers: [],
+    logging: false,
 
     pushLayer: (newLayer: MouseSettings) =>
       set((state) => {
@@ -48,6 +56,10 @@ const useMouseStore = create<useMouseStoreInterface>(
       set((state) => {
         return { layers: [], curSettings: {} };
       }),
+    log: () =>
+      set((state) => {
+        return { logging: !state.logging };
+      }),
   })),
 );
 

src/stories/FollowerBasic.stories.tsx

@@ -1,16 +1,16 @@
 import React from 'react';
 import type { Meta } from '@storybook/react';
 
-import { Follower, UpdateFollower } from '../index';
+import { MouseFollower, UpdateFollower } from '../index';
 import * as DivStories from './FollowerContainer.stories';
 
 const meta: Meta = {
   title: 'Context/FollowerProvider',
-  component: Follower,
+  component: MouseFollower,
   decorators: [
     (Story) => (
       <>
-        <Follower />
+        <MouseFollower />
         <Story />
       </>
     ),

src/stories/UpdateFollower.stories.tsx

@@ -1,7 +1,7 @@
-import React, { useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import type { Meta } from '@storybook/react';
 
-import { Follower, UpdateFollower } from '../index';
+import { MouseFollower, UpdateFollower, useControlOptions } from '../index';
 import * as DivStories from './FollowerContainer.stories';
 import './css/update_follower.css';
 
@@ -14,7 +14,7 @@ const meta: Meta = {
   decorators: [
     (Story) => (
       <>
-        <Follower />
+        <MouseFollower />
         <Story />
       </>
     ),
@@ -68,8 +68,21 @@ export const CustomPosition: Meta = {
     () => {
       const containerRef = useRef(null);
       const [isHovering, setIsHovering] = useState(false);
+      const { log } = useControlOptions();
+      useEffect(() => {
+        log();
+      }, []);
       return (
-        <div style={{ height: '100vh', width: '100vw', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+        <div
+          style={{
+            height: '100vh',
+            width: '100vw',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            cursor: 'pointer',
+          }}
+        >
           <UpdateFollower
             style={{ padding: '30px' }}
             mouseOptions={{