@wranggle/snapped-page-react

@wranggle/snapped-page-react offers a React hook and component to help communicate with the PuppySnap service while it creates video animation frames from your javascript animations.

Typically the PuppySnap service runs as part of some grander workflow. (Eg, updating a dashboard; burning a bottom-third intro onto a video; a user sharing a gif for lolz; etc)

The RenderForPuppySnap component handles the start-recording signal for you and it signals job failure should the component throw an error. When PuppySnap is not present, it gets out of the way, immediately rendering what's passed in so the component can be viewed as normal in a browser.

The usePuppySnap React hook offers your components some info and callbacks. Most notably, it returns two important items: stopPuppySnapRecording and animationPageData, discussed below.

Additional docs in @wranggle/snapped-page

Installation

npm i --save @wranggle/snapped-page-react

# or

yarn add @wranggle/snapped-page-react

Recording animations

Let's pretend you have a React component called BouncingBox with props of { textLine: string, onAnimationComplete: () => void; bounceCount?: number }. This example assumes the "onAnimationComplete" prop is applied to whichever animation lib it uses under the hood.

To record your animation, you place it inside the RenderForPuppySnap component:

import { RenderForPuppySnap, usePuppySnap } from "@wranggle/snapped-page-react";

function MyApp() {
  const { animationPageData, stopPuppySnapRecording } = usePuppySnap();
  const bouncingBoxProps = { 
    ...animationPageData,
    onAnimationComplete: () => stopPuppySnapRecording(), // important! PuppySnap needs to know when to stop recording.   
  }; 
  
  return <RenderForPuppySnap>
    <BouncingBox { ...bouncingBoxProps } />    
  </RenderForPuppySnap>
}

Important

• stopPuppySnapRecording is a callback provided by the usePuppySnap hook. It tells the PuppySnap service to stop recording. Most animation libs will offer some on-completion callback. It's important to use, otherwise recording will continue until an unpleasant timeout or size limit is hit. Each animation library/component is different--find what callback they use and set it.

• See also the "Important Considerations" section in the core lib.

animationPageData

The data/props you need to render your animation components, such as the text to be animated, user color/style preferences, etc. Since the PuppySnap service is not present during development, when you're working on your animated React component in a regular browser, you need some other ways to set it. See core lib's animationPageData section

Additional Info

Some advanced options on the helper are passed along by the hook, as is the helper itself. Some config settings can be set the first time the hook is used, eg resolvePageData: usePuppySnap({ resolvePageData: myPageDataCallback })

The<ErrorBoundaryReportingFailure> component is used by the <RenderForPuppySnap> component but can be used independently should you decide to use the more granular resolveAnimationPageData and startPuppySnapRecording callbacks.