From 5d0822836cbc7c5645d7580173c3cdda772b616d Mon Sep 17 00:00:00 2001 From: Arthur Vivian Date: Fri, 10 Sep 2021 14:14:34 +0100 Subject: [PATCH] Update examples to use latest rive-react --- .release-it.json | 2 +- README.md | 20 ++++-- examples/basic-typescript/package.json | 2 +- examples/basic-typescript/src/App.tsx | 6 +- examples/basic-typescript/src/index.tsx | 8 +-- examples/basic-with-hook/package.json | 2 +- examples/basic-with-hook/src/App.js | 6 +- examples/basic-with-hook/src/index.js | 8 +-- examples/basic/package.json | 2 +- examples/basic/src/App.js | 4 +- examples/basic/src/index.js | 8 +-- examples/play-on-hover/package.json | 2 +- examples/play-on-hover/src/App.js | 6 +- examples/play-on-hover/src/index.js | 8 +-- examples/play-pause-button/package.json | 2 +- examples/play-pause-button/public/index.html | 2 +- examples/play-pause-button/src/App.js | 18 +++--- examples/play-pause-button/src/index.js | 8 +-- .../README.md | 2 +- .../state-machine-boolean-input/package.json | 36 +++++++++++ .../public/index.html | 17 +++++ .../public/like.riv | Bin .../state-machine-boolean-input/src/App.js | 58 ++++++++++++++++++ .../state-machine-boolean-input/src/index.js | 10 +++ examples/state-machine-button/src/App.js | 54 ---------------- examples/state-machine-button/src/index.js | 10 --- examples/state-machine-number-input/README.md | 14 +++++ .../package.json | 4 +- .../public/index.html | 2 +- .../public/skills.riv | Bin 0 -> 53281 bytes .../state-machine-number-input/src/App.js | 34 ++++++++++ .../state-machine-number-input/src/index.js | 10 +++ .../state-machine-trigger-input/README.md | 14 +++++ .../state-machine-trigger-input/package.json | 36 +++++++++++ .../public/index.html | 17 +++++ .../public/piggy-bank.riv | Bin 0 -> 1466 bytes .../state-machine-trigger-input/src/App.js | 31 ++++++++++ .../state-machine-trigger-input/src/index.js | 10 +++ 38 files changed, 353 insertions(+), 120 deletions(-) rename examples/{state-machine-button => state-machine-boolean-input}/README.md (90%) create mode 100644 examples/state-machine-boolean-input/package.json create mode 100644 examples/state-machine-boolean-input/public/index.html rename examples/{state-machine-button => state-machine-boolean-input}/public/like.riv (100%) create mode 100644 examples/state-machine-boolean-input/src/App.js create mode 100644 examples/state-machine-boolean-input/src/index.js delete mode 100644 examples/state-machine-button/src/App.js delete mode 100644 examples/state-machine-button/src/index.js create mode 100644 examples/state-machine-number-input/README.md rename examples/{state-machine-button => state-machine-number-input}/package.json (91%) rename examples/{state-machine-button => state-machine-number-input}/public/index.html (87%) create mode 100644 examples/state-machine-number-input/public/skills.riv create mode 100644 examples/state-machine-number-input/src/App.js create mode 100644 examples/state-machine-number-input/src/index.js create mode 100644 examples/state-machine-trigger-input/README.md create mode 100644 examples/state-machine-trigger-input/package.json create mode 100644 examples/state-machine-trigger-input/public/index.html create mode 100644 examples/state-machine-trigger-input/public/piggy-bank.riv create mode 100644 examples/state-machine-trigger-input/src/App.js create mode 100644 examples/state-machine-trigger-input/src/index.js diff --git a/.release-it.json b/.release-it.json index 321cd7f..218eb98 100644 --- a/.release-it.json +++ b/.release-it.json @@ -12,6 +12,6 @@ "releaseName": "${version}" }, "hooks": { - "after:bump": "npx auto-changelog -p" + "after:bump": ["npx auto-changelog -p", "git add ./CHANGELOG.md"] } } diff --git a/README.md b/README.md index edede78..a838879 100644 --- a/README.md +++ b/README.md @@ -73,7 +73,7 @@ export default Example; #### Parameters -- `riveParams`: Set of parameters that are passed to the Rive.js `Rive` class constructor. `null` and `undefined` can be passed to conditionally display the .rive file. +- `riveParams`: Set of parameters that are passed to the Rive.js `Rive` class constructor. `null` and `undefined` can be passed to conditionally display the .riv file. - `opts`: Rive React specific options. #### Return Values @@ -115,20 +115,30 @@ The `useStateMachineInput` hook is provided to make it easier to interact with s import { useRive, useStateMachineInput } from 'rive-react'; function Example() { + const STATE_MACHINE_NAME = 'button'; + const INPUT_NAME = 'onClick'; + const { RiveComponent, rive } = useRive({ src: 'button.riv', - stateMachines: 'button', + stateMachines: STATE_MACHINE_NAME, autoplay: true, }); - const onClickInput = useStateMachineInput(rive, 'button', 'onClick'); + const onClickInput = useStateMachineInput( + rive, + STATE_MACHINE_NAME, + INPUT_NAME + ); - return onClickInput && onClickInput.fire())} />; + // This example is using a state machine with a trigger input. + return onClickInput.fire()} />; } export default Example; ``` +See our [examples](examples) folder for working examples of [Boolean](examples/state-machine-boolean-input) and [Number](examples/state-machine-number-input) inputs. + #### Parameters - `rive`: A `Rive` object. This is returned by the `useRive` hook. @@ -141,4 +151,4 @@ A Rive.js `stateMachineInput` object. ## Examples -The `examples` shows a number of different ways to use Rive React. See the instructions for each example to run locally. +The [examples](examples) shows a number of different ways to use Rive React. See the instructions for each example to run locally. diff --git a/examples/basic-typescript/package.json b/examples/basic-typescript/package.json index 3a6fe01..030edab 100644 --- a/examples/basic-typescript/package.json +++ b/examples/basic-typescript/package.json @@ -13,7 +13,7 @@ "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "4.0.3", - "rive-react": "0.0.1", + "rive-react": "latest", "typescript": "^4.3.2", "web-vitals": "^1.1.2" }, diff --git a/examples/basic-typescript/src/App.tsx b/examples/basic-typescript/src/App.tsx index 14dd137..5db9624 100644 --- a/examples/basic-typescript/src/App.tsx +++ b/examples/basic-typescript/src/App.tsx @@ -1,8 +1,8 @@ -import { useRive, UseRiveParameters } from "rive-react"; +import { useRive, UseRiveParameters } from 'rive-react'; function App() { const params: UseRiveParameters = { - src: "poison-loader.riv", + src: 'poison-loader.riv', autoplay: true, }; @@ -10,7 +10,7 @@ function App() { return ( // The animation will fit to the parent element. -
+
); diff --git a/examples/basic-typescript/src/index.tsx b/examples/basic-typescript/src/index.tsx index b1ef1c0..c1f31c5 100644 --- a/examples/basic-typescript/src/index.tsx +++ b/examples/basic-typescript/src/index.tsx @@ -1,10 +1,10 @@ -import React from "react"; -import ReactDOM from "react-dom"; -import App from "./App"; +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App'; ReactDOM.render( , - document.getElementById("root") + document.getElementById('root') ); diff --git a/examples/basic-with-hook/package.json b/examples/basic-with-hook/package.json index aa084e1..e8e3c53 100644 --- a/examples/basic-with-hook/package.json +++ b/examples/basic-with-hook/package.json @@ -9,7 +9,7 @@ "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "4.0.3", - "rive-react": "0.0.1", + "rive-react": "latest", "web-vitals": "^1.1.2" }, "scripts": { diff --git a/examples/basic-with-hook/src/App.js b/examples/basic-with-hook/src/App.js index ed48e78..970a370 100644 --- a/examples/basic-with-hook/src/App.js +++ b/examples/basic-with-hook/src/App.js @@ -1,8 +1,8 @@ -import { useRive } from "rive-react"; +import { useRive } from 'rive-react'; function App() { const params = { - src: "poison-loader.riv", + src: 'poison-loader.riv', autoplay: true, }; @@ -10,7 +10,7 @@ function App() { return ( // The animation will fit to the parent element. -
+
); diff --git a/examples/basic-with-hook/src/index.js b/examples/basic-with-hook/src/index.js index b1ef1c0..c1f31c5 100644 --- a/examples/basic-with-hook/src/index.js +++ b/examples/basic-with-hook/src/index.js @@ -1,10 +1,10 @@ -import React from "react"; -import ReactDOM from "react-dom"; -import App from "./App"; +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App'; ReactDOM.render( , - document.getElementById("root") + document.getElementById('root') ); diff --git a/examples/basic/package.json b/examples/basic/package.json index aa62a55..f3358ef 100644 --- a/examples/basic/package.json +++ b/examples/basic/package.json @@ -9,7 +9,7 @@ "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "4.0.3", - "rive-react": "0.0.1", + "rive-react": "latest", "web-vitals": "^1.1.2" }, "scripts": { diff --git a/examples/basic/src/App.js b/examples/basic/src/App.js index a80569d..e784b69 100644 --- a/examples/basic/src/App.js +++ b/examples/basic/src/App.js @@ -1,9 +1,9 @@ -import Rive from "rive-react"; +import Rive from 'rive-react'; function App() { return ( // The animation will fit to the parent element. -
+
); diff --git a/examples/basic/src/index.js b/examples/basic/src/index.js index b1ef1c0..c1f31c5 100644 --- a/examples/basic/src/index.js +++ b/examples/basic/src/index.js @@ -1,10 +1,10 @@ -import React from "react"; -import ReactDOM from "react-dom"; -import App from "./App"; +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App'; ReactDOM.render( , - document.getElementById("root") + document.getElementById('root') ); diff --git a/examples/play-on-hover/package.json b/examples/play-on-hover/package.json index 30ec20c..c2e88c7 100644 --- a/examples/play-on-hover/package.json +++ b/examples/play-on-hover/package.json @@ -9,7 +9,7 @@ "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "4.0.3", - "rive-react": "0.0.1", + "rive-react": "latest", "web-vitals": "^1.1.2" }, "scripts": { diff --git a/examples/play-on-hover/src/App.js b/examples/play-on-hover/src/App.js index 3063cfb..d6a6385 100644 --- a/examples/play-on-hover/src/App.js +++ b/examples/play-on-hover/src/App.js @@ -1,8 +1,8 @@ -import { useRive } from "rive-react"; +import { useRive } from 'rive-react'; function App() { const params = { - src: "poison-loader.riv", + src: 'poison-loader.riv', autoplay: false, }; @@ -23,7 +23,7 @@ function App() { } return ( -
+
); diff --git a/examples/play-on-hover/src/index.js b/examples/play-on-hover/src/index.js index b1ef1c0..c1f31c5 100644 --- a/examples/play-on-hover/src/index.js +++ b/examples/play-on-hover/src/index.js @@ -1,10 +1,10 @@ -import React from "react"; -import ReactDOM from "react-dom"; -import App from "./App"; +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App'; ReactDOM.render( , - document.getElementById("root") + document.getElementById('root') ); diff --git a/examples/play-pause-button/package.json b/examples/play-pause-button/package.json index 6e68dcb..0eb50e8 100644 --- a/examples/play-pause-button/package.json +++ b/examples/play-pause-button/package.json @@ -9,7 +9,7 @@ "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "4.0.3", - "rive-react": "0.0.1", + "rive-react": "latest", "web-vitals": "^1.1.2" }, "scripts": { diff --git a/examples/play-pause-button/public/index.html b/examples/play-pause-button/public/index.html index ade00a9..750f1bc 100644 --- a/examples/play-pause-button/public/index.html +++ b/examples/play-pause-button/public/index.html @@ -8,7 +8,7 @@ name="description" content="Web site created using create-react-app" /> - Rive React - Basic with Hook + Rive React - Play/Pause Button diff --git a/examples/play-pause-button/src/App.js b/examples/play-pause-button/src/App.js index 1903c84..803beaa 100644 --- a/examples/play-pause-button/src/App.js +++ b/examples/play-pause-button/src/App.js @@ -1,10 +1,10 @@ -import { useEffect, useState } from "react"; -import { useRive } from "rive-react"; +import { useEffect, useState } from 'react'; +import { useRive } from 'rive-react'; function App() { - const [buttonText, setButtonText] = useState("Pause"); + const [buttonText, setButtonText] = useState('Pause'); const { RiveComponent, rive } = useRive({ - src: "poison-loader.riv", + src: 'poison-loader.riv', autoplay: true, }); @@ -12,13 +12,13 @@ function App() { 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"); + rive.on('play', () => { + setButtonText('Pause'); }); // As above, the "pause" event is fired when the animation pauses. - rive.on("pause", () => { - setButtonText("Play"); + rive.on('pause', () => { + setButtonText('Play'); }); } // We listen for changes to the rive object. The rive object will be null @@ -40,7 +40,7 @@ function App() { return ( // The animation will fit to the parent element, so we set a large height // and width for this example. -
+
diff --git a/examples/play-pause-button/src/index.js b/examples/play-pause-button/src/index.js index b1ef1c0..c1f31c5 100644 --- a/examples/play-pause-button/src/index.js +++ b/examples/play-pause-button/src/index.js @@ -1,10 +1,10 @@ -import React from "react"; -import ReactDOM from "react-dom"; -import App from "./App"; +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App'; ReactDOM.render( , - document.getElementById("root") + document.getElementById('root') ); diff --git a/examples/state-machine-button/README.md b/examples/state-machine-boolean-input/README.md similarity index 90% rename from examples/state-machine-button/README.md rename to examples/state-machine-boolean-input/README.md index ef1e241..3b6f811 100644 --- a/examples/state-machine-button/README.md +++ b/examples/state-machine-boolean-input/README.md @@ -1,4 +1,4 @@ -# State Machine Button +# State Machine Boolean Input This example shows how to interact with a state machine, using various onMouse\* callbacks to trigger transations. diff --git a/examples/state-machine-boolean-input/package.json b/examples/state-machine-boolean-input/package.json new file mode 100644 index 0000000..058ca80 --- /dev/null +++ b/examples/state-machine-boolean-input/package.json @@ -0,0 +1,36 @@ +{ + "name": "state-machine-boolean-input", + "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": "latest", + "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-boolean-input/public/index.html b/examples/state-machine-boolean-input/public/index.html new file mode 100644 index 0000000..f7322bc --- /dev/null +++ b/examples/state-machine-boolean-input/public/index.html @@ -0,0 +1,17 @@ + + + + + + + + Rive React - State Machine Boolean Input + + + +
+ + diff --git a/examples/state-machine-button/public/like.riv b/examples/state-machine-boolean-input/public/like.riv similarity index 100% rename from examples/state-machine-button/public/like.riv rename to examples/state-machine-boolean-input/public/like.riv diff --git a/examples/state-machine-boolean-input/src/App.js b/examples/state-machine-boolean-input/src/App.js new file mode 100644 index 0000000..bf7382a --- /dev/null +++ b/examples/state-machine-boolean-input/src/App.js @@ -0,0 +1,58 @@ +import { useRive, useStateMachineInput } from 'rive-react'; + +function App() { + const STATE_MACHINE_NAME = 'State Machine 1'; + const ON_HOVER_INPUT_NAME = 'Hover'; + const ON_PRESSED_INPUT_NAME = 'Pressed'; + + const { RiveComponent, rive } = useRive({ + src: 'like.riv', + stateMachines: STATE_MACHINE_NAME, + artboard: 'New Artboard', + autoplay: true, + }); + + // Both onHoverInput and onPressedInput are boolean inputs. To transition + // states we need to set the value property to true or false. + const onHoverInput = useStateMachineInput( + rive, + STATE_MACHINE_NAME, + ON_HOVER_INPUT_NAME + ); + const onPressedInput = useStateMachineInput( + rive, + STATE_MACHINE_NAME, + ON_PRESSED_INPUT_NAME + ); + + function onMouseEnter() { + onHoverInput.value = true; + } + + function onMouseLeave() { + onHoverInput.value = false; + } + + function onMouseDown() { + onPressedInput.value = true; + } + + function onMouseUp() { + onPressedInput.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-boolean-input/src/index.js b/examples/state-machine-boolean-input/src/index.js new file mode 100644 index 0000000..c1f31c5 --- /dev/null +++ b/examples/state-machine-boolean-input/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/src/App.js b/examples/state-machine-button/src/App.js deleted file mode 100644 index 4f8bd0f..0000000 --- a/examples/state-machine-button/src/App.js +++ /dev/null @@ -1,54 +0,0 @@ -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 deleted file mode 100644 index b1ef1c0..0000000 --- a/examples/state-machine-button/src/index.js +++ /dev/null @@ -1,10 +0,0 @@ -import React from "react"; -import ReactDOM from "react-dom"; -import App from "./App"; - -ReactDOM.render( - - - , - document.getElementById("root") -); diff --git a/examples/state-machine-number-input/README.md b/examples/state-machine-number-input/README.md new file mode 100644 index 0000000..756317c --- /dev/null +++ b/examples/state-machine-number-input/README.md @@ -0,0 +1,14 @@ +# State Machine Number Input + +This example shows how to interact with a state machine with number inputs. We trigger the transistions by changing the value of a number input. + +## 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-number-input/package.json similarity index 91% rename from examples/state-machine-button/package.json rename to examples/state-machine-number-input/package.json index 2323f40..273d411 100644 --- a/examples/state-machine-button/package.json +++ b/examples/state-machine-number-input/package.json @@ -1,5 +1,5 @@ { - "name": "state-machine-button", + "name": "state-machine-number-input", "version": "0.1.0", "private": true, "dependencies": { @@ -9,7 +9,7 @@ "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "4.0.3", - "rive-react": "0.0.1", + "rive-react": "latest", "web-vitals": "^1.1.2" }, "scripts": { diff --git a/examples/state-machine-button/public/index.html b/examples/state-machine-number-input/public/index.html similarity index 87% rename from examples/state-machine-button/public/index.html rename to examples/state-machine-number-input/public/index.html index ade00a9..46d5d28 100644 --- a/examples/state-machine-button/public/index.html +++ b/examples/state-machine-number-input/public/index.html @@ -8,7 +8,7 @@ name="description" content="Web site created using create-react-app" /> - Rive React - Basic with Hook + Rive React - State Machine Number Input diff --git a/examples/state-machine-number-input/public/skills.riv b/examples/state-machine-number-input/public/skills.riv new file mode 100644 index 0000000000000000000000000000000000000000..37680e62668363d2ee9e33a0b9fdc697e168d6cf GIT binary patch literal 53281 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 G?f(H~e!SZN literal 0 HcmV?d00001 diff --git a/examples/state-machine-number-input/src/App.js b/examples/state-machine-number-input/src/App.js new file mode 100644 index 0000000..61117a2 --- /dev/null +++ b/examples/state-machine-number-input/src/App.js @@ -0,0 +1,34 @@ +import { useRive, useStateMachineInput } from 'rive-react'; + +function App() { + const STATE_MACHINE_NAME = 'State Machine '; + const INPUT_NAME = 'Level'; + + const { RiveComponent, rive } = useRive({ + src: 'skills.riv', + stateMachines: STATE_MACHINE_NAME, + artboard: 'New Artboard', + autoplay: true, + }); + + // levelInput is a number state machine input. To transition the state machine, + // we need to set the value to a number. For this state machine input, we need + // to set to 0, 1 or 2 for a state transition to occur. + const levelInput = useStateMachineInput(rive, STATE_MACHINE_NAME, INPUT_NAME); + + return ( + // The animation will fit to the parent element, so we set a large height + // and width for this example. +
+ +
+ Level: + + + +
+
+ ); +} + +export default App; diff --git a/examples/state-machine-number-input/src/index.js b/examples/state-machine-number-input/src/index.js new file mode 100644 index 0000000..c1f31c5 --- /dev/null +++ b/examples/state-machine-number-input/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-trigger-input/README.md b/examples/state-machine-trigger-input/README.md new file mode 100644 index 0000000..eb73c91 --- /dev/null +++ b/examples/state-machine-trigger-input/README.md @@ -0,0 +1,14 @@ +# State Machine Trigger Input + +This example shows how to interact with a state machine with a trigger input. We call the `fire()` function on the state machine input to transition the state when the animation is clicked. + +## 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-trigger-input/package.json b/examples/state-machine-trigger-input/package.json new file mode 100644 index 0000000..8483e22 --- /dev/null +++ b/examples/state-machine-trigger-input/package.json @@ -0,0 +1,36 @@ +{ + "name": "state-machine-trigger-input", + "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": "latest", + "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-trigger-input/public/index.html b/examples/state-machine-trigger-input/public/index.html new file mode 100644 index 0000000..f27e47b --- /dev/null +++ b/examples/state-machine-trigger-input/public/index.html @@ -0,0 +1,17 @@ + + + + + + + + Rive React - State Machine Trigger Input + + + +
+ + diff --git a/examples/state-machine-trigger-input/public/piggy-bank.riv b/examples/state-machine-trigger-input/public/piggy-bank.riv new file mode 100644 index 0000000000000000000000000000000000000000..3a465c076a71b35d1c18a87b3bdc54c826880ac5 GIT binary patch literal 1466 zcmah{Z)j6j6hAL{uWelN@@GlcN=VXXX@_oewKlOf&CPqyMhmr7JLYhX`r5oE!7dNd zjJ6J0tg}u7g}VjePRvGOgk4RY#S9tUB_f$3w?X5jS;?nswhT z@n32ZO=9=%zx!v>xBqcL2!i-_5|g}UR_1&A%p{d|KL(Jcfbdpven-2J2T7U{q8Fsg4+0^RCPu3~AFwP>(B+#8W^rhYeW07p6~ z4;{d2E8Abt%!&G+pJ<|0DkZb%FMS3QBUI+zFvqE@rTa?1pK7Q`U?K^FrqtG?TKXK=w2Fmdi`jw zjtIX@rHQyG-%CI+#&)Milny2iopGpdwZPgo7X-Fix}qt)MnE#a?cQSq0#f`*WNn-K zzlf)=6`vv2w>Dx{9?4AVkA_ns7PSfa+$ov2r@Wtg0O|Yp=m_n^SYM$7xD8 zg7#GN@&O9!^+v+cDGEXewwM}0k5ro9rh`g?KApB>VVr9A=)gXAgo3mVbd7neXL^{Q zAD~2|2dVZ91x62j`wA5NUk{Z8Mh{cJ9;F(ihnIgoNWoJ*7!$*Lki2^TmBU0#u!s?Q z6CK8xR}D8HxiAtpCLNHdrZctcq3tGW=x92ONL$R=UzCeVXoozM&E=I)3v4;TRPQV( sqoYb1+Hu_@PbdZ4PeA86h5_L`!(L$QGfWziKy*k0KvxWG{S;UK0wM)@ZU6uP literal 0 HcmV?d00001 diff --git a/examples/state-machine-trigger-input/src/App.js b/examples/state-machine-trigger-input/src/App.js new file mode 100644 index 0000000..06c223e --- /dev/null +++ b/examples/state-machine-trigger-input/src/App.js @@ -0,0 +1,31 @@ +import { useRive, useStateMachineInput } from 'rive-react'; + +function App() { + const STATE_MACHINE_NAME = 'State Machine 1'; + const INPUT_NAME = 'Pressed'; + + const { RiveComponent, rive } = useRive({ + src: 'piggy-bank.riv', + stateMachines: STATE_MACHINE_NAME, + artboard: 'New Artboard', + autoplay: true, + }); + + // pressedInput in a trigger state machine input. To transition the state + // we need to call the `fire()` method on the input. + const pressedInput = useStateMachineInput( + rive, + STATE_MACHINE_NAME, + INPUT_NAME + ); + + return ( + // The animation will fit to the parent element, so we set a large height + // and width for this example. +
+ pressedInput.fire()} /> +
+ ); +} + +export default App; diff --git a/examples/state-machine-trigger-input/src/index.js b/examples/state-machine-trigger-input/src/index.js new file mode 100644 index 0000000..c1f31c5 --- /dev/null +++ b/examples/state-machine-trigger-input/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') +);