rive-react/docs/main.19f2d967.iframe.bundle.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{"./.storybook/preview.js-generated-config-entry.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);var preview_namespaceObject={};__webpack_require__.r(preview_namespaceObject),__webpack_require__.d(preview_namespaceObject,"parameters",(function(){return parameters}));__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.array.filter.js"),__webpack_require__("./node_modules/core-js/modules/es.object.get-own-property-descriptor.js"),__webpack_require__("./node_modules/core-js/modules/es.array.for-each.js"),__webpack_require__("./node_modules/core-js/modules/web.dom-collections.for-each.js"),__webpack_require__("./node_modules/core-js/modules/es.object.get-own-property-descriptors.js"),__webpack_require__("./node_modules/core-js/modules/es.object.define-properties.js"),__webpack_require__("./node_modules/core-js/modules/es.object.define-property.js");var ClientApi=__webpack_require__("./node_modules/@storybook/client-api/dist/esm/ClientApi.js"),parameters={actions:{argTypesRegex:"^on[A-Z].*"},controls:{matchers:{color:/(background|color)$/i,date:/Date$/}},options:{storySort:{method:"alphabetical",order:["Overview","Playback Controls","State Machines"]}},viewMode:"docs"};function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}window.addEventListener("load",(function clickDocsButtonOnFirstLoad(){window.removeEventListener("load",clickDocsButtonOnFirstLoad);try{window.parent.document.evaluate("//button[contains(., 'Docs')]",window.parent.document,null,XPathResult.ANY_TYPE,null).iterateNext().click()}catch(error){}})),Object.keys(preview_namespaceObject).forEach((function(key){var value=preview_namespaceObject[key];switch(key){case"args":return Object(ClientApi.d)(value);case"argTypes":return Object(ClientApi.b)(value);case"decorators":return value.forEach((function(decorator){return Object(ClientApi.f)(decorator,!1)}));case"loaders":return value.forEach((function(loader){return Object(ClientApi.g)(loader,!1)}));case"parameters":return Object(ClientApi.h)(function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=null!=arguments[i]?arguments[i]:{};i%2?ownKeys(Object(source),!0).forEach((function(key){_defineProperty(target,key,source[key])})):Object.getOwnPropertyDescriptors?Object.defineProperties(target,Object.getOwnPropertyDescriptors(source)):ownKeys(Object(source)).forEach((function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))}))}return target}({},value),!1);case"argTypesEnhancers":return value.forEach((function(enhancer){return Object(ClientApi.c)(enhancer)}));case"argsEnhancers":return value.forEach((function(enhancer){return Object(ClientApi.e)(enhancer)}));case"render":return Object(ClientApi.i)(value);case"globals":case"globalTypes":var v={};return v[key]=value,Object(ClientApi.h)(v,!1);case"__namedExportsOrder":case"decorateStory":case"renderToDOM":return null;default:return console.log(key+" was not supported :( !")}}))},"./examples/stories sync ^\\.[\\\\/](?:(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$":function(module,exports){function webpackEmptyContext(req){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}webpackEmptyContext.keys=function(){return[]},webpackEmptyContext.resolve=webpackEmptyContext,module.exports=webpackEmptyContext,webpackEmptyContext.id="./examples/stories sync ^\\.[\\\\/](?:(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"},"./examples/stories sync ^\\.[\\\\/](?:(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$":function(module,exports,__webpack_require__){var map={"./AnimationPlayback.stories.mdx":"./examples/stories/AnimationPlayback.stories.mdx","./RiveOverview.stories.mdx":"./examples/stories/RiveOverview.stories.mdx","./StateMachineDocs.stories.mdx":"./examples/stories/StateMachineDocs.stories.mdx"};function webpackContext(req){var id=webpackContextResolve(req);return __webpack_require__(id)}function webpackContextResolve(req){if(!__webpack_require__.o(map,req)){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}return map[req]}webpackContext.keys=function webpackContextKeys(){return Object.keys(map)},webpackContext.resolve=webpackContextResolve,module.exports=webpackContext,webpackContext.id="./examples/stories sync ^\\.[\\\\/](?:(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"},"./examples/stories/AnimationPlayback.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"playPauseWithHover",(function(){return playPauseWithHover})),__webpack_require__.d(__webpack_exports__,"playPauseWithIntersectionObserver",(function(){return playPauseWithIntersectionObserver})),__webpack_require__.d(__webpack_exports__,"playPauseWithExternalElements",(function(){return playPauseWithExternalElements}));__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.description.js"),__webpack_require__("./node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("./node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.array.slice.js"),__webpack_require__("./node_modules/core-js/modules/es.function.name.js"),__webpack_require__("./node_modules/core-js/modules/es.array.from.js"),__webpack_require__("./node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js");var react__WEBPACK_IMPORTED_MODULE_15__=__webpack_require__("./node_modules/react/index.js"),react__WEBPACK_IMPORTED_MODULE_15___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_15__),_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__=__webpack_require__("./node_modules/@mdx-js/react/dist/esm.js"),_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_17__=__webpack_require__("./node_modules/@storybook/addon-docs/dist/esm/index.js"),_src__WEBPACK_IMPORTED_MODULE_18__=__webpack_require__("./src/index.ts"),_components_Button__WEBPACK_IMPORTED_MODULE_19__=__webpack_require__("./examples/stories/components/Button.tsx"),_excluded=(__webpack_require__("./examples/stories/rive-overview.css"),["components"]);function _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _slicedToArray(arr,i){return function _arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function _iterableToArrayLimit(arr,i){var _i=null==arr?null:"undefined"!=typeof Symbol&&arr[Symbol.iterator]||arr["@@iterator"];if(null==_i)return;var _s,_e,_arr=[],_n=!0,_d=!1;try{for(_i=_i.call(arr);!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||function _unsupportedIterableToArray(o,minLen){if(!o)return;if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}(arr,i)||function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,_excluded);return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_17__.d,{title:"React Runtime/Playback Controls",mdxType:"Meta"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("h1",null,"Animation Playback"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("p",null,"When rendering Rives, you may want to control animation playback for certain scenarios. Animation playback allows you to programatically pause, stop, play, reset, and scrub animations as needed. You may find this useful for coordinating certain user interaction or other programatic cases to Rive animations."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("p",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("strong",{parentName:"p"},"Note:")," Just like the Rive web runtime, you invoke playback methods on a ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("inlineCode",{parentName:"p"},"rive")," instance. Because of this, you will need to use the ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("inlineCode",{parentName:"p"},"useRive")," method to render Rives to your React applications, as it returns a ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("inlineCode",{parentName:"p"},"rive")," instance for you to invoke controls on."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("h2",null,"User event-driven playback"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("p",null,"You can control Rive animation playback with user interaction directly on the canvas, or even outside the canvas, as you'll see below."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("h3",null,"Play/pause with hover"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("p",null,"The example below shows how to start with a Rive instance that does not autoplay initially, but plays whenever the cursor is hovered over the canvas, and returns to a paused state when the mouse leaves the canvas."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_17__.c,{withSource:"open",mdxType:"Canvas"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_17__.e,{name:"Play/pause with hover",mdxType:"Story"},(function(){var _useRive=Object(_src__WEBPACK_IMPORTED_MODULE_18__.useRive)({src:"poison-loader.riv",autoplay:!1}),rive=_useRive.rive,RiveComponent=_useRive.RiveComponent;return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("div",{className:"center"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)(RiveComponent,{className:"base-canvas-size",onMouseEnter:function onMouseEnter(){rive&&rive.play()},onMouseLeave:function onMouseLeave(){rive&&rive.pause()},mdxType:"RiveComponent"}))}))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_17__.c,{withSource:"open",mdxType:"Canvas"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_17__.e,{name:"Play/pause with intersection observer",mdxType:"Story"},(function(){var ref=Object(react__WEBPACK_IMPORTED_MODULE_15__.useRef)(null),_useRive2=Object(_src__WEBPACK_IMPORTED_MODULE_18__.useRive)({src:"baseball.riv",autoplay:!1,animations:"Hover"}),rive=_useRive2.rive,RiveComponent=_useRive2.RiveComponent;return Object(react__WEBPACK_IMPORTED_MODULE_15__.useEffect)((function(){var observer=new IntersectionObserver((function(_ref2){var things=_slicedToArray(_ref2,1)[0];rive&&(things.isIntersecting?rive.play("Hover"):rive.pause("Hover"))}),{rootMargin:"0px",threshold:.1});ref&&ref.current&&observer.observe(ref.current)}),[rive]),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("div",{ref:ref,className:"center"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)(RiveComponent,{className:"base-canvas-size",mdxType:"RiveComponent"}))}))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("h2",null,"Play/pause with external elements"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("p",null,"This example shows how you can control Rive elements via user interaction outside of the canvas, such as other buttons. Here, the play/pause button will toggle whether or not to play or pause the Rive animation."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_17__.c,{withSource:"open",mdxType:"Canvas"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_17__.e,{name:"Play/pause with external elements",mdxType:"Story"},(function(){var _useState2=_slicedToArray(Object(react__WEBPACK_IMPORTED_MODULE_15__.useState)(!0),2),isPlaying=_useState2[0],setIsPlaying=_useState2[1],_useRive3=Object(_src__WEBPACK_IMPORTED_MODULE_18__.useRive)({src:"truck.riv",stateMachines:"drive",artboard:"Truck",autoplay:!0}),rive=_useRive3.rive,RiveComponent=_useRive3.RiveComponent;return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)(react__WEBPACK_IMPORTED_MODULE_15___default.a.Fragment,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("div",{className:"center"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)(RiveComponent,{className:"base-canvas-size",mdxType:"RiveComponent"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)(_components_Button__WEBPACK_IMPORTED_MODULE_19__.a,{onClick:function togglePlaying(){isPlaying?(rive.pause(),setIsPlaying(!1)):(rive.play(),setIsPlaying(!0))},mdxType:"Button"},isPlaying?"Pause":"Play")))}))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("h2",null,"Additional ways to control playback"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("p",null,"While user interaction is a common way to control animation playback for Rives, there are other ways to achieve the same means as well."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("h3",null,"API-driven playback"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("p",null,"Another common way to control animation playback is through API responses. Imagine an API that you poll for loading progress of a task. Based on that progress response, you may play or stop a given animation. As long as you hold a reference to the ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("inlineCode",{parentName:"p"},"rive")," instance returned from the ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("inlineCode",{parentName:"p"},"useRive")," hook, you can invoke control methods on that instance in places such as callbacks from API responses. "))}MDXContent.displayName="MDXContent",MDXContent.isMDXComponent=!0;var playPauseWithHover=function playPauseWithHover(){var _useRive4=Object(_src__WEBPACK_IMPORTED_MODULE_18__.useRive)({src:"poison-loader.riv",autoplay:!1}),rive=_useRive4.rive,RiveComponent=_useRive4.RiveComponent;return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("div",{className:"center"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)(RiveComponent,{className:"base-canvas-size",onMouseEnter:function onMouseEnter(){rive&&rive.play()},onMouseLeave:function onMouseLeave(){rive&&rive.pause()}}))};playPauseWithHover.displayName="playPauseWithHover",playPauseWithHover.storyName="Play/pause with hover",playPauseWithHover.parameters={storySource:{source:'() => {\n  const {\n    rive,\n    RiveComponent\n  } = useRive({\n    src: \'poison-loader.riv\',\n    autoplay: false\n  });\n\n  function onMouseEnter() {\n    // rive will return as null until the file as fully loaded, so we include this\n    // guard to prevent any unwanted errors.\n    if (rive) {\n      rive.play();\n    }\n  }\n\n  function onMouseLeave() {\n    if (rive) {\n      rive.pause();\n    }\n  }\n\n  return <div className="center">\n          <RiveComponent className="base-canvas-size" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} />\n        </div>;\n}'}};var playPauseWithIntersectionObserver=function playPauseWithIntersectionObserver(){var ref=Object(react__WEBPACK_IMPORTED_MODULE_15__.useRef)(null),_useRive5=Object(_src__WEBPACK_IMPORTED_MODULE_18__.useRive)({src:"baseball.riv",autoplay:!1,animations:"Hover"}),rive=_useRive5.rive,RiveComponent=_useRive5.RiveComponent;return Object(react__WEBPACK_IMPORTED_MODULE_15__.useEffect)((function(){var observer=new IntersectionObserver((function(_ref4){var things=_slicedToArray(_ref4,1)[0];rive&&(things.isIntersecting?rive.play("Hover"):rive.pause("Hover"))}),{rootMargin:"0px",threshold:.1});ref&&ref.current&&observer.observe(ref.current)}),[rive]),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("div",{ref:ref,className:"center"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)(RiveComponent,{className:"base-canvas-size"}))};playPauseWithIntersectionObserver.displayName="playPauseWithIntersectionObserver",playPauseWithIntersectionObserver.storyName="Play/pause with intersection observer",playPauseWithIntersectionObserver.parameters={storySource:{source:'() => {\n  const ref = useRef(null);\n  const {\n    rive,\n    RiveComponent\n  } = useRive({\n    src: \'baseball.riv\',\n    autoplay: false,\n    animations: "Hover"\n  });\n  useEffect(() => {\n    const observer = new IntersectionObserver(([things]) => {\n      if (rive) {\n        if (things.isIntersecting) {\n          rive.play("Hover");\n        } else {\n          rive.pause("Hover");\n        }\n      }\n    }, {\n      rootMargin: \'0px\',\n      threshold: 0.1\n    });\n\n    if (ref && ref.current) {\n      observer.observe(ref.current);\n    }\n  }, [rive]);\n  return <div ref={ref} className="center">\n          <RiveComponent className="base-canvas-size" />\n        </div>;\n}'}};var playPauseWithExternalElements=function playPauseWithExternalElements(){var _useState4=_slicedToArray(Object(react__WEBPACK_IMPORTED_MODULE_15__.useState)(!0),2),isPlaying=_useState4[0],setIsPlaying=_useState4[1],_useRive6=Object(_src__WEBPACK_IMPORTED_MODULE_18__.useRive)({src:"truck.riv",stateMachines:"drive",artboard:"Truck",autoplay:!0}),rive=_useRive6.rive,RiveComponent=_useRive6.RiveComponent;return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)(react__WEBPACK_IMPORTED_MODULE_15___default.a.Fragment,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("div",{className:"center"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)(RiveComponent,{className:"base-canvas-size"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)(_components_Button__WEBPACK_IMPORTED_MODULE_19__.a,{onClick:function togglePlaying(){isPlaying?(rive.pause(),setIsPlaying(!1)):(rive.play(),setIsPlaying(!0))}},isPlaying?"Pause":"Play")))};playPauseWithExternalElements.storyName="Play/pause with external elements",playPauseWithExternalElements.parameters={storySource:{source:"() => {\n  const [isPlaying, setIsPlaying] = useState(true);\n  const {\n    rive,\n    RiveComponent\n  } = useRive({\n    src: 'truck.riv',\n    stateMachines: \"drive\",\n    artboard: 'Truck',\n    autoplay: true\n  });\n\n  const togglePlaying = () => {\n    if (isPlaying) {\n      rive.pause();\n      setIsPlaying(false);\n    } else {\n      rive.play();\n      setIsPlaying(true);\n    }\n  };\n\n  return <>\n          <div className=\"center\">\n            <RiveComponent className=\"base-canvas-size\" />\n            <Button onClick={togglePlaying}>{isPlaying ? 'Pause' : 'Play'}</Button>\n          </div>\n        </>;\n}"}};var componentMeta={title:"React Runtime/Playback Controls",includeStories:["playPauseWithHover","playPauseWithIntersectionObserver","playPauseWithExternalElements"]},mdxStoryNameToKey={"Play/pause with hover":"playPauseWithHover","Play/pause with intersection observer":"playPauseWithIntersectionObserver","Play/pause with external elements":"playPauseWithExternalElements"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_17__.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)(MDXContent,null))}}),__webpack_exports__.default=componentMeta},"./examples/stories/RiveOverview.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"riveComponent",(function(){return riveComponent})),__webpack_require__.d(__webpack_exports__,"useRiveHook",(function(){return useRiveHook}));__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.description.js"),__webpack_require__("./node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("./node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.array.slice.js"),__webpack_require__("./node_modules/core-js/modules/es.function.name.js"),__webpack_require__("./node_modules/core-js/modules/es.array.from.js"),__webpack_require__("./node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js");var react__WEBPACK_IMPORTED_MODULE_15__=__webpack_require__("./node_modules/react/index.js"),react__WEBPACK_IMPORTED_MODULE_15___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_15__),_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__=__webpack_require__("./node_modules/@mdx-js/react/dist/esm.js"),_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_17__=__webpack_require__("./node_modules/@storybook/addon-docs/dist/esm/index.js"),_src__WEBPACK_IMPORTED_MODULE_18__=__webpack_require__("./src/index.ts"),_components_Button__WEBPACK_IMPORTED_MODULE_19__=__webpack_require__("./examples/stories/components/Button.tsx"),_excluded=(__webpack_require__("./examples/stories/rive-overview.css"),["components"]);function _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _slicedToArray(arr,i){return function _arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function _iterableToArrayLimit(arr,i){var _i=null==arr?null:"undefined"!=typeof Symbol&&arr[Symbol.iterator]||arr["@@iterator"];if(null==_i)return;var _s,_e,_arr=[],_n=!0,_d=!1;try{for(_i=_i.call(arr);!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||function _unsupportedIterableToArray(o,minLen){if(!o)return;if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}(arr,i)||function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,_excluded);return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_17__.d,{title:"React Runtime/Overview",mdxType:"Meta"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("h1",null,"Rive React Runtime"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("p",null,"This is an examples/docs page for the official React runtime for Rive. Check out the various pages for how to use this SDK to incorporate Rive into your React-based web applications."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("p",null,"Want to follow along with these examples? Check out the ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("inlineCode",{parentName:"p"},"examples/")," folder in the ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("a",{parentName:"p",href:"https://github.com/rive-app/rive-react"},"rive-react")," project to find all these examples and ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("inlineCode",{parentName:"p"},".riv")," assets you can inspect in the Rive editor by dragging and dropping them into your Rive editor file browser."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("h2",null,"What is Rive?"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("img",{className:"rive-logo",src:"rive_logo_black_2x.png",alt:"Rive logo"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("p",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("a",{parentName:"p",href:"https://rive.app/"},"Rive")," is a real-time interactive design and animation tool. Use our collaborative editor to create motion graphics that respond to different states and user inputs. Then load your animations into apps, games, and websites with our lightweight open-source runtimes."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("h2",null,"How to use Rive at runtime"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("p",null,"There's multiple ways to render Rive using the React runtime. See the associated code snippets that follow each example."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("h3",null,"Rive component"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("code",{parentName:"pre",className:"language-tsx"},"import RiveComponent from '@rive-app/react-canvas';\n")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("p",null,"The React runtime exports a default React component you can insert as JSX. Under the hood, it renders a ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("inlineCode",{parentName:"p"},"<canvas>")," element that runs the animation, and a wrapping ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("inlineCode",{parentName:"p"},"<div>")," element that handles sizing of the canvas based on the parent that wraps the component."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("p",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("strong",{parentName:"p"},"When to use this"),": Use this for simple rendering cases where you don't need to control playback or setup state machine inputs to advance state machines. It will simply autoplay the first animation it finds in the ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("inlineCode",{parentName:"p"},".riv"),", the animation name you provide it, or the state machine name if you provide one."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("p",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("strong",{parentName:"p"},"Note:")," Style-specific props set onto the component will pass down to the wrapping ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("inlineCode",{parentName:"p"},"<div>")," element, while most other props will be set onto the ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("inlineCode",{parentName:"p"},"<canvas>")," element itself."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_17__.c,{withSource:"open",mdxType:"Canvas"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_17__.e,{name:"Rive Component",mdxType:"Story"},(function(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("div",{className:"center"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)(_src__WEBPACK_IMPORTED_MODULE_18__.default,{src:"poison-loader.riv",className:"base-canvas-size",mdxType:"RiveComponent"}))}))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("h4",null,"Props"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("p",null,"In addition to the props laid out below, the component accepts other props that can be set on the ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("inlineCode",{parentName:"p"},"<canvas>")," element."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_17__.b,{of:_src__WEBPACK_IMPORTED_MODULE_18__.default,mdxType:"ArgsTable"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("h3",null,"useRive Hook"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("code",{parentName:"pre",className:"language-tsx"},"import {useRive} from '@rive-app/react-canvas';\n")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("p",null,"The runtime also exports a named ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("inlineCode",{parentName:"p"},"useRive")," hook that allows for more control at Rive instantiation, since it passes back a ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("inlineCode",{parentName:"p"},"rive")," object you can use to manipulate state machines, control playback, and more."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("p",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("strong",{parentName:"p"},"When to use this:")," When you need to control your Rive animation in any aspect, such as controlling playback, using state machine inputs to advance state machines, add adding callbacks on certain Rive-specific events such as ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("inlineCode",{parentName:"p"},"onStateChange"),", ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("inlineCode",{parentName:"p"},"onPause"),", etc."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_17__.c,{withSource:"open",mdxType:"Canvas"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_17__.e,{name:"useRive Hook",mdxType:"Story"},(function(){var _useState2=_slicedToArray(Object(react__WEBPACK_IMPORTED_MODULE_15__.useState)(!0),2),isPlaying=_useState2[0],setIsPlaying=_useState2[1],_useState4=_slicedToArray(Object(react__WEBPACK_IMPORTED_MODULE_15__.useState)(""),2),animationText=_useState4[0],setAnimationText=_useState4[1],_useRive=Object(_src__WEBPACK_IMPORTED_MODULE_18__.useRive)({src:"truck.riv",stateMachines:"drive",artboard:"Truck",autoplay:!0,onPause:function onPause(){setAnimationText("Animation paused!")},onPlay:function onPlay(){setAnimationText("Animation is playing..")}}),rive=_useRive.rive,RiveComponentPlayback=_useRive.RiveComponent;return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)(react__WEBPACK_IMPORTED_MODULE_15___default.a.Fragment,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("div",{className:"center"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)(RiveComponentPlayback,{className:"base-canvas-size",mdxType:"RiveComponentPlayback"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("p",null,animationText),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)(_components_Button__WEBPACK_IMPORTED_MODULE_19__.a,{onClick:function togglePlaying(){isPlaying?(rive.pause(),setIsPlaying(!1)):(rive.play(),setIsPlaying(!0))},mdxType:"Button"},isPlaying?"Pause":"Play")))}))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("h4",null,"useRive parameters"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("code",{parentName:"pre",className:"language-tsx"},"useRive(params: UseRiveParameters, opts?: UseRiveOptions);\n")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("p",null,"The parameters available to set on ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("inlineCode",{parentName:"p"},"useRive")," can be found ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("a",{parentName:"p",href:"https://github.com/rive-app/rive-wasm/blob/master/js/src/rive.ts#L843"},"here"),". These pass down to the web runtime ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("inlineCode",{parentName:"p"},"rive")," instance created."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("p",null,"Additionally, there are other options to set on ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("inlineCode",{parentName:"p"},"useRive")," that can be found ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("a",{parentName:"p",href:"https://github.com/rive-app/rive-react/blob/main/src/types.ts#L6"},"here"),"."))}MDXContent.displayName="MDXContent",MDXContent.isMDXComponent=!0;var riveComponent=function riveComponent(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("div",{className:"center"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)(_src__WEBPACK_IMPORTED_MODULE_18__.default,{src:"poison-loader.riv",className:"base-canvas-size"}))};riveComponent.displayName="riveComponent",riveComponent.storyName="Rive Component",riveComponent.parameters={storySource:{source:'() => <div className="center">\n        <RiveComponent src="poison-loader.riv" className="base-canvas-size" />\n      </div>'}};var useRiveHook=function useRiveHook(){var _useState6=_slicedToArray(Object(react__WEBPACK_IMPORTED_MODULE_15__.useState)(!0),2),isPlaying=_useState6[0],setIsPlaying=_useState6[1],_useState8=_slicedToArray(Object(react__WEBPACK_IMPORTED_MODULE_15__.useState)(""),2),animationText=_useState8[0],setAnimationText=_useState8[1],_useRive2=Object(_src__WEBPACK_IMPORTED_MODULE_18__.useRive)({src:"truck.riv",stateMachines:"drive",artboard:"Truck",autoplay:!0,onPause:function onPause(){setAnimationText("Animation paused!")},onPlay:function onPlay(){setAnimationText("Animation is playing..")}}),rive=_useRive2.rive,RiveComponentPlayback=_useRive2.RiveComponent;return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)(react__WEBPACK_IMPORTED_MODULE_15___default.a.Fragment,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("div",{className:"center"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)(RiveComponentPlayback,{className:"base-canvas-size"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("p",null,animationText),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)(_components_Button__WEBPACK_IMPORTED_MODULE_19__.a,{onClick:function togglePlaying(){isPlaying?(rive.pause(),setIsPlaying(!1)):(rive.play(),setIsPlaying(!0))}},isPlaying?"Pause":"Play")))};useRiveHook.storyName="useRive Hook",useRiveHook.parameters={storySource:{source:"() => {\n  const [isPlaying, setIsPlaying] = useState(true);\n  const [animationText, setAnimationText] = useState('');\n  const {\n    rive,\n    RiveComponent: RiveComponentPlayback\n  } = useRive({\n    src: 'truck.riv',\n    stateMachines: \"drive\",\n    artboard: 'Truck',\n    autoplay: true,\n    onPause: () => {\n      setAnimationText('Animation paused!');\n    },\n    onPlay: () => {\n      setAnimationText('Animation is playing..');\n    }\n  });\n\n  const togglePlaying = () => {\n    if (isPlaying) {\n      rive.pause();\n      setIsPlaying(false);\n    } else {\n      rive.play();\n      setIsPlaying(true);\n    }\n  };\n\n  return <>\n          <div className=\"center\">\n            <RiveComponentPlayback className=\"base-canvas-size\" />\n            <p>{animationText}</p>\n            <Button onClick={togglePlaying}>{isPlaying ? 'Pause' : 'Play'}</Button>\n          </div>\n        </>;\n}"}};var componentMeta={title:"React Runtime/Overview",includeStories:["riveComponent","useRiveHook"]},mdxStoryNameToKey={"Rive Component":"riveComponent","useRive Hook":"useRiveHook"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_17__.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)(MDXContent,null))}}),__webpack_exports__.default=componentMeta},"./examples/stories/StateMachineDocs.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"booleanInput",(function(){return booleanInput})),__webpack_require__.d(__webpack_exports__,"numberInput",(function(){return numberInput})),__webpack_require__.d(__webpack_exports__,"triggerInput",(function(){return triggerInput}));__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.description.js"),__webpack_require__("./node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("./node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.array.slice.js"),__webpack_require__("./node_modules/core-js/modules/es.function.name.js"),__webpack_require__("./node_modules/core-js/modules/es.array.from.js"),__webpack_require__("./node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js");var react__WEBPACK_IMPORTED_MODULE_15__=__webpack_require__("./node_modules/react/index.js"),react__WEBPACK_IMPORTED_MODULE_15___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_15__),_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__=__webpack_require__("./node_modules/@mdx-js/react/dist/esm.js"),_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_17__=__webpack_require__("./node_modules/@storybook/addon-docs/dist/esm/index.js"),_src__WEBPACK_IMPORTED_MODULE_18__=__webpack_require__("./src/index.ts"),_components_Button__WEBPACK_IMPORTED_MODULE_19__=__webpack_require__("./examples/stories/components/Button.tsx"),_excluded=(__webpack_require__("./examples/stories/rive-overview.css"),["components"]);function _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _slicedToArray(arr,i){return function _arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function _iterableToArrayLimit(arr,i){var _i=null==arr?null:"undefined"!=typeof Symbol&&arr[Symbol.iterator]||arr["@@iterator"];if(null==_i)return;var _s,_e,_arr=[],_n=!0,_d=!1;try{for(_i=_i.call(arr);!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||function _unsupportedIterableToArray(o,minLen){if(!o)return;if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}(arr,i)||function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,_excluded);return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_17__.d,{title:"React Runtime/State Machines",mdxType:"Meta"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("h1",null,"State Machine Usage"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("p",null,"Not familiar with Rive State Machines? Check out our ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("a",{parentName:"p",href:"https://help.rive.app/editor/state-machine"},"help docs")," on what these are first!"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("p",null,"The ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("inlineCode",{parentName:"p"},"useStateMachineInput")," hook is a helper that makes grabbing references to state machine inputs easier to setup. This hook should be used along with the ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("inlineCode",{parentName:"p"},"useRive")," hook, as you need to pass in the ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("inlineCode",{parentName:"p"},"rive")," instance returned from ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("inlineCode",{parentName:"p"},"useRive"),". See each of the examples below to see usage of the hook creating instance of three types of inputs:"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("ul",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("li",{parentName:"ul"},"Booleans"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("li",{parentName:"ul"},"Numbers"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("li",{parentName:"ul"},"Triggers")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("h2",null,"Boolean inputs"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("p",null,"Once you grab a reference to the state machine input, you can get/set the value of the input via the ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("inlineCode",{parentName:"p"},".value")," property."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("p",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("strong",{parentName:"p"},"Note:")," The input instance value itself is not a stateful React variable, therefore, any logic in the component dependent on an input value changing will not trigger a re-render like a React stateful variable change would. You can achieve this effect by keeping reference to the state machine input value inside a React state variable. See the example below for this pattern."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_17__.c,{withSource:"open",mdxType:"Canvas"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_17__.e,{name:"Boolean input",mdxType:"Story"},(function(){var _useRive=Object(_src__WEBPACK_IMPORTED_MODULE_18__.useRive)({src:"like.riv",stateMachines:"State Machine 1",artboard:"New Artboard",autoplay:!0}),rive=_useRive.rive,RiveComponentTouch=_useRive.RiveComponent,_useState2=_slicedToArray(Object(react__WEBPACK_IMPORTED_MODULE_15__.useState)(!1),2),isHovered=_useState2[0],setIsHovered=_useState2[1],onPressedInput=Object(_src__WEBPACK_IMPORTED_MODULE_18__.useStateMachineInput)(rive,"State Machine 1","Pressed"),onHoverInput=Object(_src__WEBPACK_IMPORTED_MODULE_18__.useStateMachineInput)(rive,"State Machine 1","Hover");return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)(react__WEBPACK_IMPORTED_MODULE_15___default.a.Fragment,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("div",{className:"center"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)(RiveComponentTouch,{className:"base-canvas-size",onMouseEnter:function onMouseEnter(){onHoverInput.value=!0,setIsHovered(!0)},onMouseLeave:function onMouseLeave(){onHoverInput.value=!1,setIsHovered(!1)},onMouseDown:function onMouseDown(){onPressedInput.value=!0},onMouseUp:function onMouseUp(){onPressedInput.value=!1},mdxType:"RiveComponentTouch"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("p",null,"Hover and click on the canvas"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("p",null,"Is cursor hovering? ",isHovered?"Yes":"No")))}))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("h2",null,"Number inputs"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("p",null,"Once you grab a reference to the state machine input, you can get/set the value of the input via the ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("inlineCode",{parentName:"p"},".value")," property."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_17__.c,{withSource:"open",mdxType:"Canvas"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_17__.e,{name:"Number input",mdxType:"Story"},(function(){var _useRive2=Object(_src__WEBPACK_IMPORTED_MODULE_18__.useRive)({src:"skills.riv",stateMachines:"State Machine ",artboard:"New Artboard",autoplay:!0}),rive=_useRive2.rive,RiveComponentTouch=_useRive2.RiveComponent,levelInput=Object(_src__WEBPACK_IMPORTED_MODULE_18__.useStateMachineInput)(rive,"State Machine ","Level");return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("div",{className:"center"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)(RiveComponentTouch,{className:"large-canvas-size",mdxType:"RiveComponentTouch"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("div",{className:"btn-group"},"Choose a level:",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)(_components_Button__WEBPACK_IMPORTED_MODULE_19__.a,{onClick:function onClick(){return levelInput.value=0},mdxType:"Button"},"0"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)(_components_Button__WEBPACK_IMPORTED_MODULE_19__.a,{onClick:function onClick(){return levelInput.value=1},mdxType:"Button"},"1"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)(_components_Button__WEBPACK_IMPORTED_MODULE_19__.a,{onClick:function onClick(){return levelInput.value=2},mdxType:"Button"},"2")))}))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("h2",null,"Trigger inputs"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("p",null,"Unlike the boolean and number inputs, you invoke the ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("inlineCode",{parentName:"p"},".fire()")," method on a trigger input."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_17__.c,{withSource:"open",mdxType:"Canvas"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_17__.e,{name:"Trigger input",mdxType:"Story"},(function(){var _useRive3=Object(_src__WEBPACK_IMPORTED_MODULE_18__.useRive)({src:"piggy-bank.riv",stateMachines:"State Machine 1",artboard:"New Artboard",autoplay:!0}),rive=_useRive3.rive,RiveComponentTouch=_useRive3.RiveComponent,pressedInput=Object(_src__WEBPACK_IMPORTED_MODULE_18__.useStateMachineInput)(rive,"State Machine 1","Pressed");return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("div",{className:"center"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)(RiveComponentTouch,{className:"base-canvas-size",onClick:function onClick(){return pressedInput.fire()},mdxType:"RiveComponentTouch"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("p",null,"Click on the canvas"))}))))}MDXContent.displayName="MDXContent",MDXContent.isMDXComponent=!0;var booleanInput=function booleanInput(){var _useRive4=Object(_src__WEBPACK_IMPORTED_MODULE_18__.useRive)({src:"like.riv",stateMachines:"State Machine 1",artboard:"New Artboard",autoplay:!0}),rive=_useRive4.rive,RiveComponentTouch=_useRive4.RiveComponent,_useState4=_slicedToArray(Object(react__WEBPACK_IMPORTED_MODULE_15__.useState)(!1),2),isHovered=_useState4[0],setIsHovered=_useState4[1],onPressedInput=Object(_src__WEBPACK_IMPORTED_MODULE_18__.useStateMachineInput)(rive,"State Machine 1","Pressed"),onHoverInput=Object(_src__WEBPACK_IMPORTED_MODULE_18__.useStateMachineInput)(rive,"State Machine 1","Hover");return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)(react__WEBPACK_IMPORTED_MODULE_15___default.a.Fragment,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("div",{className:"center"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)(RiveComponentTouch,{className:"base-canvas-size",onMouseEnter:function onMouseEnter(){onHoverInput.value=!0,setIsHovered(!0)},onMouseLeave:function onMouseLeave(){onHoverInput.value=!1,setIsHovered(!1)},onMouseDown:function onMouseDown(){onPressedInput.value=!0},onMouseUp:function onMouseUp(){onPressedInput.value=!1}}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("p",null,"Hover and click on the canvas"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("p",null,"Is cursor hovering? ",isHovered?"Yes":"No")))};booleanInput.storyName="Boolean input",booleanInput.parameters={storySource:{source:"() => {\n  const STATE_MACHINE_NAME = 'State Machine 1';\n  const ON_HOVER_INPUT_NAME = 'Hover';\n  const ON_PRESSED_INPUT_NAME = 'Pressed';\n  const {\n    rive,\n    RiveComponent: RiveComponentTouch\n  } = useRive({\n    src: 'like.riv',\n    stateMachines: STATE_MACHINE_NAME,\n    artboard: 'New Artboard',\n    autoplay: true\n  });\n  const [isHovered, setIsHovered] = useState(false); // Both onHoverInput and onPressedInput are boolean inputs. To transition\n  // states we need to set the value property to true or false.\n\n  const onPressedInput = useStateMachineInput(rive, STATE_MACHINE_NAME, ON_PRESSED_INPUT_NAME);\n  const onHoverInput = useStateMachineInput(rive, STATE_MACHINE_NAME, ON_HOVER_INPUT_NAME);\n\n  function onMouseDown() {\n    onPressedInput.value = true;\n  }\n\n  function onMouseUp() {\n    onPressedInput.value = false;\n  }\n\n  function onMouseEnter() {\n    onHoverInput.value = true;\n    setIsHovered(true);\n  }\n\n  function onMouseLeave() {\n    onHoverInput.value = false;\n    setIsHovered(false);\n  }\n\n  return <>\n          <div className=\"center\">\n            <RiveComponentTouch className=\"base-canvas-size\" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} onMouseDown={onMouseDown} onMouseUp={onMouseUp} />\n            <p>Hover and click on the canvas</p>\n            <p>Is cursor hovering? {isHovered ? 'Yes' : 'No'}</p>\n          </div>\n        </>;\n}"}};var numberInput=function numberInput(){var _useRive5=Object(_src__WEBPACK_IMPORTED_MODULE_18__.useRive)({src:"skills.riv",stateMachines:"State Machine ",artboard:"New Artboard",autoplay:!0}),rive=_useRive5.rive,RiveComponentTouch=_useRive5.RiveComponent,levelInput=Object(_src__WEBPACK_IMPORTED_MODULE_18__.useStateMachineInput)(rive,"State Machine ","Level");return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("div",{className:"center"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)(RiveComponentTouch,{className:"large-canvas-size"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("div",{className:"btn-group"},"Choose a level:",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)(_components_Button__WEBPACK_IMPORTED_MODULE_19__.a,{onClick:function onClick(){return levelInput.value=0}},"0"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)(_components_Button__WEBPACK_IMPORTED_MODULE_19__.a,{onClick:function onClick(){return levelInput.value=1}},"1"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)(_components_Button__WEBPACK_IMPORTED_MODULE_19__.a,{onClick:function onClick(){return levelInput.value=2}},"2")))};numberInput.displayName="numberInput",numberInput.storyName="Number input",numberInput.parameters={storySource:{source:"() => {\n  const STATE_MACHINE_NAME = 'State Machine ';\n  const INPUT_NAME = 'Level';\n  const {\n    rive,\n    RiveComponent: RiveComponentTouch\n  } = useRive({\n    src: 'skills.riv',\n    stateMachines: STATE_MACHINE_NAME,\n    artboard: 'New Artboard',\n    autoplay: true\n  }); // levelInput is a number state machine input. To transition the state machine,\n  // we need to set the value to a number. For this state machine input, we need\n  // to set to 0, 1 or 2 for a state transition to occur.\n\n  const levelInput = useStateMachineInput(rive, STATE_MACHINE_NAME, INPUT_NAME);\n  return (// The animation will fit to the parent element, so we set a large height\n    // and width for this example.\n    <div className=\"center\">\n          <RiveComponentTouch className=\"large-canvas-size\" />\n          <div className=\"btn-group\">\n            Choose a level:\n            <Button onClick={() => levelInput.value = 0}>0</Button>\n            <Button onClick={() => levelInput.value = 1}>1</Button>\n            <Button onClick={() => levelInput.value = 2}>2</Button>\n          </div>\n        </div>\n  );\n}"}};var triggerInput=function triggerInput(){var _useRive6=Object(_src__WEBPACK_IMPORTED_MODULE_18__.useRive)({src:"piggy-bank.riv",stateMachines:"State Machine 1",artboard:"New Artboard",autoplay:!0}),rive=_useRive6.rive,RiveComponentTouch=_useRive6.RiveComponent,pressedInput=Object(_src__WEBPACK_IMPORTED_MODULE_18__.useStateMachineInput)(rive,"State Machine 1","Pressed");return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("div",{className:"center"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)(RiveComponentTouch,{className:"base-canvas-size",onClick:function onClick(){return pressedInput.fire()}}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)("p",null,"Click on the canvas"))};triggerInput.displayName="triggerInput",triggerInput.storyName="Trigger input",triggerInput.parameters={storySource:{source:"() => {\n  const STATE_MACHINE_NAME = 'State Machine 1';\n  const INPUT_NAME = 'Pressed';\n  const {\n    rive,\n    RiveComponent: RiveComponentTouch\n  } = useRive({\n    src: 'piggy-bank.riv',\n    stateMachines: STATE_MACHINE_NAME,\n    artboard: 'New Artboard',\n    autoplay: true\n  }); // pressedInput in a trigger state machine input. To transition the state\n  // we need to call the `fire()` method on the input.\n\n  const pressedInput = useStateMachineInput(rive, STATE_MACHINE_NAME, INPUT_NAME); // The animation will fit to the parent element, so we set a large height\n  // and width for this example.\n\n  return <div className=\"center\">\n          <RiveComponentTouch className=\"base-canvas-size\" onClick={() => pressedInput.fire()} />\n          <p>Click on the canvas</p>\n        </div>;\n}"}};var componentMeta={title:"React Runtime/State Machines",includeStories:["booleanInput","numberInput","triggerInput"]},mdxStoryNameToKey={"Boolean input":"booleanInput","Number input":"numberInput","Trigger input":"triggerInput"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_17__.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_16__.b)(MDXContent,null))}}),__webpack_exports__.default=componentMeta},"./examples/stories/components/Button.tsx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return Button}));__webpack_require__("./node_modules/react/index.js");var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/react/jsx-runtime.js"),Button=function Button(_ref){var onClick=_ref.onClick,children=_ref.children;return Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("button",{className:"btn",onClick:onClick,children:children})};Button.displayName="Button";try{Button.displayName="Button",Button.__docgenInfo={description:"",displayName:"Button",props:{onClick:{defaultValue:null,description:"",name:"onClick",required:!0,type:{name:"any"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["examples/stories/components/Button.tsx#Button"]={docgenInfo:Button.__docgenInfo,name:"Button",path:"examples/stories/components/Button.tsx#Button"})}catch(__react_docgen_typescript_loader_error){}},"./examples/stories/rive-overview.css":function(module,exports,__webpack_require__){var api=__webpack_require__("./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),content=__webpack_require__("./node_modules/css-loader/dist/cjs.js?!./node_modules/postcss-loader/dist/cjs.js?!./examples/stories/rive-overview.css");"string"==typeof(content=content.__esModule?content.default:content)&&(content=[[module.i,content,""]]);var options={insert:"head",singleton:!1};api(content,options);module.exports=content.locals||{}},"./generated-stories-entry.js":function(module,exports,__webpack_require__){"use strict";(function(module){(0,__webpack_require__("./node_modules/@storybook/react/dist/esm/client/index.js").configure)([__webpack_require__("./examples/stories sync ^\\.[\\\\/](?:(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"),__webpack_require__("./examples/stories sync ^\\.[\\\\/](?:(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$")],module,!1)}).call(this,__webpack_require__("./node_modules/webpack/buildin/module.js")(module))},"./node_modules/css-loader/dist/cjs.js?!./node_modules/postcss-loader/dist/cjs.js?!./examples/stories/rive-overview.css":function(module,exports,__webpack_require__){(exports=__webpack_require__("./node_modules/css-loader/dist/runtime/api.js")(!1)).push([module.i,".center {\n  display: flex;\n  align-content: center;\n  flex-direction: column;\n  flex-wrap: wrap;\n}\n\n.base-canvas-size {\n  height: 300px;\n  width: 300px;\n}\n\n.large-canvas-size {\n  height: 600px;\n  width: 600px;\n}\n\n.btn {\n  text-decoration: none;\n  border: none;\n  background: #0069ed;\n  border-radius: 2px;\n  height: 32px;\n  margin-top: 16px;\n  color: #ffffff;\n  cursor: pointer;\n}\n\n.btn-group .btn {\n  margin-left: 8px;\n}\n\n.rive-logo {\n  display: flex;\n  margin: 16px auto;\n}\n",""]),module.exports=exports},"./src/components/Rive.tsx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("./node_modules/react/index.js");var _hooks_useRive__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./src/hooks/useRive.tsx"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["src","artboard","animations","stateMachines","layout","useOffscreenRenderer"];function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var Rive=function Rive(_ref){var src=_ref.src,artboard=_ref.artboard,animations=_ref.animations,stateMachines=_ref.stateMachines,layout=_ref.layout,_ref$useOffscreenRend=_ref.useOffscreenRenderer,useOffscreenRenderer=void 0===_ref$useOffscreenRend||_ref$useOffscreenRend,rest=_objectWithoutProperties(_ref,_excluded),params={src:src,artboard:artboard,animations:animations,layout:layout,stateMachines:stateMachines,autoplay:!0},options={useOffscreenRenderer:useOffscreenRenderer},RiveComponent=Object(_hooks_useRive__WEBPACK_IMPORTED_MODULE_5__.a)(params,options).RiveComponent;return Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(RiveComponent,Object.assign({},rest))};Rive.displayName="Rive",__webpack_exports__.a=Rive;try{Rive.displayName="Rive",Rive.__docgenInfo={description:"",displayName:"Rive",props:{src:{defaultValue:null,description:"URL of the Rive asset, or path to where the public asset is stored.",name:"src",required:!0,type:{name:"string"}},artboard:{defaultValue:null,description:"Artboard to render from the Rive asset.\nDefaults to the first artboard created.",name:"artboard",required:!1,type:{name:"string"}},animations:{defaultValue:null,description:"Specify a starting animation to play.",name:"animations",required:!1,type:{name:"string | string[]"}},stateMachines:{defaultValue:null,description:"Specify a starting state machine to play.",name:"stateMachines",required:!1,type:{name:"string | string[]"}},layout:{defaultValue:null,description:"Specify a starting Layout object to set Fill and Alignment for the drawing surface. See docs at https://help.rive.app/runtimes/layout for more on layout configuration.",name:"layout",required:!1,type:{name:"Layout"}},useOffscreenRenderer:{defaultValue:{value:"true"},description:"For `@rive-app/react-webgl`, sets this property to maintain a single WebGL context for multiple canvases. **We recommend to keep the default value** when rendering multiple Rive instances on a page.",name:"useOffscreenRenderer",required:!1,type:{name:"boolean"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Rive.tsx#Rive"]={docgenInfo:Rive.__docgenInfo,name:"Rive",path:"src/components/Rive.tsx#Rive"})}catch(__react_docgen_typescript_loader_error){}},"./src/hooks/useRive.tsx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return useRive}));__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.description.js"),__webpack_require__("./node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("./node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.array.slice.js"),__webpack_require__("./node_modules/core-js/modules/es.function.name.js"),__webpack_require__("./node_modules/core-js/modules/es.array.from.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js");var react=__webpack_require__("./node_modules/react/index.js"),canvas_rive=__webpack_require__("./node_modules/@rive-app/canvas/rive.js");function _slicedToArray(arr,i){return function _arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function _iterableToArrayLimit(arr,i){var _i=null==arr?null:"undefined"!=typeof Symbol&&arr[Symbol.iterator]||arr["@@iterator"];if(null==_i)return;var _s,_e,_arr=[],_n=!0,_d=!1;try{for(_i=_i.call(arr);!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||function _unsupportedIterableToArray(o,minLen){if(!o)return;if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}(arr,i)||function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2}function useWindowSize(){var _useState2=_slicedToArray(Object(react.useState)({width:0,height:0}),2),windowSize=_useState2[0],setWindowSize=_useState2[1];return Object(react.useEffect)((function(){if("undefined"!=typeof window){var handleResize=function handleResize(){setWindowSize({width:window.innerWidth,height:window.innerHeight})};return window.addEventListener("resize",handleResize),handleResize(),function(){return window.removeEventListener("resize",handleResize)}}}),[]),windowSize}var jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["setContainerRef","setCanvasRef","className","style"];function useRive_slicedToArray(arr,i){return function useRive_arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function useRive_iterableToArrayLimit(arr,i){var _i=null==arr?null:"undefined"!=typeof Symbol&&arr[Symbol.iterator]||arr["@@iterator"];if(null==_i)return;var _s,_e,_arr=[],_n=!0,_d=!1;try{for(_i=_i.call(arr);!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||function useRive_unsupportedIterableToArray(o,minLen){if(!o)return;if("string"==typeof o)return useRive_arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return useRive_arrayLikeToArray(o,minLen)}(arr,i)||function useRive_nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function useRive_arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}function RiveComponent(_ref){var setContainerRef=_ref.setContainerRef,setCanvasRef=_ref.setCanvasRef,_ref$className=_ref.className,className=void 0===_ref$className?"":_ref$className,style=_ref.style,rest=_objectWithoutProperties(_ref,_excluded),containerStyle=Object.assign({width:"100%",height:"100%"},style);return Object(jsx_runtime.jsx)("div",Object.assign({ref:setContainerRef,className:className},!className&&{style:containerStyle},{children:Object(jsx_runtime.jsx)("canvas",Object.assign({ref:setCanvasRef,style:{verticalAlign:"top"}},rest))}))}RiveComponent.displayName="RiveComponent";var defaultOptions={useDevicePixelRatio:!0,fitCanvasToArtboardHeight:!1,useOffscreenRenderer:!0};function getOptions(opts){return Object.assign({},defaultOptions,opts)}function useRive(riveParams){var opts=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},canvasRef=Object(react.useRef)(null),containerRef=Object(react.useRef)(null),_useState=Object(react.useState)(null),_useState2=useRive_slicedToArray(_useState,2),rive=_useState2[0],setRive=_useState2[1],_useState3=Object(react.useState)({height:0,width:0}),_useState4=useRive_slicedToArray(_useState3,2),dimensions=_useState4[0],setDimensions=_useState4[1],windowSize=useWindowSize(),isParamsLoaded=Boolean(riveParams),options=getOptions(opts);function getCanvasDimensions(){var _containerRef$current,_containerRef$current2,_ref2=null!==(_containerRef$current=null===(_containerRef$current2=containerRef.current)||void 0===_containerRef$current2?void 0:_containerRef$current2.getBoundingClientRect())&&void 0!==_containerRef$current?_containerRef$current:new DOMRect(0,0,0,0),width=_ref2.width,height=_ref2.height;if(rive&&options.fitCanvasToArtboardHeight){var _rive$bounds=rive.bounds;return{width:width,height:width*(_rive$bounds.maxY/_rive$bounds.maxX)}}return{width:width,height:height}}function updateBounds(){if(containerRef.current){var _getCanvasDimensions=getCanvasDimensions(),width=_getCanvasDimensions.width,height=_getCanvasDimensions.height,boundsChanged=width!==dimensions.width||height!==dimensions.height;if(canvasRef.current&&rive&&boundsChanged){if(options.fitCanvasToArtboardHeight&&(containerRef.current.style.height=height+"px"),options.useDevicePixelRatio){var dpr=window.devicePixelRatio||1;canvasRef.current.width=dpr*width,canvasRef.current.height=dpr*height,canvasRef.current.style.width=width+"px",canvasRef.current.style.height=height+"px"}else canvasRef.current.width=width,canvasRef.current.height=height;setDimensions({width:width,height:height}),rive.startRendering()}rive&&rive.resizeToCanvas()}}Object(react.useEffect)((function(){rive&&updateBounds()}),[rive,windowSize]);var setCanvasRef=Object(react.useCallback)((function(canvas){if(canvas&&riveParams){var useOffscreenRenderer=options.useOffscreenRenderer,r=new canvas_rive.Rive(Object.assign({useOffscreenRenderer:useOffscreenRenderer},riveParams,{canvas:canvas}));r.on(canvas_rive.EventType.Load,(function(){return setRive(r)}))}else null===canvas&&canvasRef.current&&(canvasRef.current.height=0,canvasRef.current.width=0);canvasRef.current=canvas}),[isParamsLoaded]),setContainerRef=Object(react.useCallback)((function(container){containerRef.current=container}),[]);Object(react.useEffect)((function(){var observer=new IntersectionObserver((function(_ref3){useRive_slicedToArray(_ref3,1)[0].isIntersecting?rive&&rive.startRendering():rive&&rive.stopRendering()}));return canvasRef.current&&observer.observe(canvasRef.current),function(){observer.disconnect()}}),[rive]),Object(react.useEffect)((function(){return function(){rive&&(rive.stop(),setRive(null))}}),[rive]);var animations=null==riveParams?void 0:riveParams.animations;Object(react.useEffect)((function(){rive&&animations&&(rive.isPlaying?(rive.stop(rive.animationNames),rive.play(animations)):rive.isPaused&&(rive.stop(rive.animationNames),rive.pause(animations)))}),[animations,rive]);var Component=Object(react.useCallback)((function(props){return Object(jsx_runtime.jsx)(RiveComponent,Object.assign({setContainerRef:setContainerRef,setCanvasRef:setCanvasRef},props))}),[]);return{canvas:canvasRef.current,setCanvasRef:setCanvasRef,setContainerRef:setContainerRef,rive:rive,RiveComponent:Component}}try{useRive.displayName="useRive",useRive.__docgenInfo={description:"Custom Hook for loading a Rive file.\n\nWaits until the load event has fired before returning it.\nWe can then listen for changes to this animation in other hooks to detect\nwhen it has loaded.",displayName:"useRive",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/hooks/useRive.tsx#useRive"]={docgenInfo:useRive.__docgenInfo,name:"useRive",path:"src/hooks/useRive.tsx#useRive"})}catch(__react_docgen_typescript_loader_error){}},"./src/hooks/useStateMachineInput.ts":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return useStateMachineInput}));__webpack_require__("./node_modules/core-js/modules/es.array.find.js"),__webpack_require__("./node_modules/core-js/modules/es.function.name.js"),__webpack_require__("./node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.description.js"),__webpack_require__("./node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("./node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.array.slice.js"),__webpack_require__("./node_modules/core-js/modules/es.array.from.js");var react__WEBPACK_IMPORTED_MODULE_12__=__webpack_require__("./node_modules/react/index.js");function _slicedToArray(arr,i){return function _arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function _iterableToArrayLimit(arr,i){var _i=null==arr?null:"undefined"!=typeof Symbol&&arr[Symbol.iterator]||arr["@@iterator"];if(null==_i)return;var _s,_e,_arr=[],_n=!0,_d=!1;try{for(_i=_i.call(arr);!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||function _unsupportedIterableToArray(o,minLen){if(!o)return;if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}(arr,i)||function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2}function useStateMachineInput(rive,stateMachineName,inputName,initialValue){var _useState2=_slicedToArray(Object(react__WEBPACK_IMPORTED_MODULE_12__.useState)(null),2),input=_useState2[0],setInput=_useState2[1];return Object(react__WEBPACK_IMPORTED_MODULE_12__.useEffect)((function(){if(rive&&stateMachineName&&inputName||setInput(null),rive&&stateMachineName&&inputName){var inputs=rive.stateMachineInputs(stateMachineName);if(inputs){var selectedInput=inputs.find((function(input){return input.name===inputName}));void 0!==initialValue&&selectedInput&&(selectedInput.value=initialValue),setInput(selectedInput||null)}}else setInput(null)}),[rive]),input}},"./src/index.ts":function(module,__webpack_exports__,__webpack_require__){"use strict";var _components_Rive__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/components/Rive.tsx"),_hooks_useRive__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/hooks/useRive.tsx");__webpack_require__.d(__webpack_exports__,"useRive",(function(){return _hooks_useRive__WEBPACK_IMPORTED_MODULE_1__.a}));var _hooks_useStateMachineInput__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/hooks/useStateMachineInput.ts");__webpack_require__.d(__webpack_exports__,"useStateMachineInput",(function(){return _hooks_useStateMachineInput__WEBPACK_IMPORTED_MODULE_2__.a}));__webpack_require__("./src/types.ts"),__webpack_require__("./node_modules/@rive-app/canvas/rive.js");__webpack_exports__.default=_components_Rive__WEBPACK_IMPORTED_MODULE_0__.a},"./src/types.ts":function(module,__webpack_exports__,__webpack_require__){},"./storybook-init-framework-entry.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);__webpack_require__("./node_modules/@storybook/react/dist/esm/client/index.js")},0:function(module,exports,__webpack_require__){__webpack_require__("./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js"),__webpack_require__("./node_modules/@storybook/core-client/dist/esm/globals/globals.js"),__webpack_require__("./storybook-init-framework-entry.js"),__webpack_require__("./node_modules/@storybook/react/dist/esm/client/docs/config-generated-config-entry.js"),__webpack_require__("./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js"),__webpack_require__("./node_modules/@storybook/addon-links/preview.js-generated-config-entry.js"),__webpack_require__("./node_modules/@storybook/addon-docs/preview.js-generated-config-entry.js"),__webpack_require__("./node_modules/@storybook/addon-actions/preview.js-generated-config-entry.js"),__webpack_require__("./node_modules/@storybook/addon-backgrounds/preview.js-generated-config-entry.js"),__webpack_require__("./node_modules/@storybook/addon-measure/preview.js-generated-config-entry.js"),__webpack_require__("./node_modules/@storybook/addon-outline/preview.js-generated-config-entry.js"),__webpack_require__("./node_modules/@storybook/addon-interactions/preview.js-generated-config-entry.js"),__webpack_require__("./.storybook/preview.js-generated-config-entry.js"),module.exports=__webpack_require__("./generated-stories-entry.js")},1:function(module,exports){},2:function(module,exports){},3:function(module,exports){}},[[0,4,5]]]);