);
}
`

Just like the official Rive React library, the createRive function will run once the dom is rendered as the the underlying element needs to be present in the DOM.

Documentation

$3

A simple component for render simple rive animations on a canvas. In practice this is just a wrapper around createRive.

Props

- src: string - the src of the rive file to load
- artboard?: string - the name of the artboard to use
- animations?: string | string[] - the name or list of names of animations to play
- statateMachines?: string | string[] - the name or list of names of state machines to play
- layout?: Layout - the layout object defining how animations are positioned on the canvas. see the official rive documentation for more info.
- useOffscreenRenderer?: boolean - whether to use the offscreen renderer. see the official rive documentation for more info.
- canvas props - any other props will be passed to the underlying element

The typescript prop type for this component can be imported using

`ts
import type { RiveProps } from "@aerofoil/rive-solid-canvas";
`

$3

This function takes a single argument, a solidjs accessor returning all the RiveParameters from the official web rive library with the exception of canvas which is created and managed internally.

For convenience the type CreateRiveParameters and can be imported using

`ts
import type { CreateRiveParameters } from "@aerofoil/rive-solid-canvas";
`

The return value is an object with the following properties
canvas - an accessor to the ref of the internal canvas element
rive - an accessor to the rive object
RiveComponent - a component that renders and manages the canvas element. Can use all the same props as the default element, with the exception of ref.

$3

This function is used to quickly get a rive input given the rive accessor generated by createRive.

Arguments

- rive: rive accessor - the rive accessor generated by createRive
- stateMachineName: string - the name of the state machine to get the input for
- inputName: string - the name of the input to get

Returns an accessor to the StateMachineInput object. This accessor can be used to set the value of the input.

$3

This function is used to quickly get a map of all rive inputs for a given state machine.

Arguments

- rive: rive accessor - the rive accessor generated by createRive
- stateMachineName: string` - the name of the state machine to get the input for

Returns an accessor for a map with the keys being the input names and the values being the input accessors.

Comparison

| Name | Rive-Solid-Canvas | Official Rive React |
| -------------------------------- | ----------------- | ------------------- |
| Simple Component | ✅ | ✅ |
| Advanced Usage | ✅ | ✅ |
| StateMachine Input Accessor | ✅ | ✅ |
| webGL support | ❌ | ✅ |
| useDevicePixelRatio Option | ❌ | ✅ |
| fitCanvasToArtboardHeight Option | ❌ | ✅ |
| Bluk StateMachine Input Accessor | ✅ | ❌ |

Potential Roadmap

This is a quick project to serve our needs. There isn't much to go wrong or much to maintain. This should act more as a todo list; there is no given timeline for when these will be worked on

- Add typesafety. Currently this relies on the typesafety of rive as it is, ideally it would be possible to define the available animations, state machines, statemachine inputs, etc. To prevent invalid names from being passed into input generators.

Credits

- SolidJS
- Rive
- Rive Documentation

License

MIT