Skip to main content

RiveProps

interface RiveProps extends RectProps

Properties

alignContent

Inherited from RectProps.alignContent

alignItems

Inherited from RectProps.alignItems

alignSelf

Inherited from RectProps.alignSelf

animationId

animationId?: SignalValuestringnumber

antialiased

Inherited from RectProps.antialiased

arrowSize

Controls the size of the end and start arrows.

To make the arrows visible make sure to enable startArrow and/or endArrow.

Inherited from RectProps.arrowSize

artboardId

artboardId?: SignalValuestringnumber

basis

Inherited from RectProps.basis

bottom

The position of the bottom edge of this node.

This shortcut property will set the node's position so that the bottom edge ends up in the given place. If present, overrides the position property.

Inherited from RectProps.bottom

bottomLeft

The position of the bottom left corner of this node.

This shortcut property will set the node's position so that the bottom left corner ends up in the given place. If present, overrides the position property.

Inherited from RectProps.bottomLeft

bottomRight

The position of the bottom right corner of this node.

This shortcut property will set the node's position so that the bottom right corner ends up in the given place. If present, overrides the position property.

Inherited from RectProps.bottomRight

cache

Inherited from RectProps.cache

cachePadding

Controls the padding of the cached canvas used by this node.

By default, the size of the cache is determined based on the bounding box of the node and its children. That includes effects such as stroke or shadow. This property can be used to expand the cache area further. Usually used to account for custom effects created by shaders.

Inherited from RectProps.cachePadding

cachePaddingBottom

Controls the padding of the cached canvas used by this node.

By default, the size of the cache is determined based on the bounding box of the node and its children. That includes effects such as stroke or shadow. This property can be used to expand the cache area further. Usually used to account for custom effects created by shaders.

Inherited from RectProps.cachePaddingBottom

cachePaddingLeft

Controls the padding of the cached canvas used by this node.

By default, the size of the cache is determined based on the bounding box of the node and its children. That includes effects such as stroke or shadow. This property can be used to expand the cache area further. Usually used to account for custom effects created by shaders.

Inherited from RectProps.cachePaddingLeft

cachePaddingRight

Controls the padding of the cached canvas used by this node.

By default, the size of the cache is determined based on the bounding box of the node and its children. That includes effects such as stroke or shadow. This property can be used to expand the cache area further. Usually used to account for custom effects created by shaders.

Inherited from RectProps.cachePaddingRight

cachePaddingTop

Controls the padding of the cached canvas used by this node.

By default, the size of the cache is determined based on the bounding box of the node and its children. That includes effects such as stroke or shadow. This property can be used to expand the cache area further. Usually used to account for custom effects created by shaders.

Inherited from RectProps.cachePaddingTop

children

Inherited from RectProps.children

clip

clip?: SignalValueboolean
Inherited from RectProps.clip

closed

Whether the curve should be closed.

Closed curves have their start and end points connected.

Inherited from RectProps.closed

columnGap

Inherited from RectProps.columnGap

composite

Inherited from RectProps.composite

compositeOperation

compositeOperation?: SignalValueGlobalCompositeOperation
Inherited from RectProps.compositeOperation

cornerSharpness

Controls the sharpness of smoothCorners.

This property only affects the way rounded corners are drawn. To control the corner radius use the radius property.

Requires smoothCorners to be enabled to have any effect. By default, corner sharpness is set to 0.6 which represents a smooth, circle-like rounding. At 0 the edges are squared off.

Inherited from RectProps.cornerSharpness

direction

Inherited from RectProps.direction

end

A percentage from the start after which the curve should be clipped.

The portion of the curve that comes after the given percentage will be made invisible.

This property is usefully for animating the curve appearing on the screen. The value of 0 means the very start of the curve (accounting for the startOffset) while 1 means the very end (accounting for the endOffset).

Inherited from RectProps.end

endArrow

Whether to display an arrow at the end of the visible curve.

Use arrowSize to control the size of the arrow.

Inherited from RectProps.endArrow

endOffset

The offset in pixels from the end of the curve.

This property lets you specify where along the defined curve the actual visible portion ends. For example, setting it to 20 will make the last 20 pixels of the curve invisible.

This property is useful for trimming the curve using a fixed distance. If you want to animate the curve appearing on the screen, use end instead.

Inherited from RectProps.endOffset

fill

Inherited from RectProps.fill

filters

Inherited from RectProps.filters

fontFamily

Inherited from RectProps.fontFamily

fontSize

Inherited from RectProps.fontSize

fontStyle

Inherited from RectProps.fontStyle

fontWeight

Inherited from RectProps.fontWeight

gap

Inherited from RectProps.gap

grow

Inherited from RectProps.grow

height

Inherited from RectProps.height

justifyContent

Inherited from RectProps.justifyContent

key

key?: string
Inherited from RectProps.key

layout

Inherited from RectProps.layout

left

The position of the left edge of this node.

This shortcut property will set the node's position so that the left edge ends up in the given place. If present, overrides the position property.

Inherited from RectProps.left

letterSpacing

Inherited from RectProps.letterSpacing

lineCap

lineCap?: SignalValueCanvasLineCap
Inherited from RectProps.lineCap

lineDash

Inherited from RectProps.lineDash

lineDashOffset

Inherited from RectProps.lineDashOffset

lineHeight

Inherited from RectProps.lineHeight

lineJoin

lineJoin?: SignalValueCanvasLineJoin
Inherited from RectProps.lineJoin

