Advanced: Using Objects as Props
When designing the prop configuration for a component, sometimes single prop fields just aren't enough to accomplish a more complex implementation. To that end, Objects as props becomes the solution. Within the prop configuration menu we've added the ability to add the prop type Object
.
Add an object as a prop
This help doc assumes you're already editing the pattern in question.
- Click the "Edit Pattern API" gear icon to edit the props
- Add or edit a prop — by clicking the "+ Prop" button and opening the prop to configure further OR toggling an existing prop open. Select "Object" as the Type.
- Scroll down to expose more of the prop configuration, then toggle the "Prop Spec" pane.
- You now have the ability to edit the prop spec! We use the JSON Schema Spec to define properties.
TIP: You can use this utility to show detailed examples of the JSON Schema Spec. - Once you've added the desired properties, click the "Format JSON" button to ensure the code is clean and valid. Then the purple "Save" button.
- IMPORTANT: Click the final "Save Changes" button to see your pattern's schema form update with the new object configuration
- Now your pattern's schema form will be updated to reflect the new Object group 🎉