blocks logoBlocksv0.0.76

Controls

Components can use the controls API to expose form elements in the Blocks editor for manipulating props. It adheres to Framer's Property Controls in order to ensure interoperability.

import { Controls } from 'blocks-ui'

Types

NameDescriptionString
Booleantrue/false propertyboolean
EnumCollection of possible values for a propertyenum
NumberSingle number propertynumber
StringString propertystring
Future considerations
  • Components as props
  • Objects as props (with particular shapes and/or nesting)
  • Arrays as props
  • Babel plugin to remove the controls for production builds

Boolean

Controls.Boolean

You can use the boolean control type to expose a checkbox that turns a property on or off.

KeyRequiredDefaultDescription
titleYesN/AThe label for the checkbox
defaultValueNotrueThe checkbox's default value

Example

import { Controls } from 'blocks-ui'

export const Component = ({ isTomato, ...props }) => (
  <h1
    {...props}
    style={{
      color: isTomato ? 'tomato' : 'inherit'
    }}
  />
)

Controls.applyPropertyControls(Component, {
  isTomato: {
    type: Controls.Boolean,
    title: 'Tomato'
  }
})

Enum

Controls.Enum

You can use the enum control type to expose a select that contains all provided possible values.

KeyRequiredDefaultDescription
titleYesN/AThe label the select
defaultValueNonullThe select's default value
optionsYesN/AThe values for the options
optionTitlesNooptions valuesTitles for the given options

Example

import { Controls } from 'blocks-ui'

export const Component = ({ color, ...props }) => (
  <h1
    {...props}
    style={{ color }}
  />
)

Controls.applyPropertyControls(Component, {
  color: {
    type: Controls.Enum,
    title: 'Color',
    defaultValue: 'tomato',
    options: ['tomato', 'purple', 'black'],
    optionTitles: ['Tomato', 'Purple', 'Black']
  }
})

Number

Controls.Number

You can use the enum control type to expose a select that contains all provided possible values.

KeyRequiredDefaultDescription
titleYesN/AThe label for the prop
defaultValueNonullThe default value for the number
minNo0The minimum value
maxNo10The maximum value
stepNo1The step value for the slider
unitNonullThe unit which is appended to the number (returned as a string if provided)

Example

import { Controls } from 'blocks-ui'

export const Component = ({ lineHeight, ...props }) => (
  <h1
    {...props}
    style={{ lineHeight }}
  />
)

Controls.applyPropertyControls(Component, {
  lineHeight: {
    type: Controls.Number,
    title: 'Line Height',
    defaultValue: 1.2,
    min: 1,
    max: 2,
    step: .1
  }
})

String

Controls.String

Display a text input for a string-based prop

KeyRequiredDefaultDescription
titleYesN/AThe label for the prop
defaultValueNonullThe default value for the string
requiredNofalseWhether the string is required
placeholderNonullPlaceholder in the text input

Example

import { Controls } from 'blocks-ui'

export const Component = ({ text, ...props }) => (
  <h1
    {...props}
    children={text}
  />
)

Controls.applyPropertyControls(Component, {
  text: {
    type: Controls.String,
    required: true,
    placeholder: 'Enter a title...'
  }
})





Note: Controls are also available as a standalone package, property-controls