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.

React CountUp number panels

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

ParameterTypeRequiredDefaultDescription
labelstringno'Number'Text for the panel label.
labelOrientationLabelOrientationno'horizontal'Position of the panel label.
defaultValuenumbernoundefinedWill be used when the value isn't set.
minnumberno0The smallest number that can be set in the panel input.
maxnumbernoInfinityThe largest number that can be set in the panel input.
stepnumberno1Amount to increment by when using , , or dragging the panel input.
suffixstringno''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'