react-magic-card 0.0.1

package/dist/MagicCircle/index.d.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+import './main.css';
+type ImageProperty = {
+    src: string;
+    alt: string;
+};
+type AnimationProperty = {
+    scale?: number;
+    opacity?: number;
+    rotateY?: number;
+    rotateX?: number;
+    rotateZ?: number;
+    selectScale?: number;
+    selectOpacity?: number;
+    selectRotateY?: number;
+    selectRotateX?: number;
+    selectRotateZ?: number;
+};
+type TransitionProperty = {
+    duration?: number;
+    type: undefined;
+    ease: number[] | 'linear' | 'easeIn' | 'easeOut' | 'easeInOut' | 'circIn' | 'circOut' | 'circInOut' | 'backIn' | 'backOut' | 'backInOut' | 'anticipate';
+} | {
+    duration?: number;
+    type?: 'spring';
+    bounce?: number;
+    damping?: number;
+    mass?: number;
+    stiffness?: number;
+    velocity?: number;
+    restSpeed?: number;
+    restDelta?: number;
+};
+type MagicCircleProps = {
+    data: ImageProperty[];
+    width: number;
+    height: number;
+    radius: number;
+    controller: number;
+    start: number;
+    dynamic: boolean;
+    wheelDelay: number;
+    animate?: AnimationProperty;
+    initial?: AnimationProperty;
+    transition?: TransitionProperty;
+    className?: string;
+    classImage?: string;
+    classImageUnique?: string;
+};
+export declare const MagicCircle: ({ data, width, height, radius, controller, start, dynamic, wheelDelay, animate, initial, transition, className, classImage, classImageUnique }: MagicCircleProps) => React.JSX.Element;
+export {};

package/dist/MagicCircle/index.js

@@ -0,0 +1,132 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MagicCircle = void 0;
+const react_1 = __importStar(require("react"));
+const framer_motion_1 = require("framer-motion");
+require("./main.css");
+const MagicCircle = ({ data, width, height, radius, controller, start, dynamic, wheelDelay, animate, initial, transition, className, classImage, classImageUnique }) => {
+    const [count, setCount] = (0, react_1.useState)(0);
+    const [hasDelayed, setHasDelayed] = (0, react_1.useState)(true);
+    const [images, setImages] = (0, react_1.useState)(data);
+    const [select, setSelect] = (0, react_1.useState)(start);
+    const ref = (0, react_1.useRef)(null);
+    const shiftRight = (0, react_1.useCallback)(() => {
+        setImages(arr => {
+            const lastElement = arr.pop();
+            arr.unshift(lastElement);
+            setSelect(select == images.length - 1 ? 0 : select + 1);
+            return arr;
+        });
+    }, [images.length, select]);
+    const shiftLeft = (0, react_1.useCallback)(() => {
+        setImages(arr => {
+            const firstElement = arr.shift();
+            arr.push(firstElement);
+            setSelect(select == 0 ? images.length - 1 : select - 1);
+            return arr;
+        });
+    }, [images.length, select]);
+    const centralAngle = ((2 * Math.PI) / images.length) * (180 / Math.PI);
+    const controlRotation = (0, react_1.useCallback)((e) => {
+        const delta = e.deltaY;
+        if (delta > 0) {
+            setHasDelayed(false);
+            for (let i = 0; i < images.length; i++)
+                shiftRight();
+            if (dynamic)
+                return setCount(count - centralAngle);
+        }
+        if (delta < 0) {
+            setHasDelayed(false);
+            for (let i = 0; i < images.length; i++)
+                shiftLeft();
+            if (dynamic)
+                return setCount(count + centralAngle);
+        }
+    }, [dynamic, count, centralAngle, images.length, shiftRight, shiftLeft]);
+    (0, react_1.useEffect)(() => {
+        const range = ref.current;
+        const timeId = setTimeout(() => {
+            setHasDelayed(true);
+        }, wheelDelay);
+        if (!range || !hasDelayed)
+            return;
+        range.addEventListener('wheel', controlRotation, { passive: false });
+        return () => {
+            range.removeEventListener('wheel', controlRotation);
+            clearTimeout(timeId);
+        };
+    }, [count, hasDelayed, controlRotation, wheelDelay]);
+    const enterControll = () => {
+        document.body.style.overflow = 'hidden';
+    };
+    const leaveControll = () => {
+        document.body.style.overflow = 'auto';
+    };
+    (0, react_1.useEffect)(() => {
+        const range = ref.current;
+        if (!range)
+            return;
+        range.addEventListener('mouseover', enterControll);
+        range.addEventListener('mouseout', leaveControll);
+        range.addEventListener('touchmove', leaveControll, { passive: false });
+        return () => {
+            range.removeEventListener('mouseover', enterControll);
+            range.removeEventListener('mouseout', leaveControll);
+            range.removeEventListener('touchmove', leaveControll);
+        };
+    }, []);
+    // angle between images.
+    const angle = parseFloat((2 * Math.PI).toFixed(15)) / data.length;
+    return (react_1.default.createElement(framer_motion_1.m.div, { ref: ref, className: className + ' ' + 'outer', style: {
+            width: radius * 2 + controller + 'px',
+            height: radius * 2 + controller + 'px'
+        }, animate: { rotate: count }, transition: { duration: transition === null || transition === void 0 ? void 0 : transition.duration } },
+        react_1.default.createElement("div", { className: "inner", style: { width: radius * 2 + 'px', height: radius * 2 + 'px' } }, images.map((image, index) => {
+            const hasSelect = images[select] == images[index];
+            return (react_1.default.createElement(framer_motion_1.m.img, { key: index, animate: {
+                    scale: hasSelect ? animate === null || animate === void 0 ? void 0 : animate.selectScale : animate === null || animate === void 0 ? void 0 : animate.scale,
+                    opacity: hasSelect ? animate === null || animate === void 0 ? void 0 : animate.selectOpacity : animate === null || animate === void 0 ? void 0 : animate.opacity,
+                    rotateX: hasSelect ? animate === null || animate === void 0 ? void 0 : animate.selectRotateX : animate === null || animate === void 0 ? void 0 : animate.rotateX,
+                    rotateY: hasSelect ? animate === null || animate === void 0 ? void 0 : animate.selectRotateY : animate === null || animate === void 0 ? void 0 : animate.rotateY,
+                    rotateZ: hasSelect ? animate === null || animate === void 0 ? void 0 : animate.selectRotateZ : animate === null || animate === void 0 ? void 0 : animate.rotateZ,
+                    rotate: -count
+                }, initial: {
+                    scale: hasSelect ? initial === null || initial === void 0 ? void 0 : initial.selectScale : initial === null || initial === void 0 ? void 0 : initial.scale,
+                    opacity: hasSelect ? initial === null || initial === void 0 ? void 0 : initial.selectOpacity : initial === null || initial === void 0 ? void 0 : initial.opacity,
+                    rotateX: hasSelect ? initial === null || initial === void 0 ? void 0 : initial.selectRotateX : initial === null || initial === void 0 ? void 0 : initial.rotateX,
+                    rotateY: hasSelect ? initial === null || initial === void 0 ? void 0 : initial.selectRotateY : initial === null || initial === void 0 ? void 0 : initial.rotateY,
+                    rotateZ: hasSelect ? initial === null || initial === void 0 ? void 0 : initial.selectRotateZ : initial === null || initial === void 0 ? void 0 : initial.rotateZ,
+                    rotate: -count
+                }, transition: transition, onClick: () => setSelect(index), className: classImage + ' ' + classImageUnique + index, src: image.src, alt: image.alt, style: {
+                    width: width + 'px',
+                    height: height + 'px',
+                    left: radius * Math.cos(index * angle) + radius - width / 2 + 'px',
+                    top: radius * Math.sin(index * angle) + radius - height / 2 + 'px'
+                } }));
+        }))));
+};
+exports.MagicCircle = MagicCircle;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+import { MagicCircle } from './MagicCircle';
+export { MagicCircle };