lineWidth

Inherited from RectProps.lineWidth

margin

Inherited from RectProps.margin

marginBottom

Inherited from RectProps.marginBottom

marginLeft

Inherited from RectProps.marginLeft

marginRight

Inherited from RectProps.marginRight

marginTop

Inherited from RectProps.marginTop

maxHeight

Inherited from RectProps.maxHeight

maxWidth

Inherited from RectProps.maxWidth

middle

The position of the center of this node.

This shortcut property will set the node's position so that the center ends up in the given place. If present, overrides the position property. When offset is not set, this will be the same as the position.

Inherited from RectProps.middle

minHeight

Inherited from RectProps.minHeight

minWidth

Inherited from RectProps.minWidth

offset

Inherited from RectProps.offset

offsetX

Inherited from RectProps.offsetX

offsetY

Inherited from RectProps.offsetY

opacity

Inherited from RectProps.opacity

padding

Inherited from RectProps.padding

paddingBottom

Inherited from RectProps.paddingBottom

paddingLeft

Inherited from RectProps.paddingLeft

paddingRight

Inherited from RectProps.paddingRight

paddingTop

Inherited from RectProps.paddingTop

position

Inherited from RectProps.position

radius

Rounds the corners of this rectangle.

The value represents the radius of the quarter circle that is used to round the corners. If the value is a number, the same radius is used for all corners. Passing an array of two to four numbers will set individual radii for each corner. Individual radii correspond to different corners depending on the number of values passed:

// top-left-and-bottom-right | top-right-and-bottom-left
[10, 30]
// top-left | top-right-and-bottom-left | bottom-right
[10, 20, 30]
// top-left | top-right | bottom-right | bottom-left
[10, 20, 30, 40]
Inherited from RectProps.radius

ratio

Inherited from RectProps.ratio

ref

Inherited from RectProps.ref

The position of the right edge of this node.

This shortcut property will set the node's position so that the right edge ends up in the given place. If present, overrides the position property.

Inherited from RectProps.right

rotation

Inherited from RectProps.rotation

rowGap

Inherited from RectProps.rowGap

scale

Inherited from RectProps.scale

scaleX

Inherited from RectProps.scaleX

scaleY

Inherited from RectProps.scaleY

shaders

shaders?: PossibleShaderConfig
Experimental
This is an experimental feature. The behavior and API may change drastically between minor releases.
Inherited from RectProps.shaders

shadowBlur

Inherited from RectProps.shadowBlur

shadowColor

Inherited from RectProps.shadowColor

shadowOffset

Inherited from RectProps.shadowOffset

shadowOffsetX

Inherited from RectProps.shadowOffsetX

shadowOffsetY

Inherited from RectProps.shadowOffsetY

shrink

Inherited from RectProps.shrink

size

Inherited from RectProps.size

skew

Inherited from RectProps.skew

skewX

Inherited from RectProps.skewX

skewY

Inherited from RectProps.skewY

smoothCorners

Enables corner smoothing.

This property only affects the way rounded corners are drawn. To control the corner radius use the radius property.

When enabled, rounded corners are drawn continuously using Bézier curves rather than quarter circles. The sharpness of the curve can be controlled with cornerSharpness.

You can read more about corner smoothing in this article by Nick Lawrence.

Inherited from RectProps.smoothCorners

spawner

Deprecated

Use children instead.

Inherited from RectProps.spawner

src


start

A percentage from the start before which the curve should be clipped.

The portion of the curve that comes before the given percentage will be made invisible.

This property is usefully for animating the curve appearing on the screen. The value of 0 means the very start of the curve (accounting for the startOffset) while 1 means the very end (accounting for the endOffset).

Inherited from RectProps.start

startArrow

Whether to display an arrow at the start of the visible curve.

Use arrowSize to control the size of the arrow.

Inherited from RectProps.startArrow

startOffset

The offset in pixels from the start of the curve.

This property lets you specify where along the defined curve the actual visible portion starts. For example, setting it to 20 will make the first 20 pixels of the curve invisible.

This property is useful for trimming the curve using a fixed distance. If you want to animate the curve appearing on the screen, use start instead.

Inherited from RectProps.startOffset

stroke

Inherited from RectProps.stroke

strokeFirst

Inherited from RectProps.strokeFirst

tagName

tagName?: keyof HTMLElementTagNameMap
Inherited from RectProps.tagName

textAlign

textAlign?: SignalValueCanvasTextAlign
Inherited from RectProps.textAlign

textDirection

textDirection?: SignalValueCanvasDirection
Inherited from RectProps.textDirection

textWrap

Inherited from RectProps.textWrap

top

The position of the top edge of this node.

This shortcut property will set the node's position so that the top edge ends up in the given place. If present, overrides the position property.

Inherited from RectProps.top

topLeft

The position of the top left corner of this node.

This shortcut property will set the node's position so that the top left corner ends up in the given place. If present, overrides the position property.

Inherited from RectProps.topLeft

topRight

The position of the top right corner of this node.

This shortcut property will set the node's position so that the top right corner ends up in the given place. If present, overrides the position property.

Inherited from RectProps.topRight

width

Inherited from RectProps.width

wrap

Inherited from RectProps.wrap

x

x?: SignalValuenumber
Inherited from RectProps.x

y

y?: SignalValuenumber
Inherited from RectProps.y

zIndex

Inherited from RectProps.zIndex