https://github.com/amilajack/react-skia-fiber

A React renderer for Skia
https://github.com/amilajack/react-skia-fiber

Last synced: 4 days ago
JSON representation

A React renderer for Skia

• Host: GitHub
• URL: https://github.com/amilajack/react-skia-fiber
• Owner: amilajack
• Created: 2021-04-17T04:01:01.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2023-02-25T01:44:34.000Z (over 1 year ago)
• Last Synced: 2024-04-14T07:52:04.512Z (2 months ago)
• Language: TypeScript
• Homepage:
• Size: 1.94 MB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Lists

• awesome-react-renderer - react-skia-fiber - Insanely fast 2d graphics using Skia. (Web (+ NW & Electron))

README

        
# react-skia-fiber

A React renderer for Skia

## Setup

```bash

npm install react-skia-fiber

```

## Usage

```tsx

import React, { useEffect, useState } from "react";

import { SkParagraph } from "react-skia-fiber";

export default function App() {

  const paragraphRef = React.useRef();

  const [color, setColor] = useState("red");

  useEffect(() => {

    let colors = ["red", "green", "blue"];

    let i = 0;

    let interval = setInterval(() => {

      i++;

      setColor(colors[i % 3]);

    }, 1_000);

    return () => clearInterval(interval);

  }, []);

  return (

    

      

      

    

  );

}

```

## Roadmap

- [ ] Font Size

- [ ] Paint Ownership

- [ ] Animation (integration w/ [react-spring](https://github.com/pmndrs/react-spring))

- [ ] Event Binding (``)

- [ ] Full SVG support (ex. ``)

## Docs

- **SkSurface**, which is an object that manages the memory into which the canvas commands are drawn.

- **SkCanvas** is the drawing context for Skia. It knows where to direct the drawing. and maintains a stack of matrices and clips.Skia does not store any other drawing attributes in the context (e.g. color, pen size). Rather, these are specified explicitly in each draw call, via a SkPaint.

- **SkPaint**: Anytime you draw something in Skia, and want to specify what color it is, or how it blends with the background, or what style or font to draw it in, you specify those attributes in a paint.

## Paint Ownership

react-skia-fiber objects can own their own paints:

```tsx

```

If paints are passed as props they no longer own their paints. Deallocation of borrowed paints is owned by the environment that initialized the paints.

```tsx

```

## Demos

```bash

yarn parcel demos/moving-rects/index.html

yarn parcel demos/circular-moving-rects/index.html

```