javascript/rive-react
1
0
Fork 0
mirror of https://github.com/rive-app/rive-react.git synced 2026-03-13 08:22:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add examples for using rive-react

Browse Source
This commit is contained in:
Arthur Vivian
2021-06-04 19:42:06 +01:00
parent 3b1d7593fe
commit 6b27b95541
31 changed files with 553 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
examples/state-machine-button/README.md Normal file
View File

@@ -0,0 +1,14 @@
# State Machine Button
This example shows how to interact with a state machine, using various onMouse\* callbacks to trigger transations.
## To Run
This example is created using [Create React App](https://reactjs.org/docs/create-a-new-react-app.html).
To install and run:
```
npm install
npm start
```

36
examples/state-machine-button/package.json Normal file
View File

@@ -0,0 +1,36 @@
{
"name": "basic",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.13.0",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"rive-react": "0.0.1",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "SKIP_PREFLIGHT_CHECK=true react-scripts start"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

17
examples/state-machine-button/public/index.html Normal file
View File

@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<title>Rive React - Basic with Hook</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>

BIN
examples/state-machine-button/public/like.riv Normal file
View File

Binary file not shown.

54
examples/state-machine-button/src/App.js Normal file
View File

@@ -0,0 +1,54 @@
import { useRive, useStateMachineInput } from "rive-react";
function App() {
const { RiveComponent, rive } = useRive({
src: "like.riv",
stateMachines: "State Machine 1",
artboard: "New Artboard",
autoplay: true,
});
const hoverInput = useStateMachineInput(rive, "State Machine 1", "Hover");
const pressedInput = useStateMachineInput(rive, "State Machine 1", "Pressed");
function onMouseEnter() {
// state machine inputs will be null until the rive file has loaded, so we
// put these guards in place to avoid any errors.
if (hoverInput) {
hoverInput.value = true;
}
}
function onMouseLeave() {
if (hoverInput) {
hoverInput.value = false;
}
}
function onMouseDown() {
if (pressedInput) {
pressedInput.value = true;
}
}
function onMouseUp() {
if (pressedInput) {
pressedInput.value = false;
}
}
return (
// The animation will fit to the parent element, so we set a large height
// and width for this example.
<div style={{ height: "500px", width: "500px" }}>
<RiveComponent
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onMouseDown={onMouseDown}
onMouseUp={onMouseUp}
/>
</div>
);
}
export default App;

10
examples/state-machine-button/src/index.js Normal file
View File

@@ -0,0 +1,10 @@
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
);