https://github.com/marko-js/rive
A wrapper around `@rive/canvas-lite` for Marko
https://github.com/marko-js/rive
Last synced: 12 months ago
JSON representation
A wrapper around `@rive/canvas-lite` for Marko
- Host: GitHub
- URL: https://github.com/marko-js/rive
- Owner: marko-js
- License: mit
- Created: 2024-11-19T22:16:35.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-26T20:23:41.000Z (over 1 year ago)
- Last Synced: 2025-03-23T13:01:54.895Z (about 1 year ago)
- Language: TypeScript
- Homepage: https://markojs.com/rive
- Size: 2.42 MB
- Stars: 0
- Watchers: 6
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Marko Rive
A wrapper around the `@rive/canvas-lite` package that provides a Marko component for rendering [Rive](https://rive.app/) animations.
## Installation
```bash
npm install @marko-tags/rive
yarn add @marko-tags/rive
```
## Usage
### Marko 6 (Tags API)
```marko
import riveAsset from "./path/to/asset.riv";
riveInstance().play();
```
### Marko 5 (Class API)
```marko
import riveAsset from "./path/to/asset.riv";
import type { Rive } from "@rive-app/canvas-lite";
class {
declare riveInstance: Rive;
handleMounted(instance: Rive) {
this.riveInstance = instance;
this.riveInstance.play();
}
}
```
## Preloading the Rive Runtime
By default, the Rive runtime is loaded asynchronously when the component is mounted. This is harmful for performance, especially for assets which are visible on page load. To preload the runtime, be sure that you add this tag to the `` of each document that uses Rive assets:
```marko
```