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'