Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/twlite/canvaui
A server side framework for creating images with React
https://github.com/twlite/canvaui
Last synced: 16 days ago
JSON representation
A server side framework for creating images with React
- Host: GitHub
- URL: https://github.com/twlite/canvaui
- Owner: twlite
- License: mit
- Created: 2024-06-08T16:04:53.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-09-15T08:22:34.000Z (about 2 months ago)
- Last Synced: 2024-10-12T20:08:07.738Z (about 1 month ago)
- Language: TypeScript
- Homepage: https://npm.im/canvaui
- Size: 92.8 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# CanvaUI
A server side framework for creating images with React. It is built on top of [satori](https://github.com/vercel/satori) and supports React hooks, allowing you to create complex images with ease.
> **Note:** This project is still in development and is not ready for production use.
## Todo
- Render to `CanvasRenderingContext2D`
## Installation
```bash
npm install canvaui
```
## Usage
### The component
```jsx
import React, { useEffect } from 'react';
import { useDocument, View, Text, Heading } from 'canvaui';
function Component() {
const document = useDocument();
useEffect(() => {
console.log(document.toString()); //
...
document.close(); // close the document
}, []);
return (
Ready to dive in?
Start your free trial today.
Get started
Learn more
);
}
```
### The renderer
Snapshots are frames that are captured when there is a change in the document.
```jsx
import { createDocument, renderToSvgString } from 'canvaui';
// create a new document
const width = 800;
const height = 400;
const { document, render } = createDocument(width, height);
// 👂 Listen to close event
document.onClose = async () => {
// get all frames that are not empty
const frames = document.getSnapshots().filter((frame) => !frame.isEmpty());
// render the document to svg string
const svg = await renderToSvgString(frames, {
// at least one font is required to render text
fonts: [
{
name: 'FontName',
data: FontBuffer,
},
],
// embed fonts in the svg
embedFont: true,
});
// do something with the generated svg
console.log(svg); // { svg: ..., id: 1, delay: 0, width: 300, height: 300 }
};
// render the component to the document
render();
```
#### Resulting SVG
## The `useDocument` hook
The `useDocument` hook is used to get the current CanvaUI document. This hook only works inside the component. However, this hook can be used conditionally.
```jsx
import { useDocument } from 'canvaui';
// get the current document
const document = useDocument();
```
## Using Timers
Usage of timers inside the component does work, however it takes time to render the document. CanvaUI provides custom timers that can be used to delay the rendering of the document. When using CanvaUI timers, the timers will be executed immediately without any delay while saving the delay metadata in the snapshots. These snapshots can be processed later to render the document with the correct delays.
The timer functions can only be used inside the component. Attempting to use them outside the component will result in an error. This behavior is similar to the react hooks, however you can use it conditionally.
```jsx
import { setTimeout, setInterval, clearTimeout, clearInterval } from 'canvaui';
// schedule an interval
const interval = setInterval(() => {
console.log('Hello, World!');
}, 1000);
// clear the interval
clearInterval(interval);
// schedule a timeout
const timeout = setTimeout(() => {
console.log('Hello, World!');
}, 1000);
// clear the timeout
clearTimeout(timeout);
```