https://github.com/wooloo26/rexie
⚡ 3kB React-like for PixiJS: Sync/Concurrent rendering, full PixiJS API access
https://github.com/wooloo26/rexie
canvas framework hook javascript jsx pixi react renderer vdom webgl
Last synced: about 2 months ago
JSON representation
⚡ 3kB React-like for PixiJS: Sync/Concurrent rendering, full PixiJS API access
- Host: GitHub
- URL: https://github.com/wooloo26/rexie
- Owner: wooloo26
- License: mit
- Created: 2025-03-10T11:41:22.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2025-03-18T10:30:19.000Z (about 2 months ago)
- Last Synced: 2025-03-18T11:35:49.445Z (about 2 months ago)
- Topics: canvas, framework, hook, javascript, jsx, pixi, react, renderer, vdom, webgl
- Language: TypeScript
- Homepage:
- Size: 496 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Rexie
PixiJS | React Hooks | 3kB
## Features
### Development
- **React Hooks** - `useState`, `useEffect`...`useTransition`, `useSyncExternalStore`
- **Component-Based** - Native JSX/TSX support with full type system
- **Focus on Core Logic** - Dedicate to core logic while Rexie handles tedious drawing routines
- **Sync/Concurrent** - Choose your update strategy per render
### Feather-Light
- **3kB Core** - No heavyweight runtime or syntax sugar, simplicity first
- **Zero Dependencies** - Only depends on PixiJS core
- **Direct API Access** - Full exposure of native PixiJS APIs
- **On-Demand Rendering** - Independent multi-instance rendering, mountable to any container, disposable anytime
### Beyond PixiJS
- **Renderer Agnostic** - Create new renderers with <100 lines of code
- **Framework Integration** - Built for seamless embedding in React/Vue/etc
- **Universal Core** - Platform-agnostic core with browser/Canvas/WebGL extensions
## Quick Start
alpha
```tsx
import * as PIXI from 'pixi.js'
import { h, render, createContext } from 'rexie'
import App from './App'
const app = new PIXI.Application()
export const AppContext = createContext(app)
async function mount() {
const container = new PIXI.Container()
render(
,
container,
)
app.stage.addChild(container)
await app.init({ background: '#ffffff', resizeTo: document.body })
document.body.appendChild(app.canvas)
}
mount()
```
## Hooks API
### No/Minor Differences
`useState`, `useReducer`, `useEffect`, `useLayoutEffect`, `useCallback`, `useRef`, `useMemo`, `useContext`, `useImperativeHandle`, `useSyncExternalStore`
### Differences
`useTransition`: After the `startTransition` task completes, `isPending` will be updated after the nearest UI render update. If there is no rendering task, it updates immediately.
## FAQ
### Textures
Textures will not be automatically destroyed. You need to manually manage their lifecycle.
### About the `options` Property
Corresponds to the constructor's `options`. This property is only set during initialization and will not update with any subsequent changes.
```ts
// equivalent to
const text = new PIXI.Text(textStyle)
text.width = 200
```
### Handling a Massive Number of `ViewContainer`
If there is a need to create thousands or even more `ViewContainer`, the performance of virtual DOM will be extremely poor. Compared to `react-dom`, it is more prone to stack overflow due to the deeper function call chains in PixiJS's API. Although `rexie` can adopt queue-based updates like Preact, the performance will still be severely degraded. Therefore, it is recommended to use `useRef` to obtain a `Container` reference and manually `addChild` `ViewContainer`. When the component unmounts, these `ViewContainer` will still be automatically destroyed, so no manual cleanup is required.
### Order of Props
Some setters in PixiJS have execution order dependencies. Props with non-positive-integer keys are traversed in creation order, refer to [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in#description).
```ts
// 1. When text is set before width or placed in constructor options, width affect text
// 2. When width is set before text, width won't affect text
{text}
```