Shape

The Shape control provides your component with an object where the values are controlled by other Makeswift controls.

The Shape control can be nested as deeply as you want within Shape and List controls.

AnchorExamples

AnchorA user bio

In this example we register a UserBio component where its user prop is controlled by a Shape control together with TextInput, Number, TextArea, and Image controls.

User bio shape panel

import { ReactRuntime } from '@makeswift/runtime/react'
import { Shape, TextInput, Number, TextArea, Image } from '@makeswift/runtime/controls'

function UserBio({ user }) {
  return (
    <figure>
      <img src={user.profilePictureUrl} alt="Profile picture" />
      <p>{user.bio}</p>
      <figcaption>
        {user.name}, {user.age} years old
      </figcaption>
    </figure>
  )
}

ReactRuntime.registerComponent(UserBio, {
  type: 'user-bio',
  label: 'User Bio',
  props: {
    user: Shape({
      type: {
        name: TextInput({ label: 'Name', defaultValue: '' }),
        age: Number({ label: 'Age', min: 0, defaultValue: 0 }),
        bio: TextArea({ label: 'Bio', defaultValue: '' }),
        profilePictureUrl: Image({ label: 'Profile Picture' }),
      },
    }),
  },
})

AnchorAPI

AnchorParameters

ParameterTypeRequiredDefaultDescription
type{ [key: string]: ControlDefinition }yesN/AAn object of controls that determines the shape of the provided value.

Valid control values for the type parameter are the following:

Note that the Style control is not included in this list. Support for the using the Style control together with the Shape is a work in progress.

AnchorProvided value

The Shape control provides an object value to your component where the shape of the object matches the values provided by the controls used in the type field. Each field's value will be determined by the associated control.