https://github.com/tootallnate/react-tela

Use React to render images, shapes and text to `<canvas>`
https://github.com/tootallnate/react-tela

Last synced: 4 days ago
JSON representation

Use React to render images, shapes and text to `<canvas>`

• Host: GitHub
• URL: https://github.com/tootallnate/react-tela
• Owner: TooTallNate
• License: mit
• Created: 2023-12-05T10:02:04.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-11-20T07:42:17.000Z (about 1 month ago)
• Last Synced: 2024-12-10T14:06:36.533Z (16 days ago)
• Language: TypeScript
• Homepage:
• Size: 1.92 MB
• Stars: 20
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-tela

### Use React to render images, shapes and text to ``

> [!WARNING]

> This package is currently under development. Expect breaking changes.

`react-tela` is a React renderer that draws components to a `` node.

### Features

-   **Low-level**

    -   The base components expose only the main Canvas primitives (images, shapes and text)

    -   Leverage the power of React to create high-level abstractions over the base components

-   **Unopinionated about runtime environment**

    -   Works in web browsers, Node.js, but was specifically created for [nx.js](https://github.com/TooTallNate/nx.js)

    -   Never makes assumptions about anything "outside" of the provided canvas node

## Example

```tsx

// App.jsx

import React from "react";

import { Group, Rect, Text, useDimensions } from "react-tela";

function Contents() {

    const dims = useDimensions();

    return <>

        

        

            Hello world!

        

    >;

}

export function App() {

	return (

		

            

		

	);

}

```

![](./assets/example.png)

### In web browser

```tsx

import React from "react";

import { render } from "react-tela/render";

import { App } from "./App";

render(, document.getElementById("canvas"));

```

### In nx.js

```tsx

import React from "react";

import { render } from "react-tela/render";

import { App } from "./App";

render(, screen);

```

### In Node.js

```tsx

import React from "react";

import { render } from "react-tela/render";

import config, { Canvas } from "@napi-rs/canvas";

import { App } from "./App";

const canvas = new Canvas(300, 150);

await render(, canvas, config);

const buffer = canvas.toBuffer("image/png");

// … do something with PNG `buffer`

```

## What is "tela"? 🇧🇷

The word "tela" is the Portuguese word for "canvas" or "screen".

> **tela** > [ˈtɛla] (feminine noun)

>

> 1. (_de pintar_) canvas

> 2. (_cinema_, _telecommunications_) screen

Since the name `react-canvas` was already taken, using `react-tela` was a fun alternative.

## Prior Art

A few other React renderes for `` alreay exist, so why another?

`react-tela` is designed to make as little assumptions about the runtime environment as possible. Others renderers assume they are running in a web browser, or possibly Node.js. This module only interacts with the canvas node it is provided, and never makes any assumptions about anything "outside" of the node.

-   [`react-art`](https://www.npmjs.com/package/react-art)

    -   Nice because it would appear to be an official solution. The code is located in the react monorepo itself.

    -   However documentation and examples are basically non-existent, and this does not seem to be actively maintained.

-   [`react-canvas`](https://www.npmjs.com/package/react-canvas)

    -   Perfect name. Nice API. Probably one of the original React `` implementations.

    -   Has not been updated in years, and is not currently maintained.

-   [`react-konva`](https://www.npmjs.com/package/react-konva)

    -   Awesome and very mature. Would love to have just been able to use this.

    -   It relies on `react-dom`, which is pretty large, and makes the assumption that a DOM is actually available.