diff --git a/README.md b/README.md index 94d52c8..6d58c97 100644 --- a/README.md +++ b/README.md @@ -127,7 +127,7 @@ export default function App() { } ``` -### Listen to events +### Listen to Spline Events You can listen to any Spline Event you set in the Events panel of the editor by attaching a listener to the Spline component. @@ -135,7 +135,7 @@ You can listen to any Spline Event you set in the Events panel of the editor by import Spline from '@splinetool/react-spline'; export default function App() { - function onMouseDown(e) { + function onSplineMouseDown(e) { if (e.target.name === 'Cube') { console.log('I have been clicked!'); } @@ -145,7 +145,7 @@ export default function App() {
); @@ -255,24 +255,24 @@ More info in the [relative React documentation](https://it.reactjs.org/docs/code These are all the props you can pass to the `` component. -| Name | Type | Description | -| ----------------- | ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | -| `scene` | `string` | Scene file | -| `onLoad?` | `(spline: Application) => void` | Gets called once the scene has loaded. The `spline` parameter is an instance of the [Spline Application](#spline-app-methods) | -| `renderOnDemand?` | `boolean` | Wether or not to enable [on demand rendering](https://threejs.org/manual/#en/rendering-on-demand). Default `true`. | -| `className?` | `string` | CSS classes | -| `style?` | `object` | CSS style | -| `id?` | `string` | Canvas id | -| `ref?` | `React.Ref` | A ref pointing to div container element. | -| `onWheel?` | `(e: SplineEvent) => void` | Gets called on the [`wheel`](https://developer.mozilla.org/en-US/docs/Web/API/Element/wheel_event) event on the canvas | -| `onMouseDown?` | `(e: SplineEvent) => void` | Gets called once a Spline `Mouse Down` event is fired | -| `onMouseHover?` | `(e: SplineEvent) => void` | Gets called once a Spline `Mouse Hover` event is fired | -| `onMouseUp?` | `(e: SplineEvent) => void` | Gets called once a Spline `Mouse Up` event is fired | -| `onKeyDown?` | `(e: SplineEvent) => void` | Gets called once a Spline `Key Down` event is fired | -| `onKeyUp?` | `(e: SplineEvent) => void` | Gets called once a Spline `Key Up` event is fired | -| `onStart?` | `(e: SplineEvent) => void` | Gets called once a Spline `Start` event is fired | -| `onLookAt?` | `(e: SplineEvent) => void` | Gets called once a Spline `Look At` event is fired | -| `onFollow?` | `(e: SplineEvent) => void` | Gets called once a Spline `Mouse Up` event is fired | +| Name | Type | Description | +| --------------------- | ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | +| `scene` | `string` | Scene file | +| `onLoad?` | `(spline: Application) => void` | Gets called once the scene has loaded. The `spline` parameter is an instance of the [Spline Application](#spline-app-methods) | +| `renderOnDemand?` | `boolean` | Wether or not to enable [on demand rendering](https://threejs.org/manual/#en/rendering-on-demand). Default `true`. | +| `className?` | `string` | CSS classes | +| `style?` | `object` | CSS style | +| `id?` | `string` | Canvas id | +| `ref?` | `React.Ref` | A ref pointing to div container element. | +| `onSplineMouseDown?` | `(e: SplineEvent) => void` | Gets called once a Spline `Mouse Down` event is fired | +| `onSplineMouseHover?` | `(e: SplineEvent) => void` | Gets called once a Spline `Mouse Hover` event is fired | +| `onSplineMouseUp?` | `(e: SplineEvent) => void` | Gets called once a Spline `Mouse Up` event is fired | +| `onSplineKeyDown?` | `(e: SplineEvent) => void` | Gets called once a Spline `Key Down` event is fired | +| `onSplineKeyUp?` | `(e: SplineEvent) => void` | Gets called once a Spline `Key Up` event is fired | +| `onSplineStart?` | `(e: SplineEvent) => void` | Gets called once a Spline `Start` event is fired | +| `onSplineLookAt?` | `(e: SplineEvent) => void` | Gets called once a Spline `Look At` event is fired | +| `onSplineFollow?` | `(e: SplineEvent) => void` | Gets called once a Spline `Mouse Up` event is fired | +| `onSplineScroll?` | `(e: SplineEvent) => void` | Gets called once a Spline `Scroll` event is fired | ### Spline App Methods diff --git a/src/Spline.tsx b/src/Spline.tsx index 9f3f002..981ab8f 100644 --- a/src/Spline.tsx +++ b/src/Spline.tsx @@ -11,27 +11,18 @@ import ParentSize from './ParentSize'; export type { SPEObject, SplineEvent, SplineEventName }; export interface SplineProps - extends Omit< - React.HTMLAttributes, - | 'onLoad' - | 'onMouseDown' - | 'onMouseUp' - | 'onMouseHover' - | 'onKeyDown' - | 'onKeyUp' - | 'onWheel' - > { + extends Omit, 'onLoad'> { scene: string; onLoad?: (e: Application) => void; - onMouseDown?: (e: SplineEvent) => void; - onMouseUp?: (e: SplineEvent) => void; - onMouseHover?: (e: SplineEvent) => void; - onKeyDown?: (e: SplineEvent) => void; - onKeyUp?: (e: SplineEvent) => void; - onStart?: (e: SplineEvent) => void; - onLookAt?: (e: SplineEvent) => void; - onFollow?: (e: SplineEvent) => void; - onWheel?: (e: SplineEvent) => void; + onSplineMouseDown?: (e: SplineEvent) => void; + onSplineMouseUp?: (e: SplineEvent) => void; + onSplineMouseHover?: (e: SplineEvent) => void; + onSplineKeyDown?: (e: SplineEvent) => void; + onSplineKeyUp?: (e: SplineEvent) => void; + onSplineStart?: (e: SplineEvent) => void; + onSplineLookAt?: (e: SplineEvent) => void; + onSplineFollow?: (e: SplineEvent) => void; + onSplineScroll?: (e: SplineEvent) => void; renderOnDemand?: boolean; } @@ -40,15 +31,15 @@ const Spline = forwardRef( { scene, style, - onMouseDown, - onMouseUp, - onMouseHover, - onKeyDown, - onKeyUp, - onStart, - onLookAt, - onFollow, - onWheel, + onSplineMouseDown, + onSplineMouseUp, + onSplineMouseHover, + onSplineKeyDown, + onSplineKeyUp, + onSplineStart, + onSplineLookAt, + onSplineFollow, + onSplineScroll, onLoad, renderOnDemand = true, children, @@ -70,39 +61,39 @@ const Spline = forwardRef( }[] = [ { name: 'mouseDown', - cb: onMouseDown, + cb: onSplineMouseDown, }, { name: 'mouseUp', - cb: onMouseUp, + cb: onSplineMouseUp, }, { name: 'mouseHover', - cb: onMouseHover, + cb: onSplineMouseHover, }, { name: 'keyDown', - cb: onKeyDown, + cb: onSplineKeyDown, }, { name: 'keyUp', - cb: onKeyUp, + cb: onSplineKeyUp, }, { name: 'start', - cb: onStart, + cb: onSplineStart, }, { name: 'lookAt', - cb: onLookAt, + cb: onSplineLookAt, }, { name: 'follow', - cb: onFollow, + cb: onSplineFollow, }, { name: 'scroll', - cb: onWheel, + cb: onSplineScroll, }, ];