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.