From 6b27b95541a418bbd8d648fde7c35c8ecaa14614 Mon Sep 17 00:00:00 2001 From: Arthur Vivian Date: Fri, 4 Jun 2021 19:42:06 +0100 Subject: [PATCH] Add examples for using rive-react --- .gitignore | 1 + examples/basic-with-hook/README.md | 14 +++++ examples/basic-with-hook/package.json | 36 ++++++++++++ examples/basic-with-hook/public/index.html | 17 ++++++ .../basic-with-hook/public/poison-loader.riv | Bin 0 -> 7481 bytes examples/basic-with-hook/src/App.js | 19 ++++++ examples/basic-with-hook/src/index.js | 10 ++++ examples/basic/README.md | 14 +++++ examples/basic/package.json | 36 ++++++++++++ examples/basic/public/index.html | 17 ++++++ examples/basic/public/poison-loader.riv | Bin 0 -> 7481 bytes examples/basic/src/App.js | 12 ++++ examples/basic/src/index.js | 10 ++++ examples/play-on-hover/README.md | 14 +++++ examples/play-on-hover/package.json | 36 ++++++++++++ examples/play-on-hover/public/index.html | 17 ++++++ .../play-on-hover/public/poison-loader.riv | Bin 0 -> 7481 bytes examples/play-on-hover/src/App.js | 32 +++++++++++ examples/play-on-hover/src/index.js | 10 ++++ examples/play-pause-button/README.md | 14 +++++ examples/play-pause-button/package.json | 36 ++++++++++++ examples/play-pause-button/public/index.html | 17 ++++++ .../public/poison-loader.riv | Bin 0 -> 7481 bytes examples/play-pause-button/src/App.js | 50 ++++++++++++++++ examples/play-pause-button/src/index.js | 10 ++++ examples/state-machine-button/README.md | 14 +++++ examples/state-machine-button/package.json | 36 ++++++++++++ .../state-machine-button/public/index.html | 17 ++++++ examples/state-machine-button/public/like.riv | Bin 0 -> 7482 bytes examples/state-machine-button/src/App.js | 54 ++++++++++++++++++ examples/state-machine-button/src/index.js | 10 ++++ 31 files changed, 553 insertions(+) create mode 100644 examples/basic-with-hook/README.md create mode 100644 examples/basic-with-hook/package.json create mode 100644 examples/basic-with-hook/public/index.html create mode 100644 examples/basic-with-hook/public/poison-loader.riv create mode 100644 examples/basic-with-hook/src/App.js create mode 100644 examples/basic-with-hook/src/index.js create mode 100644 examples/basic/README.md create mode 100644 examples/basic/package.json create mode 100644 examples/basic/public/index.html create mode 100644 examples/basic/public/poison-loader.riv create mode 100644 examples/basic/src/App.js create mode 100644 examples/basic/src/index.js create mode 100644 examples/play-on-hover/README.md create mode 100644 examples/play-on-hover/package.json create mode 100644 examples/play-on-hover/public/index.html create mode 100644 examples/play-on-hover/public/poison-loader.riv create mode 100644 examples/play-on-hover/src/App.js create mode 100644 examples/play-on-hover/src/index.js create mode 100644 examples/play-pause-button/README.md create mode 100644 examples/play-pause-button/package.json create mode 100644 examples/play-pause-button/public/index.html create mode 100644 examples/play-pause-button/public/poison-loader.riv create mode 100644 examples/play-pause-button/src/App.js create mode 100644 examples/play-pause-button/src/index.js create mode 100644 examples/state-machine-button/README.md create mode 100644 examples/state-machine-button/package.json create mode 100644 examples/state-machine-button/public/index.html create mode 100644 examples/state-machine-button/public/like.riv create mode 100644 examples/state-machine-button/src/App.js create mode 100644 examples/state-machine-button/src/index.js diff --git a/.gitignore b/.gitignore index 95716b5..657f7cc 100644 --- a/.gitignore +++ b/.gitignore @@ -4,3 +4,4 @@ dist .env .idea .vscode +examples/**/package-lock.json diff --git a/examples/basic-with-hook/README.md b/examples/basic-with-hook/README.md new file mode 100644 index 0000000..6ecb5d6 --- /dev/null +++ b/examples/basic-with-hook/README.md @@ -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 +``` diff --git a/examples/basic-with-hook/package.json b/examples/basic-with-hook/package.json new file mode 100644 index 0000000..50957da --- /dev/null +++ b/examples/basic-with-hook/package.json @@ -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" + ] + } +} diff --git a/examples/basic-with-hook/public/index.html b/examples/basic-with-hook/public/index.html new file mode 100644 index 0000000..ade00a9 --- /dev/null +++ b/examples/basic-with-hook/public/index.html @@ -0,0 +1,17 @@ + + + + + + + + Rive React - Basic with Hook + + + +
+ + diff --git a/examples/basic-with-hook/public/poison-loader.riv b/examples/basic-with-hook/public/poison-loader.riv new file mode 100644 index 0000000000000000000000000000000000000000..a946fa436eebec1bbc8dea3491ee2df47f13b5ab GIT binary patch literal 7481 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 + + + ); +} + +export default App; diff --git a/examples/basic-with-hook/src/index.js b/examples/basic-with-hook/src/index.js new file mode 100644 index 0000000..b1ef1c0 --- /dev/null +++ b/examples/basic-with-hook/src/index.js @@ -0,0 +1,10 @@ +import React from "react"; +import ReactDOM from "react-dom"; +import App from "./App"; + +ReactDOM.render( + + + , + document.getElementById("root") +); diff --git a/examples/basic/README.md b/examples/basic/README.md new file mode 100644 index 0000000..146c4ed --- /dev/null +++ b/examples/basic/README.md @@ -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 +``` diff --git a/examples/basic/package.json b/examples/basic/package.json new file mode 100644 index 0000000..50957da --- /dev/null +++ b/examples/basic/package.json @@ -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" + ] + } +} diff --git a/examples/basic/public/index.html b/examples/basic/public/index.html new file mode 100644 index 0000000..1c3b6f1 --- /dev/null +++ b/examples/basic/public/index.html @@ -0,0 +1,17 @@ + + + + + + + + Rive React - Basic + + + +
+ + diff --git a/examples/basic/public/poison-loader.riv b/examples/basic/public/poison-loader.riv new file mode 100644 index 0000000000000000000000000000000000000000..a946fa436eebec1bbc8dea3491ee2df47f13b5ab GIT binary patch literal 7481 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 + + + ); +} + +export default App; diff --git a/examples/basic/src/index.js b/examples/basic/src/index.js new file mode 100644 index 0000000..b1ef1c0 --- /dev/null +++ b/examples/basic/src/index.js @@ -0,0 +1,10 @@ +import React from "react"; +import ReactDOM from "react-dom"; +import App from "./App"; + +ReactDOM.render( + + + , + document.getElementById("root") +); diff --git a/examples/play-on-hover/README.md b/examples/play-on-hover/README.md new file mode 100644 index 0000000..dd8f0b9 --- /dev/null +++ b/examples/play-on-hover/README.md @@ -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 +``` diff --git a/examples/play-on-hover/package.json b/examples/play-on-hover/package.json new file mode 100644 index 0000000..30ec20c --- /dev/null +++ b/examples/play-on-hover/package.json @@ -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" + ] + } +} diff --git a/examples/play-on-hover/public/index.html b/examples/play-on-hover/public/index.html new file mode 100644 index 0000000..a64d5f5 --- /dev/null +++ b/examples/play-on-hover/public/index.html @@ -0,0 +1,17 @@ + + + + + + + + Rive React - Play on hover + + + +
+ + diff --git a/examples/play-on-hover/public/poison-loader.riv b/examples/play-on-hover/public/poison-loader.riv new file mode 100644 index 0000000000000000000000000000000000000000..a946fa436eebec1bbc8dea3491ee2df47f13b5ab GIT binary patch literal 7481 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 + + + ); +} + +export default App; diff --git a/examples/play-on-hover/src/index.js b/examples/play-on-hover/src/index.js new file mode 100644 index 0000000..b1ef1c0 --- /dev/null +++ b/examples/play-on-hover/src/index.js @@ -0,0 +1,10 @@ +import React from "react"; +import ReactDOM from "react-dom"; +import App from "./App"; + +ReactDOM.render( + + + , + document.getElementById("root") +); diff --git a/examples/play-pause-button/README.md b/examples/play-pause-button/README.md new file mode 100644 index 0000000..92c23df --- /dev/null +++ b/examples/play-pause-button/README.md @@ -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 +``` diff --git a/examples/play-pause-button/package.json b/examples/play-pause-button/package.json new file mode 100644 index 0000000..50957da --- /dev/null +++ b/examples/play-pause-button/package.json @@ -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" + ] + } +} diff --git a/examples/play-pause-button/public/index.html b/examples/play-pause-button/public/index.html new file mode 100644 index 0000000..ade00a9 --- /dev/null +++ b/examples/play-pause-button/public/index.html @@ -0,0 +1,17 @@ + + + + + + + + Rive React - Basic with Hook + + + +
+ + diff --git a/examples/play-pause-button/public/poison-loader.riv b/examples/play-pause-button/public/poison-loader.riv new file mode 100644 index 0000000000000000000000000000000000000000..a946fa436eebec1bbc8dea3491ee2df47f13b5ab GIT binary patch literal 7481 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 { + 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. +
+ + +
+ ); +} + +export default App; diff --git a/examples/play-pause-button/src/index.js b/examples/play-pause-button/src/index.js new file mode 100644 index 0000000..b1ef1c0 --- /dev/null +++ b/examples/play-pause-button/src/index.js @@ -0,0 +1,10 @@ +import React from "react"; +import ReactDOM from "react-dom"; +import App from "./App"; + +ReactDOM.render( + + + , + document.getElementById("root") +); diff --git a/examples/state-machine-button/README.md b/examples/state-machine-button/README.md new file mode 100644 index 0000000..ef1e241 --- /dev/null +++ b/examples/state-machine-button/README.md @@ -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 +``` diff --git a/examples/state-machine-button/package.json b/examples/state-machine-button/package.json new file mode 100644 index 0000000..50957da --- /dev/null +++ b/examples/state-machine-button/package.json @@ -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" + ] + } +} diff --git a/examples/state-machine-button/public/index.html b/examples/state-machine-button/public/index.html new file mode 100644 index 0000000..ade00a9 --- /dev/null +++ b/examples/state-machine-button/public/index.html @@ -0,0 +1,17 @@ + + + + + + + + Rive React - Basic with Hook + + + +
+ + diff --git a/examples/state-machine-button/public/like.riv b/examples/state-machine-button/public/like.riv new file mode 100644 index 0000000000000000000000000000000000000000..bccd249f148a76b3cba35b3976da31fc5213a2f3 GIT binary patch literal 7482 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 literal 0 HcmV?d00001 diff --git a/examples/state-machine-button/src/App.js b/examples/state-machine-button/src/App.js new file mode 100644 index 0000000..4f8bd0f --- /dev/null +++ b/examples/state-machine-button/src/App.js @@ -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. +
+ +
+ ); +} + +export default App; diff --git a/examples/state-machine-button/src/index.js b/examples/state-machine-button/src/index.js new file mode 100644 index 0000000..b1ef1c0 --- /dev/null +++ b/examples/state-machine-button/src/index.js @@ -0,0 +1,10 @@ +import React from "react"; +import ReactDOM from "react-dom"; +import App from "./App"; + +ReactDOM.render( + + + , + document.getElementById("root") +);