@levita-js/react 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Jérôme André
+
+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/dist/index.cjs

@@ -0,0 +1,85 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+let levita_js = require("levita-js");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/index.tsx
+/**
+* React wrapper for the Levita 3D tilt effect.
+*
+* Accepts all `LevitaOptions` as props alongside standard `<div>` attributes.
+* The Levita instance is created on mount and destroyed on unmount.
+* Changing any tilt prop recreates the instance.
+*
+* @example
+* ```tsx
+* import { Tilt } from '@levita-js/react';
+* import 'levita-js/style.css';
+*
+* <Tilt glare shadow max={20}>
+*   <h1>Hello</h1>
+* </Tilt>
+* ```
+*/
+const Tilt = (0, react.forwardRef)(({ max, perspective, scale, speed, easing, reverse, axis, reset, glare, maxGlare, shadow, gyroscope, disabled, eventsEl, children, ...rest }, ref) => {
+	const elRef = (0, react.useRef)(null);
+	const instanceRef = (0, react.useRef)(null);
+	(0, react.useImperativeHandle)(ref, () => ({
+		get element() {
+			return elRef.current;
+		},
+		get instance() {
+			return instanceRef.current;
+		},
+		requestPermission: async () => {
+			return await instanceRef.current?.requestPermission() ?? false;
+		}
+	}));
+	(0, react.useEffect)(() => {
+		if (!elRef.current) return;
+		const options = (0, levita_js.buildOptions)({
+			max,
+			perspective,
+			scale,
+			speed,
+			easing,
+			reverse,
+			axis,
+			reset,
+			glare,
+			maxGlare,
+			shadow,
+			gyroscope,
+			disabled,
+			eventsEl
+		});
+		instanceRef.current = new levita_js.Levita(elRef.current, options);
+		return () => {
+			instanceRef.current?.destroy();
+			instanceRef.current = null;
+		};
+	}, [
+		max,
+		perspective,
+		scale,
+		speed,
+		easing,
+		reverse,
+		axis,
+		reset,
+		glare,
+		maxGlare,
+		shadow,
+		gyroscope,
+		disabled,
+		eventsEl
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: elRef,
+		...rest,
+		children
+	});
+});
+
+//#endregion
+exports.Tilt = Tilt;

package/dist/index.d.cts

@@ -0,0 +1,39 @@
+import * as react from "react";
+import { HTMLAttributes, ReactNode } from "react";
+import { Levita, LevitaOptions } from "levita-js";
+
+//#region src/index.d.ts
+/** Props accepted by the `<Tilt>` component. */
+interface TiltProps extends Partial<LevitaOptions>, Omit<HTMLAttributes<HTMLDivElement>, "onAnimationEnd"> {
+  children?: ReactNode;
+}
+/** Imperative handle exposed via `ref` on the `<Tilt>` component. */
+interface TiltRef {
+  /** The underlying DOM element. */
+  element: HTMLDivElement | null;
+  /** The Levita instance driving the tilt effect. */
+  instance: Levita | null;
+  /** Request accelerometer permission (must be called from a user gesture on iOS). */
+  requestPermission: () => Promise<boolean>;
+}
+/**
+ * React wrapper for the Levita 3D tilt effect.
+ *
+ * Accepts all `LevitaOptions` as props alongside standard `<div>` attributes.
+ * The Levita instance is created on mount and destroyed on unmount.
+ * Changing any tilt prop recreates the instance.
+ *
+ * @example
+ * ```tsx
+ * import { Tilt } from '@levita-js/react';
+ * import 'levita-js/style.css';
+ *
+ * <Tilt glare shadow max={20}>
+ *   <h1>Hello</h1>
+ * </Tilt>
+ * ```
+ */
+declare const Tilt: react.ForwardRefExoticComponent<TiltProps & react.RefAttributes<TiltRef>>;
+//#endregion
+export { Tilt, TiltProps, TiltRef };
+//# sourceMappingURL=index.d.cts.map

package/dist/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","names":[],"sources":["../src/index.tsx"],"mappings":";;;;;;UAYiB,SAAA,SACR,OAAA,CAAQ,aAAA,GACf,IAAA,CAAK,cAAA,CAAe,cAAA;EACrB,QAAA,GAAW,SAAA;AAAA;;UAIK,OAAA;EALK;EAOrB,OAAA,EAAS,cAAA;EANE;EAQX,QAAA,EAAU,MAAA;EATT;EAWD,iBAAA,QAAyB,OAAA;AAAA;;;;;;;;;;AAN1B;;;;;;;;cA0Ba,IAAA,EAAI,KAAA,CAAA,yBAAA,CAAA,SAAA,GAAA,KAAA,CAAA,aAAA,CAAA,OAAA"}

package/dist/index.d.mts

