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/play-pause-button/README.md Normal file
View File

@@ -0,0 +1,14 @@
# Play/Pause Buttons
This example shows how we can play/pause the Rive animation on a button click and update the text of the button based on events happening in the runtime.
## 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/play-pause-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/play-pause-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/play-pause-button/public/poison-loader.riv Normal file
View File

Binary file not shown.

50
examples/play-pause-button/src/App.js Normal file
View File

@@ -0,0 +1,50 @@
import { useEffect, useState } from "react";
import { useRive } from "rive-react";
function App() {
const [buttonText, setButtonText] = useState("Pause");
const { RiveComponent, rive } = useRive({
src: "poison-loader.riv",
autoplay: true,
});
useEffect(() => {
if (rive) {
// "play" event is fired when the animation starts to play, so we update
// button text on this event.
rive.on("play", () => {
setButtonText("Pause");
});
// As above, the "pause" event is fired when the animation pauses.
rive.on("pause", () => {
setButtonText("Play");
});
}
// We listen for changes to the rive object. The rive object will be null
// until the rive file has loaded.
}, [rive]);
function onButtonClick() {
// `rive` will return as null until the file as fully loaded, so we include this
// guard to prevent any unwanted errors.
if (rive) {
if (rive.isPlaying) {
rive.pause();
} else {
rive.play();
}
}
}
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 />
<button onClick={onButtonClick}>{buttonText}</button>
</div>
);
}
export default App;

10
examples/play-pause-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")
);