`Number`

The Number control provides your component a number value that is editable in the Makeswift builder.

AnchorExamples

AnchorIntegrating with React CountUp

In this example we use the React CountUp component and make the start and end props controllable with Number controls.

import { ReactRuntime } from '@makeswift/runtime/react'
import CountUp from 'react-countup'
import { Number } from '@makeswift/runtime/controls'

ReactRuntime.registerComponent(CountUp, {
  type: 'count-up',
  label: 'CountUp',
  props: {
    start: Number({ label: 'Start', min: 0, defaultValue: 0 }),
    end: Number({ label: 'End', min: 0, defaultValue: 100 }),
  },
})

See the full example here.

AnchorAPI

AnchorParameters

Parameter	Type	Required	Default	Description
`label`	`string`	no	`'Number'`	Text for the panel label.
`labelOrientation`	`LabelOrientation`	no	`'horizontal'`	Position of the panel label.
`defaultValue`	`number`	no	`undefined`	Will be used when the value isn't set.
`min`	`number`	no	`0`	The smallest number that can be set in the panel input.
`max`	`number`	no	`Infinity`	The largest number that can be set in the panel input.
`step`	`number`	no	`1`	Amount to increment by when using `↑`, `↓`, or dragging the panel input.
`suffix`	`string`	no	`''`	Decorative text appended to the end of the panel input.

AnchorProvided value

The Number control provides a number value to your component—or undefined if there's no value set. Use defaultValue if you never want your component to receive undefined.

AnchorTypes

type LabelOrientation = 'vertical' | 'horizontal'