`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.

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

Parameter	Type	Required	Default	Description
`type`	`{ [key: string]: ControlDefinition }`	yes	N/A	An object of controls that determines the shape of the provided value.

Valid control values for the type parameter are the following:

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.