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 0000000..a946fa4 Binary files /dev/null and b/examples/basic-with-hook/public/poison-loader.riv differ diff --git a/examples/basic-with-hook/src/App.js b/examples/basic-with-hook/src/App.js new file mode 100644 index 0000000..ed48e78 --- /dev/null +++ b/examples/basic-with-hook/src/App.js @@ -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. +
+ +
+ ); +} + +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 0000000..a946fa4 Binary files /dev/null and b/examples/basic/public/poison-loader.riv differ diff --git a/examples/basic/src/App.js b/examples/basic/src/App.js new file mode 100644 index 0000000..a80569d --- /dev/null +++ b/examples/basic/src/App.js @@ -0,0 +1,12 @@ +import Rive from "rive-react"; + +function App() { + return ( + // The animation will fit to the parent element. +
+ +
+ ); +} + +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 0000000..a946fa4 Binary files /dev/null and b/examples/play-on-hover/public/poison-loader.riv differ diff --git a/examples/play-on-hover/src/App.js b/examples/play-on-hover/src/App.js new file mode 100644 index 0000000..3063cfb --- /dev/null +++ b/examples/play-on-hover/src/App.js @@ -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 ( +
+ +
+ ); +} + +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 0000000..a946fa4 Binary files /dev/null and b/examples/play-pause-button/public/poison-loader.riv differ diff --git a/examples/play-pause-button/src/App.js b/examples/play-pause-button/src/App.js new file mode 100644 index 0000000..1903c84 --- /dev/null +++ b/examples/play-pause-button/src/App.js @@ -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. +
+ + +
+ ); +} + +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 0000000..bccd249 Binary files /dev/null and b/examples/state-machine-button/public/like.riv differ 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") +);