Initial Project Setup with Storybook

.gitignore

@@ -0,0 +1,15 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+*.local
+
+#directories
+.vscode
+.storybook

.prettierrc

@@ -0,0 +1,10 @@
+{
+  "singleQuote": true,
+  "printWidth": 200,
+  "proseWrap": "always",
+  "tabWidth": 2,
+  "useTabs": false,
+  "trailingComma": "all",
+  "bracketSpacing": true,
+  "semi": true
+}

dist/cjs/index.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+function App({ bgColor }) {
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            width: '100px',
+            height: '100px',
+            borderRadius: '1000px',
+            backgroundColor: bgColor ? bgColor : 'black',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+        }, children: (0, jsx_runtime_1.jsx)("p", { style: {
+                color: 'white',
+            }, children: "Hello" }) }));
+}
+exports.default = App;

dist/esm/index.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+function App({ bgColor }) {
+    return (_jsx("div", { style: {
+            width: '100px',
+            height: '100px',
+            borderRadius: '1000px',
+            backgroundColor: bgColor ? bgColor : 'black',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+        }, children: _jsx("p", { style: {
+                color: 'white',
+            }, children: "Hello" }) }));
+}
+export default App;

package.json

@@ -0,0 +1,41 @@
+{
+  "name": "react-mouse-follower",
+  "version": "1.0.0",
+  "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",
+  "main": "dist/esm/index.js",
+  "module": "dist/cjs/index.js",
+  "repository": "https://github.com/Adnan-S-Husain/react-mouse-follower.git",
+  "author": "Adnan Husain",
+  "license": "MIT",
+  "private": false,
+  "scripts": {
+    "build": "rm -rf dist/ && prettier --write src/ && yarn build:esm && yarn build:cjs",
+    "build:esm": "tsc",
+    "build:cjs": "tsc --module CommonJS --outDir dist/cjs",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "peerDependencies": {
+    "framer-motion": "^10.12.17",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@storybook/addon-essentials": "7.0.23",
+    "@storybook/addon-interactions": "7.0.23",
+    "@storybook/addon-links": "7.0.23",
+    "@storybook/blocks": "7.0.23",
+    "@storybook/react": "7.0.23",
+    "@storybook/react-vite": "7.0.23",
+    "@storybook/testing-library": "0.0.14-next.2",
+    "@types/react": "^18.0.37",
+    "@types/react-dom": "^18.0.11",
+    "framer-motion": "^10.12.17",
+    "prop-types": "15.8.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "storybook": "7.0.23",
+    "typescript": "^5.0.2",
+    "vite": "^4.3.9"
+  }
+}

src/component/index.ts

@@ -0,0 +1,2 @@
+export * from './Button';
+export * from './mouse_circle';

src/component/mouse_circle.tsx

@@ -0,0 +1,83 @@
+import { MousePropertiesContext } from '../context';
+import { motion } from 'framer-motion';
+import { useContext, useEffect, useState } from 'react';
+import { AnimatePresence } from 'framer-motion';
+import type { MousePosition } from '../types';
+
+export function MouseCircleComponent() {
+  const { options, radius } = useContext(MousePropertiesContext);
+  const [isHovering, setIsHovering] = useState<boolean>(false);
+  const [pos, setPos] = useState<MousePosition>({
+    x: 0,
+    y: 0,
+  });
+
+  useEffect(() => {
+    const handleMouseLeave = () => {
+      setIsHovering(false);
+    };
+
+    const handleMouseEnter = () => {
+      setIsHovering(true);
+    };
+
+    const body = document.querySelector('body');
+    body.addEventListener('mouseleave', handleMouseLeave);
+    body.addEventListener('mouseenter', handleMouseEnter);
+
+    return () => {
+      body.removeEventListener('mouseleave', handleMouseLeave);
+      body.removeEventListener('mouseenter', handleMouseEnter);
+    };
+  }, []);
+
+  useEffect(() => {
+    function mouseMove(event: any) {
+      setPos({
+        x: event.clientX - radius,
+        y: event.clientY - radius,
+      });
+    }
+    window.addEventListener('mousemove', mouseMove);
+    return () => {
+      window.removeEventListener('mousemove', mouseMove);
+    };
+  }, []);
+
+  return (
+    <AnimatePresence mode="wait">
+      {isHovering ? (
+        <motion.div
+          className={'fixed top-0 left-0 pointer-events-none flex justify-center items-center w-min h-min rounded-full'}
+          initial={{
+            x: pos.x,
+            y: pos.y,
+            scale: 0,
+          }}
+          animate={{
+            x: options.customPosition ? options.customPosition.x : pos.x,
+            y: options.customPosition ? options.customPosition.y : pos.y,
+            scale: options.scale || 1,
+            rotate: options.rotate || 0,
+          }}
+          exit={{
+            x: pos.x,
+            y: pos.y,
+            scale: 0,
+          }}
+          style={{
+            backgroundColor: options.backgroundColor || 'black',
+            mixBlendMode: options.mixBlendMode || 'initial',
+            zIndex: options.zIndex || -5,
+          }}
+          transition={{ type: 'tween', duration: 0.4, ease: 'circOut' }}
+          id="mouse-follower"
+        >
+          <div className="w-3 h-3 flex justify-center items-center bg-transparent">
+            <div className="w-full h-full rounded-full flex justify-center items-center overflow-hidden">{options.backgroundElement ? options.backgroundElement : null}</div>
+          </div>
+        </motion.div>
+      ) : null}
+    </AnimatePresence>
+  );
+}

src/context/index.ts

@@ -0,0 +1 @@
+export * from './mouse.context';

src/context/mouse.context.tsx

@@ -0,0 +1,36 @@
+import { useState, createContext, ReactNode, CSSProperties } from 'react';
+import type { MousePosition, Props } from '../types';
+
+interface ContextInterface {
+  options: MouseSettings;
+  setOptions: (options: MouseSettings) => void;
+  radius: number;
+}
+
+export interface MouseSettings {
+  zIndex?: CSSProperties['zIndex'];
+  backgroundColor?: CSSProperties['backgroundColor'];
+  backgroundElement?: JSX.Element;
+  scale?: number;
+  rotate?: number;
+  customPosition?: MousePosition;
+  mixBlendMode?: CSSProperties['mixBlendMode'];
+  invert?: boolean;
+}
+
+export const MousePropertiesContext = createContext<ContextInterface>(null);
+
+export const MousePropertiesProvider = ({ children }: Props) => {
+  const radius = 12 / 2;
+
+  const [options, setOptions] = useState<MouseSettings>({
+    invert: false,
+  });
+
+  const value = {
+    options,
+    setOptions,
+    radius,
+  };
+  return <MousePropertiesContext.Provider value={value}>{children}</MousePropertiesContext.Provider>;
+};

src/index.ts

@@ -0,0 +1,2 @@
+export * from './component';
+export * from './context';

src/types/index.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export interface Props {
+  children: React.ReactNode;
+}
+
+export interface MousePosition {
+  x: number;
+  y: number;
+}

tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "es6",
+    "useDefineForClassFields": true,
+    "lib": ["es5", "es2015", "es2016", "dom", "esnext", "es2020"],
+    "module": "ES2015",
+    "moduleResolution": "nodenext",
+    "noImplicitAny": true,
+    "skipLibCheck": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "strictNullChecks": false,
+
+    "allowSyntheticDefaultImports": true,
+    "rootDir": "src",
+    "outDir": "dist/esm",
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["node_modules", "src/stories"],
+}