Axes API for react (react axes)

API

props

name	type	description
axis	Map(key: string, value: AxisOption)	The key of the axis specifies the name to use as the logical virtual coordinate system.
inputs	InputType[] or InputType	The inputType instance to associate with the axis of eg.Axes
other props		AxesOption

InputTypes

All inputTypes provide an axis property that represents the axis.

• MoveKeyInput(options: MoveKeyInputOption)
• PanInput(options: PanInputOption)
• PinchInput(options: PinchInput)
• WheelInput(options: WheelInputOption)

axis examples

When using the range property

<Axes axis={
  {
    x: [0, 100], 
    y: [0, 100], 
    z: [0, 50]
  }
}>
...
</Axes>

When using the range and bounce properties

<Axes axis={{
    x: {
        range: [0, 100],
        bounce: [20, 50],
    },
    y: {
        range: [0, 100],
        bounce: [20, 50],
    },
    z: {
        range: [0, 50],
        bounce: [20, 50],
    },
}}>
...
</Axes>

inputs examples

Using one inputType

<Axes inputs={
   new MoveKeyInput({
      axis: "x y",
      scale: [1, -1]
   })
}>
...
</Axes>

When using multiple inputTypes

<Axes inputs={[
    new MoveKeyInput({axis: "x y", scale: [10, -10]}),
    new PanInput({axis: "x y"})
]}>
...
</Axes>