added useControlOptions hook

README.md

@@ -132,6 +132,7 @@ All Mouse Options:
 | rotate            | number(in degree) | Rotates the follower. Default value - 0                                                                               |
 | backgroundColor   | string            | Sets the background color of the follower. Default value - "black"                                                    |
 | followSpeed       | number            | Changes the speed of following animation. Default value - 1                                                           |
+| visible           | boolean           | Sets the visibility of the follower                                                                                   |
 | backgroundElement | JSX.Element       | Takes a react component and renders it in the follower circle center                                                  |
 | customPosition    | RefObject         | Takes in a ref (from useRef react hook) and places the follower to center of the referenced div when the mouse enters |
 | customLocation    | object            | Takes x and y co-ordinates and places the follower there                                                              |
@@ -145,6 +146,38 @@ All Mouse Options:
 
 <br>
 
+**useControlOptions** provides more functionality to utilise the mouse follower capabilities.
+
+```jsx
+import { useControlOptions } from 'react-mouse-follower';
+
+export default function MyComponent() {
+  const { removePreviousLayer, topLayer } = useControlOptions();
+  useEffect(() => {
+    console.log(removePreviousLayer());
+    console.log(topLayer);
+  }, []);
+  return (
+    <div>
+      <h1>Text</h1>
+      {/* Rest of your component */}
+    </div>
+  );
+}
+```
+
+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                  |
+
+<br>
+
 Nested UpdateFollower with custom position sample:
 
 ```jsx

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-mouse-follower",
-  "version": "1.1.1",
+  "version": "1.1.4",
   "description": "React mouse follower is a package based on react and framer motion. It provides components to add and customise cool mouse follower to your cursor",
   "repository": {
     "type": "git",

src/component/follower_init.tsx

@@ -42,5 +42,9 @@ export function FollowerInitialiserComponent({ options }: { options: MouseSettin
     };
   }, [options?.radius]);
 
-  return <AnimatePresence mode="wait">{isHovering ? <FollowerDiv options={options} pos={pos} /> : null}</AnimatePresence>;
+  return (
+    <AnimatePresence mode="wait">
+      {isHovering && options.visible !== false ? <FollowerDiv options={options} pos={pos} /> : null}
+    </AnimatePresence>
+  );
 }

src/context/mouse.context.tsx

@@ -1,34 +1,40 @@
-import { createContext, useRef } from 'react';
+import { ReactNode, createContext, useRef } from 'react';
 import { FollowerInitialiserComponent } from '../component/follower_init.js';
-import { useStack } from '../util/stack_hook.js';
+import { useStack } from '../hook/stack.hook.js';
 
-import type { Props, MouseSettings } from '../types/index.js';
+import type { MouseSettings } from '../types/index.js';
 
 interface ContextInterface {
   addLayer: (options: MouseSettings) => void;
-  removeLayer: () => void;
+  removeLayer: () => MouseSettings | undefined;
+  peekStack: () => MouseSettings | undefined;
+  clearStack: () => void;
+  logStack: () => void;
 }
 
 export const MousePropertiesContext = createContext<ContextInterface>(null);
 
-export const FollowerProvider = ({ children }: Props) => {
+export const FollowerProvider = ({ visible, children }: { visible?: boolean; children?: ReactNode }) => {
   const layerStack = useStack();
   const addLayer = (layerOptions: MouseSettings) => {
     layerStack.push(layerOptions);
   };
 
   const removeLayer = () => {
-    layerStack.pop();
+    return layerStack.pop();
   };
 
   const value: ContextInterface = {
     addLayer,
     removeLayer,
+    clearStack: layerStack.clear,
+    logStack: layerStack.logStack,
+    peekStack: layerStack.peek,
   };
 
   return (
     <MousePropertiesContext.Provider value={value}>
-      <FollowerInitialiserComponent options={layerStack.peek()} />
+      {visible !== false ? <FollowerInitialiserComponent options={layerStack.peek()} /> : null}
       {children}
     </MousePropertiesContext.Provider>
   );

src/hook/control_options.hook.tsx

@@ -0,0 +1,13 @@
+import { useContext } from 'react';
+import { MousePropertiesContext } from '../context/mouse.context.js';
+
+export function useControlOptions() {
+  const { addLayer, removeLayer, clearStack, logStack, peekStack } = useContext(MousePropertiesContext);
+  return {
+    addOptionLayer: addLayer,
+    removePreviousLayer: removeLayer,
+    clearLayers: clearStack,
+    logLayers: logStack,
+    topLayer: peekStack,
+  };
+}

src/hook/index.ts

@@ -0,0 +1 @@
+export * from './control_options.hook.js';

src/util/stack_hook.ts → src/hook/stack.hook.tsx

@@ -49,23 +49,23 @@ export const useStack = (): {
   };
 
   const clear = (): void => {
-    setStack([{}]);
+    setStack([]);
   };
 
   const size = (): number => {
     return stack.length;
   };
 
   const logStack = (): void => {
-    console.log('logging stack');
+    console.log('logging all layers');
     stack.forEach((item, i) => {
       console.log(i, item);
     });
   };
 
-  useEffect(() => {
-    logStack();
-  }, [stack]);
+  // useEffect(() => {
+  //   logStack();
+  // }, [stack]);
 
   return {
     stack,

src/index.ts

@@ -1,2 +1,3 @@
 export * from './component/index.js';
 export * from './context/index.js';
+export * from './hook/index.js';

src/types/index.ts

@@ -11,6 +11,7 @@ export interface MousePosition {
 
 export interface MouseSettings {
   zIndex?: React.CSSProperties['zIndex'];
+  visible?: boolean;
   scale?: number;
   rotate?: number;
   radius?: number;