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

1
.gitignore vendored
View File

@@ -4,3 +4,4 @@ dist
.env
.idea
.vscode
examples/**/package-lock.json

14
examples/basic-with-hook/README.md Normal file
View File

@@ -0,0 +1,14 @@
# Basic with hook
This is a very basic example of using the useRive to autoplay a simple looping animation.
## 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/basic-with-hook/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/basic-with-hook/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/basic-with-hook/public/poison-loader.riv Normal file
View File

Binary file not shown.

19
examples/basic-with-hook/src/App.js Normal file
View File

@@ -0,0 +1,19 @@
import { useRive } from "rive-react";
function App() {
const params = {
src: "poison-loader.riv",
autoplay: true,
};
const { RiveComponent } = useRive(params);
return (
// The animation will fit to the parent element.
<div style={{ height: "500px", width: "500px" }}>
<RiveComponent />
</div>
);
}
export default App;

10
examples/basic-with-hook/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")
);

14
examples/basic/README.md Normal file
View File

@@ -0,0 +1,14 @@
# Basic
This is a very basic example of using the Rive component to autoplay a simple looping animation.
## 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/basic/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/basic/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</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>

BIN
examples/basic/public/poison-loader.riv Normal file
View File

Binary file not shown.

12
examples/basic/src/App.js Normal file
View File

@@ -0,0 +1,12 @@
import Rive from "rive-react";
function App() {
return (
// The animation will fit to the parent element.
<div style={{ height: "500px", width: "500px" }}>
<Rive src="poison-loader.riv" autoplay />
</div>
);
}
export default App;

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

14
examples/play-on-hover/README.md Normal file
View File

@@ -0,0 +1,14 @@
# Play on hover
This provides an example of how to play/pause a Rive animation when the mouse is hovered over it.
## 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-on-hover/package.json Normal file
View File

@@ -0,0 +1,36 @@
{
"name": "play-on-hover",
"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-on-hover/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 - Play on hover</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>

BIN
examples/play-on-hover/public/poison-loader.riv Normal file
View File

Binary file not shown.

32
examples/play-on-hover/src/App.js Normal file
View File

@@ -0,0 +1,32 @@
import { useRive } from "rive-react";
function App() {
const params = {
src: "poison-loader.riv",
autoplay: false,
};
const { RiveComponent, rive } = useRive(params);
function onMouseEnter() {
// `rive` will return as null until the file as fully loaded, so we include this
// guard to prevent any unwanted errors.
if (rive) {
rive.play();
}
}
function onMouseLeave() {
if (rive) {
rive.pause();
}
}
return (
<div style={{ height: "600px", width: "600px" }}>
<RiveComponent onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} />
</div>
);
}
export default App;

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

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")
);

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")
);