Skip to content

Commit ff77f56

Browse files
marcofugaromarcofugaro
authored
Allow usage of onXXX native events (#192)
1 parent dbdedae commit ff77f56

File tree

2 files changed

+49
-58
lines changed

2 files changed

+49
-58
lines changed

‎README.md‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -127,15 +127,15 @@ export default function App() {
127127
}
128128
```
129129

130-
### Listen to events
130+
### Listen to Spline Events
131131

132132
You can listen to any Spline Event you set in the Events panel of the editor by attaching a listener to the Spline component.
133133

134134
```jsx
135135
import Spline from '@splinetool/react-spline';
136136

137137
export default function App() {
138-
function onMouseDown(e) {
138+
function onSplineMouseDown(e) {
139139
if (e.target.name === 'Cube') {
140140
console.log('I have been clicked!');
141141
}
@@ -145,7 +145,7 @@ export default function App() {
145145
<div>
146146
<Spline
147147
scene="https://prod.spline.design/6Wq1Q7YGyM-iab9i/scene.splinecode"
148-
onMouseDown={onMouseDown}
148+
onSplineMouseDown={onSplineMouseDown}
149149
/>
150150
</div>
151151
);
@@ -255,24 +255,24 @@ More info in the [relative React documentation](https://it.reactjs.org/docs/code
255255

256256
These are all the props you can pass to the `<Spline />` component.
257257

258-
| Name | Type | Description |
259-
| ----------------- | ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
260-
| `scene` | `string` | Scene file |
261-
| `onLoad?` | `(spline: Application) => void` | Gets called once the scene has loaded. The `spline` parameter is an instance of the [Spline Application](#spline-app-methods) |
262-
| `renderOnDemand?` | `boolean` | Wether or not to enable [on demand rendering](https://threejs.org/manual/#en/rendering-on-demand). Default `true`. |
263-
| `className?` | `string` | CSS classes |
264-
| `style?` | `object` | CSS style |
265-
| `id?` | `string` | Canvas id |
266-
| `ref?` | `React.Ref<HTMLDivElement>` | A ref pointing to div container element. |
267-
| `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 |
268-
| `onMouseDown?` | `(e: SplineEvent) => void` | Gets called once a Spline `Mouse Down` event is fired |
269-
| `onMouseHover?` | `(e: SplineEvent) => void` | Gets called once a Spline `Mouse Hover` event is fired |
270-
| `onMouseUp?` | `(e: SplineEvent) => void` | Gets called once a Spline `Mouse Up` event is fired |
271-
| `onKeyDown?` | `(e: SplineEvent) => void` | Gets called once a Spline `Key Down` event is fired |
272-
| `onKeyUp?` | `(e: SplineEvent) => void` | Gets called once a Spline `Key Up` event is fired |
273-
| `onStart?` | `(e: SplineEvent) => void` | Gets called once a Spline `Start` event is fired |
274-
| `onLookAt?` | `(e: SplineEvent) => void` | Gets called once a Spline `Look At` event is fired |
275-
| `onFollow?` | `(e: SplineEvent) => void` | Gets called once a Spline `Mouse Up` event is fired |
258+
| Name | Type | Description |
259+
| --------------------- | ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
260+
| `scene` | `string` | Scene file |
261+
| `onLoad?` | `(spline: Application) => void` | Gets called once the scene has loaded. The `spline` parameter is an instance of the [Spline Application](#spline-app-methods) |
262+
| `renderOnDemand?` | `boolean` | Wether or not to enable [on demand rendering](https://threejs.org/manual/#en/rendering-on-demand). Default `true`. |
263+
| `className?` | `string` | CSS classes |
264+
| `style?` | `object` | CSS style |
265+
| `id?` | `string` | Canvas id |
266+
| `ref?` | `React.Ref<HTMLDivElement>` | A ref pointing to div container element. |
267+
| `onSplineMouseDown?` | `(e: SplineEvent) => void` | Gets called once a Spline `Mouse Down` event is fired |
268+
| `onSplineMouseHover?` | `(e: SplineEvent) => void` | Gets called once a Spline `Mouse Hover` event is fired |
269+
| `onSplineMouseUp?` | `(e: SplineEvent) => void` | Gets called once a Spline `Mouse Up` event is fired |
270+
| `onSplineKeyDown?` | `(e: SplineEvent) => void` | Gets called once a Spline `Key Down` event is fired |
271+
| `onSplineKeyUp?` | `(e: SplineEvent) => void` | Gets called once a Spline `Key Up` event is fired |
272+
| `onSplineStart?` | `(e: SplineEvent) => void` | Gets called once a Spline `Start` event is fired |
273+
| `onSplineLookAt?` | `(e: SplineEvent) => void` | Gets called once a Spline `Look At` event is fired |
274+
| `onSplineFollow?` | `(e: SplineEvent) => void` | Gets called once a Spline `Mouse Up` event is fired |
275+
| `onSplineScroll?` | `(e: SplineEvent) => void` | Gets called once a Spline `Scroll` event is fired |
276276

277277
### Spline App Methods
278278

‎src/Spline.tsx‎

Lines changed: 28 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -11,27 +11,18 @@ import ParentSize from './ParentSize';
1111
export type { SPEObject, SplineEvent, SplineEventName };
1212

1313
export interface SplineProps
14-
extends Omit<
15-
React.HTMLAttributes<HTMLDivElement>,
16-
| 'onLoad'
17-
| 'onMouseDown'
18-
| 'onMouseUp'
19-
| 'onMouseHover'
20-
| 'onKeyDown'
21-
| 'onKeyUp'
22-
| 'onWheel'
23-
> {
14+
extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onLoad'> {
2415
scene: string;
2516
onLoad?: (e: Application) => void;
26-
onMouseDown?: (e: SplineEvent) => void;
27-
onMouseUp?: (e: SplineEvent) => void;
28-
onMouseHover?: (e: SplineEvent) => void;
29-
onKeyDown?: (e: SplineEvent) => void;
30-
onKeyUp?: (e: SplineEvent) => void;
31-
onStart?: (e: SplineEvent) => void;
32-
onLookAt?: (e: SplineEvent) => void;
33-
onFollow?: (e: SplineEvent) => void;
34-
onWheel?: (e: SplineEvent) => void;
17+
onSplineMouseDown?: (e: SplineEvent) => void;
18+
onSplineMouseUp?: (e: SplineEvent) => void;
19+
onSplineMouseHover?: (e: SplineEvent) => void;
20+
onSplineKeyDown?: (e: SplineEvent) => void;
21+
onSplineKeyUp?: (e: SplineEvent) => void;
22+
onSplineStart?: (e: SplineEvent) => void;
23+
onSplineLookAt?: (e: SplineEvent) => void;
24+
onSplineFollow?: (e: SplineEvent) => void;
25+
onSplineScroll?: (e: SplineEvent) => void;
3526
renderOnDemand?: boolean;
3627
}
3728

@@ -40,15 +31,15 @@ const Spline = forwardRef<HTMLDivElement, SplineProps>(
4031
{
4132
scene,
4233
style,
43-
onMouseDown,
44-
onMouseUp,
45-
onMouseHover,
46-
onKeyDown,
47-
onKeyUp,
48-
onStart,
49-
onLookAt,
50-
onFollow,
51-
onWheel,
34+
onSplineMouseDown,
35+
onSplineMouseUp,
36+
onSplineMouseHover,
37+
onSplineKeyDown,
38+
onSplineKeyUp,
39+
onSplineStart,
40+
onSplineLookAt,
41+
onSplineFollow,
42+
onSplineScroll,
5243
onLoad,
5344
renderOnDemand = true,
5445
children,
@@ -70,39 +61,39 @@ const Spline = forwardRef<HTMLDivElement, SplineProps>(
7061
}[] = [
7162
{
7263
name: 'mouseDown',
73-
cb: onMouseDown,
64+
cb: onSplineMouseDown,
7465
},
7566
{
7667
name: 'mouseUp',
77-
cb: onMouseUp,
68+
cb: onSplineMouseUp,
7869
},
7970
{
8071
name: 'mouseHover',
81-
cb: onMouseHover,
72+
cb: onSplineMouseHover,
8273
},
8374
{
8475
name: 'keyDown',
85-
cb: onKeyDown,
76+
cb: onSplineKeyDown,
8677
},
8778
{
8879
name: 'keyUp',
89-
cb: onKeyUp,
80+
cb: onSplineKeyUp,
9081
},
9182
{
9283
name: 'start',
93-
cb: onStart,
84+
cb: onSplineStart,
9485
},
9586
{
9687
name: 'lookAt',
97-
cb: onLookAt,
88+
cb: onSplineLookAt,
9889
},
9990
{
10091
name: 'follow',
101-
cb: onFollow,
92+
cb: onSplineFollow,
10293
},
10394
{
10495
name: 'scroll',
105-
cb: onWheel,
96+
cb: onSplineScroll,
10697
},
10798
];
10899

0 commit comments

Comments
 (0)