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,
},
];