https://github.com/cdaein/ssam-react

Use Ssam.js creative coding sketches in a React application
https://github.com/cdaein/ssam-react

canvas create-ssam creative-coding react ssam

Last synced: 22 days ago
JSON representation

Use Ssam.js creative coding sketches in a React application

• Host: GitHub
• URL: https://github.com/cdaein/ssam-react
• Owner: cdaein
• License: mit
• Created: 2024-05-20T23:35:17.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-05-21T02:01:00.000Z (6 months ago)
• Last Synced: 2024-05-22T02:10:36.306Z (6 months ago)
• Topics: canvas, create-ssam, creative-coding, react, ssam
• Language: TypeScript
• Homepage:
• Size: 67.4 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ssam-react

Use [Ssam.js](https://github.com/cdaein/ssam) sketch in React apps.

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

## Installation

```sh

npm i ssam-react

```

## How-to

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

```ts

// sketch.ts

export const sketch: Sketch<"2d"> = ({ wrap, context }) => {

  wrap.render = ({ width, height }) => {

    // ...

  };

};

export const settings: SketchSettings = {

  duration: 6_000,

  // ...

};

```

In your React app, import `` component and pass the `sketch` and `settings` props:

```jsx

// App.tsx

import SsamReact from "ssam-react";

import { sketch, settings } from "./sketch";

export function default App() {

  return (

    <>

      

      

    <>

  )

}

```

## 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