FlexiAdd

A component that allows you to drag in new widgets into a board.

Breaking Change Notice

In order to make FlexiAdd more accessible, we now create a wrapper button around the FlexiAdd component. Previously, the user was responsible for creating such an element.

You can style the FlexiAdd div using the new class prop.

Please note that the props snippet property containing the onpointerdown and style props is now deprecated and will be removed in v0.4. They are currently maintained as empty props for compatibility purposes.

See Breaking Changes in v0.3 for more details.

FlexiAdd (component)

Props

Name	Type	Description
children	Snippet<[{ adder: FlexiAddController }]>	The child content of the adder, containing the contents of the adder button.
class	FlexiAddClasses	The class names to apply to the adder's button element.
addWidget	() => AdderWidgetConfiguration	When the user interacts with the adder, this function allows you to specify the configuration of the widget that is created and grabbed.
controller	FlexiAddController (bindable)	The controller for the adder.
onfirstcreate	(controller: FlexiAddController) => void	A callback that fires when the adder's controller is first created.

FlexiAddController

FlexiAdd uses a controller to manage its state and behaviour. You can access the controller via binding to the controller prop or using the onfirstcreate callback.

Properties

Name	Type	Description
ref	HTMLElement \| undefined

AdderWidgetConfiguration

AdderWidgetConfiguration allows you to specify the configuration of the widget that is created and grabbed, as well as the initial width and height that the grabbed widget will have.

Properties

Name	Type	Description
widget	FlexiWidgetConfiguration	The configuration of the widget that is created and grabbed.
widthPx	number	The initial width of the grabbed widget in pixels.
heightPx	number	The initial height of the grabbed widget in pixels.