@@ -0,0 +1,39 @@
+import { Levita, LevitaOptions } from "levita-js";
+import * as react from "react";
+import { HTMLAttributes, ReactNode } from "react";
+
+//#region src/index.d.ts
+/** Props accepted by the `<Tilt>` component. */
+interface TiltProps extends Partial<LevitaOptions>, Omit<HTMLAttributes<HTMLDivElement>, "onAnimationEnd"> {
+  children?: ReactNode;
+}
+/** Imperative handle exposed via `ref` on the `<Tilt>` component. */
+interface TiltRef {
+  /** The underlying DOM element. */
+  element: HTMLDivElement | null;
+  /** The Levita instance driving the tilt effect. */
+  instance: Levita | null;
+  /** Request accelerometer permission (must be called from a user gesture on iOS). */
+  requestPermission: () => Promise<boolean>;
+}
+/**
+ * React wrapper for the Levita 3D tilt effect.
+ *
+ * Accepts all `LevitaOptions` as props alongside standard `<div>` attributes.
+ * The Levita instance is created on mount and destroyed on unmount.
+ * Changing any tilt prop recreates the instance.
+ *
+ * @example
+ * ```tsx
+ * import { Tilt } from '@levita-js/react';
+ * import 'levita-js/style.css';
+ *
+ * <Tilt glare shadow max={20}>
+ *   <h1>Hello</h1>
+ * </Tilt>
+ * ```
+ */
+declare const Tilt: react.ForwardRefExoticComponent<TiltProps & react.RefAttributes<TiltRef>>;
+//#endregion
+export { Tilt, TiltProps, TiltRef };
+//# sourceMappingURL=index.d.mts.map

package/dist/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","names":[],"sources":["../src/index.tsx"],"mappings":";;;;;;UAYiB,SAAA,SACR,OAAA,CAAQ,aAAA,GACf,IAAA,CAAK,cAAA,CAAe,cAAA;EACrB,QAAA,GAAW,SAAA;AAAA;;UAIK,OAAA;EALK;EAOrB,OAAA,EAAS,cAAA;EANE;EAQX,QAAA,EAAU,MAAA;EATT;EAWD,iBAAA,QAAyB,OAAA;AAAA;;;;;;;;;;AAN1B;;;;;;;;cA0Ba,IAAA,EAAI,KAAA,CAAA,yBAAA,CAAA,SAAA,GAAA,KAAA,CAAA,aAAA,CAAA,OAAA"}

package/dist/index.mjs

