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 🎉