package/dist/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MagicCircle = void 0;
+const MagicCircle_1 = require("./MagicCircle");
+Object.defineProperty(exports, "MagicCircle", { enumerable: true, get: function () { return MagicCircle_1.MagicCircle; } });

package/license

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 S.Watanabe
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "react-magic-card",
+  "version": "0.0.1",
+  "description": "animation",
+  "main": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/su-pull/react-magic-card",
+    "directory": "react-magic-card/src"
+  },
+  "scripts": {
+    "tsc": "./node_modules/.bin/tsc",
+    "test": "test"
+  },
+  "keywords": [
+    "react",
+    "illust",
+    "photograph",
+    "animation"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "framer-motion": "^10.12.16",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.1.3"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.12"
+  }
+}

package/readme.md

@@ -0,0 +1,97 @@
+# react-magic-card
+
+[![Release Status](https://img.shields.io/github/release/su-pull/react-magic-card.svg)](https://github.com/su-pull/react-magic-card/releases/latest)
+[![Minzip Size](https://img.shields.io/bundlephobia/minzip/react-magic-card)](https://bundlephobia.com/package/react-magic-card)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+
+This is the framer motion component, that supports illust and photograph galleries.
+
+## Installation
+
+```sh
+npm install react-magic-card framer-motion
+```
+
+## Usage
+
+```tsx
+import { MagicCircle } from "react-magic-card";
+
+function MyComponent() {
+  const images = [
+    {
+      src: "/1.jpeg",
+      alt: "1image",
+    },
+    {
+      src: "/2.jpeg",
+      alt: "2image",
+    },
+    {
+      src: "/3.jpeg",
+      alt: "3image",
+    },
+  ];
+
+  return (
+    <MagicCircle
+      data={images}
+      width={120}
+      height={120}
+      radius={100}
+      controller={200}
+      start={1}
+      dynamic={true}
+      wheelDelay={100}
+      animate={{
+        scale: 0.8,
+        rotateX: 70,
+        rotateY: 40,
+        rotateZ: -50,
+        selectScale: 1.6,
+        selectRotateX: 40,
+        selectRotateY: 40,
+        selectRotateZ: -10,
+      }}
+      transition={{ duration: 0.2 }}
+    />
+  );
+}
+```
+
+## Properties
+
+- data: An array a images property objects for src and alt.
+- width: The width of single image.
+- height: The height a single image.
+- dynamic: A flag indicating whether dynamic rotation is allow.
+- start: The Index number, start scale position
+- radius: The radius of the circle.
+- controller: The diameter plus the value of the controller is the size of the controller.
+- className: The class name of the component.
+- classImage: The class name of the images.
+- classImageUnique: An index number is assigned to the end of the class name set for this.
+- animate: An object in the animation property.
+- initial: An object in the animation property.
+- transition: An object in the transition property.
+
+## Animation property
+
+- scale
+- opacity
+- rotateX
+- rotateY
+- rotateZ
+- selectScale
+- selectOpacity
+- selectRotateY
+- selectRotateX
+- selectRotateZ
+
+## Transition property
+
+It Inherits framer motion transition properties other than intera.
+
+## License
+
+MIT License