@@ -0,0 +1,85 @@
+import { Levita, buildOptions } from "levita-js";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/index.tsx
+/**
+* React wrapper for the Levita 3D tilt effect.
+*
+* Accepts all `LevitaOptions` as props alongside standard `<div>` attributes.
+* The Levita instance is created on mount and destroyed on unmount.
+* Changing any tilt prop recreates the instance.
+*
+* @example
+* ```tsx
+* import { Tilt } from '@levita-js/react';
+* import 'levita-js/style.css';
+*
+* <Tilt glare shadow max={20}>
+*   <h1>Hello</h1>
+* </Tilt>
+* ```
+*/
+const Tilt = forwardRef(({ max, perspective, scale, speed, easing, reverse, axis, reset, glare, maxGlare, shadow, gyroscope, disabled, eventsEl, children, ...rest }, ref) => {
+	const elRef = useRef(null);
+	const instanceRef = useRef(null);
+	useImperativeHandle(ref, () => ({
+		get element() {
+			return elRef.current;
+		},
+		get instance() {
+			return instanceRef.current;
+		},
+		requestPermission: async () => {
+			return await instanceRef.current?.requestPermission() ?? false;
+		}
+	}));
+	useEffect(() => {
+		if (!elRef.current) return;
+		const options = buildOptions({
+			max,
+			perspective,
+			scale,
+			speed,
+			easing,
+			reverse,
+			axis,
+			reset,
+			glare,
+			maxGlare,
+			shadow,
+			gyroscope,
+			disabled,
+			eventsEl
+		});
+		instanceRef.current = new Levita(elRef.current, options);
+		return () => {
+			instanceRef.current?.destroy();
+			instanceRef.current = null;
+		};
+	}, [
+		max,
+		perspective,
+		scale,
+		speed,
+		easing,
+		reverse,
+		axis,
+		reset,
+		glare,
+		maxGlare,
+		shadow,
+		gyroscope,
+		disabled,
+		eventsEl
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: elRef,
+		...rest,
+		children
+	});
+});
+
+//#endregion
+export { Tilt };
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../src/index.tsx"],"sourcesContent":["import type { LevitaOptions } from \"levita-js\";\nimport { buildOptions, Levita } from \"levita-js\";\nimport {\n\tforwardRef,\n\ttype HTMLAttributes,\n\ttype ReactNode,\n\tuseEffect,\n\tuseImperativeHandle,\n\tuseRef,\n} from \"react\";\n\n/** Props accepted by the `<Tilt>` component. */\nexport interface TiltProps\n\textends Partial<LevitaOptions>,\n\t\tOmit<HTMLAttributes<HTMLDivElement>, \"onAnimationEnd\"> {\n\tchildren?: ReactNode;\n}\n\n/** Imperative handle exposed via `ref` on the `<Tilt>` component. */\nexport interface TiltRef {\n\t/** The underlying DOM element. */\n\telement: HTMLDivElement | null;\n\t/** The Levita instance driving the tilt effect. */\n\tinstance: Levita | null;\n\t/** Request accelerometer permission (must be called from a user gesture on iOS). */\n\trequestPermission: () => Promise<boolean>;\n}\n\n/**\n * React wrapper for the Levita 3D tilt effect.\n *\n * Accepts all `LevitaOptions` as props alongside standard `<div>` attributes.\n * The Levita instance is created on mount and destroyed on unmount.\n * Changing any tilt prop recreates the instance.\n *\n * @example\n * ```tsx\n * import { Tilt } from '@levita-js/react';\n * import 'levita-js/style.css';\n *\n * <Tilt glare shadow max={20}>\n *   <h1>Hello</h1>\n * </Tilt>\n * ```\n */\nexport const Tilt = forwardRef<TiltRef, TiltProps>(\n\t(\n\t\t{\n\t\t\tmax,\n\t\t\tperspective,\n\t\t\tscale,\n\t\t\tspeed,\n\t\t\teasing,\n\t\t\treverse,\n\t\t\taxis,\n\t\t\treset,\n\t\t\tglare,\n\t\t\tmaxGlare,\n\t\t\tshadow,\n\t\t\tgyroscope,\n\t\t\tdisabled,\n\t\t\teventsEl,\n\t\t\tchildren,\n\t\t\t...rest\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst elRef = useRef<HTMLDivElement>(null);\n\t\tconst instanceRef = useRef<Levita | null>(null);\n\n\t\tuseImperativeHandle(ref, () => ({\n\t\t\tget element() {\n\t\t\t\treturn elRef.current;\n\t\t\t},\n\t\t\tget instance() {\n\t\t\t\treturn instanceRef.current;\n\t\t\t},\n\t\t\trequestPermission: async () => {\n\t\t\t\treturn (await instanceRef.current?.requestPermission()) ?? false;\n\t\t\t},\n\t\t}));\n\n\t\tuseEffect(() => {\n\t\t\tif (!elRef.current) return;\n\n\t\t\tconst options = buildOptions({\n\t\t\t\tmax,\n\t\t\t\tperspective,\n\t\t\t\tscale,\n\t\t\t\tspeed,\n\t\t\t\teasing,\n\t\t\t\treverse,\n\t\t\t\taxis,\n\t\t\t\treset,\n\t\t\t\tglare,\n\t\t\t\tmaxGlare,\n\t\t\t\tshadow,\n\t\t\t\tgyroscope,\n\t\t\t\tdisabled,\n\t\t\t\teventsEl,\n\t\t\t});\n\n\t\t\tinstanceRef.current = new Levita(elRef.current, options);\n\n\t\t\treturn () => {\n\t\t\t\tinstanceRef.current?.destroy();\n\t\t\t\tinstanceRef.current = null;\n\t\t\t};\n\t\t}, [\n\t\t\tmax,\n\t\t\tperspective,\n\t\t\tscale,\n\t\t\tspeed,\n\t\t\teasing,\n\t\t\treverse,\n\t\t\taxis,\n\t\t\treset,\n\t\t\tglare,\n\t\t\tmaxGlare,\n\t\t\tshadow,\n\t\t\tgyroscope,\n\t\t\tdisabled,\n\t\t\teventsEl,\n\t\t]);\n\t\treturn (\n\t\t\t<div ref={elRef} {...rest}>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t);\n\t},\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA6CA,MAAa,OAAO,YAElB,EACC,KACA,aACA,OACA,OACA,QACA,SACA,MACA,OACA,OACA,UACA,QACA,WACA,UACA,UACA,UACA,GAAG,QAEJ,QACI;CACJ,MAAM,QAAQ,OAAuB,KAAK;CAC1C,MAAM,cAAc,OAAsB,KAAK;AAE/C,qBAAoB,YAAY;EAC/B,IAAI,UAAU;AACb,UAAO,MAAM;;EAEd,IAAI,WAAW;AACd,UAAO,YAAY;;EAEpB,mBAAmB,YAAY;AAC9B,UAAQ,MAAM,YAAY,SAAS,mBAAmB,IAAK;;EAE5D,EAAE;AAEH,iBAAgB;AACf,MAAI,CAAC,MAAM,QAAS;EAEpB,MAAM,UAAU,aAAa;GAC5B;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA,CAAC;AAEF,cAAY,UAAU,IAAI,OAAO,MAAM,SAAS,QAAQ;AAExD,eAAa;AACZ,eAAY,SAAS,SAAS;AAC9B,eAAY,UAAU;;IAErB;EACF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,CAAC;AACF,QACC,oBAAC;EAAI,KAAK;EAAO,GAAI;EACnB;GACI;EAGR"}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@levita-js/react",
+  "version": "0.1.1",
+  "description": "React wrapper for Levita 3D tilt & parallax",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "levita-js": "0.1.1"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "tsdown": "^0.20.3"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jeromearsene/levita.git",
+    "directory": "packages/react"
+  },
+  "homepage": "https://github.com/jeromearsene/levita#readme",
+  "scripts": {
+    "build": "tsdown"
+  }
+}