Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -66,11 +66,11 @@ The basic scope naming convention for the runtimes is to use the root directory

## Previews

Rive's documentation is powered by [Mintlify](https://mintlify.com). You can preview your changes [locally](https://mintlify.com/docs/development), or via a preview link after creating a pull request.
Rive's documentation is powered by [Mintlify](https://mintlify.com). You can preview your changes [locally](https://www.mintlify.com/docs/quickstart#make-your-first-change), or via a preview link after creating a pull request.

### Local Previews

See Mintlify's official documentation on [Local Development](https://mintlify.com/docs/development) for more information on how to preview changes locally.
See Mintlify's official documentation on [Local Development](https://www.mintlify.com/docs/quickstart#make-your-first-change) for more information on how to preview changes locally.

When previewing locally, make sure to run `mintlify broken-links` before creating your pull request to verify that there are no broken links.

Expand Down
22 changes: 22 additions & 0 deletions runtimes/web/data-binding.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,28 @@ const r = new rive.Rive({
});
```

### Get View Model from Instance

When working with view model instances, you may want to get a reference to the view model the instance came from so you can dynamically create more instances of the same type (i.e. creating instances from lists).
To do so, first grab the name of the view model the instance came from via the `.viewModelName` property:
```ts
const vmi = r.viewModelInstance;
const vmName = vmi.viewModelName;
```

Then, once you have the name, you can get a reference to the view model itself and create instances as needed.
```ts
const vmi = r.viewModelInstance;
const mainListProp = vmi.list("todos") as ViewModelInstanceList;
const vmName = mainListProp.instanceAt(0)?.viewModelName;

const itemVmReference = r.viewModelByName(vmName);
const instanceCopies = [];
for (let i = 0; i < 10; i++) {
instanceCopies.push(itemVmReference.defaultInstance());
}
```

<Properties />

<ListingProperties />
Expand Down
2 changes: 2 additions & 0 deletions runtimes/web/rive-parameters.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ export interface RiveParameters {
onStateChange?: EventCallback,
onAdvance?: EventCallback,
assetLoader?: AssetLoadCallback,
enablePerfMarks?: boolean,
}
```

Expand Down Expand Up @@ -83,6 +84,7 @@ export interface RiveParameters {
- `onStateChange?` - *(optional)* Callback that gets fired when a state change occurs.
- `onAdvance?` - *(optional)* Callback that gets fired every frame when the Artboard has advanced.
- `assetLoader?` - *(optional)* Callback that gets invoked for every asset detected in a Rive file (whether included or excluded). The callback is passed a reference to a Rive **FileAsset** and associated **bytes** for the file (if the asset is embedded in the file). In this callback, you'll determine whether or not to load the asset in your app yourself, or have Rive do it for you. For more details and examples, see the [Loading Assets](/runtimes/web/loading-assets) page.
- `enablePerfMarks?` - *(optional)* Emits `performance.mark` / `performance.measure` entries for key Rive startup events. False by default. Also available on `RuntimeLoader` and `RiveFile`.

## APIs

Expand Down
2 changes: 1 addition & 1 deletion runtimes/web/web-js.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ Follow the steps below to integrate Rive into your web app.
// You can also pin to a specific version (See [here](https://www.npmjs.com/package/@rive-app/canvas) for the latest):


<script src="https://unpkg.com/@rive-app/canvas@2.35.0"></script>
<script src="https://unpkg.com/@rive-app/canvas@2.36.0"></script>

// This will make a global `rive` object available, allowing you to access the Rive API via the `rive` entry point:

Expand Down