ssam-react

Use Ssam.js sketch in React apps.

⚠️ This is an early version. If you find any issues, please report using the Issues tab.

Installation

npm i ssam-react

How-to

Write a Ssam.js sketch as usual and export both sketch and settings:

// sketch.tsexportconstsketch: Sketch<"2d">=({ wrap, context })=>{wrap.render=({ width, height })=>{// ...};};exportconstsettings: SketchSettings={duration: 6_000,// ...};

In your React app, import <SsamReact> component and pass the sketch and settings props:

// App.tsximportSsamReactfrom"ssam-react";import{sketch,settings}from"./sketch";exportfunctiondefaultApp(){return(<><OtherStuff/><SsamReactsketch={sketch}settings={settings}/><>
)
}

Notes

• When settings.dimensions is not set (undefined), Ssam will use scale to its parent element's width and height. Make sure to set the width and height of the parent element.
• If you want the fixed size Ssam canvas, set settings.scaleToParent to false.
• Known issue: Even with clean up, event listeners are registered twice in React.Strict (is that normal?).

License

MIT