replaced context with store

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-mouse-follower",
-  "version": "1.1.6",
+  "version": "2.0.1",
   "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",
@@ -25,7 +25,8 @@
     "chromatic": "chromatic --exit-zero-on-changes"
   },
   "dependencies": {
-    "framer-motion": "^10.12.18"
+    "framer-motion": "^10.12.18",
+    "zustand": "^4.4.1"
   },
   "peerDependencies": {
     "react": "^18.2.0",

src/component/follower.tsx

@@ -0,0 +1,7 @@
+import useMouseStore from '../store/index.js';
+import { FollowerInitialiserComponent } from './follower_init.js';
+
+export function Follower() {
+  const { options } = useMouseStore((state) => ({ options: state.curSettings }));
+  return <FollowerInitialiserComponent options={options} />;
+}

src/component/index.ts

@@ -1 +1,2 @@
 export * from './update_follower.js';
+export * from './follower.js';

src/component/update_follower.tsx

@@ -1,6 +1,6 @@
 import { CSSProperties, ReactNode, useContext } from 'react';
-import { MousePropertiesContext } from '../context/mouse.context.js';
 import { MouseSettings } from '../types/index.js';
+import useMouseStore from '../store/index.js';
 
 export function UpdateFollower({
   mouseOptions,
@@ -19,7 +19,7 @@ export function UpdateFollower({
   onClick?: () => void;
   children?: ReactNode;
 }) {
-  const { addLayer, removeLayer } = useContext(MousePropertiesContext);
+  const { addLayer, removeLayer } = useMouseStore((state) => ({ addLayer: state.pushLayer, removeLayer: state.popLayer }));
   function handleMouseEnter() {
     addLayer(mouseOptions);
     if (onMouseEnter) {

src/hook/control_options.hook.tsx

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

src/index.ts

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

src/store/index.ts

@@ -0,0 +1,42 @@
+import { create } from 'zustand';
+import { MouseSettings } from '../types/index.js';
+
+const defaultSettings: MouseSettings = {
+  radius: 12 / 2,
+};
+
+interface useMouseStoreInterface {
+  curSettings: MouseSettings;
+  layers: [MouseSettings];
+
+  pushLayer: (newLayer: MouseSettings) => void;
+  popLayer: () => void;
+  clearLayers: () => void;
+}
+
+const useMouseStore = create<useMouseStoreInterface>((set) => ({
+  curSettings: defaultSettings,
+  layers: [defaultSettings],
+
+  pushLayer: (newLayer: MouseSettings) =>
+    set((state) => {
+      const newCur = { ...state.curSettings, ...newLayer };
+      state.layers.push(newCur);
+      return { layers: state.layers, curSettings: newCur };
+    }),
+  popLayer: () =>
+    set((state) => {
+      if (state.layers.length > 1) {
+        state.layers.pop();
+        return { layers: state.layers, curSettings: state.layers.at(state.layers.length - 1) };
+      } else {
+        return { layers: [defaultSettings], curSettings: defaultSettings };
+      }
+    }),
+  clearLayers: () =>
+    set((state) => {
+      return { layers: [defaultSettings], curSettings: defaultSettings };
+    }),
+}));
+
+export default useMouseStore;

src/stories/FollowerBasic.stories.tsx

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