Adding or removing properties from a component is one way in which you can extend Stackbit components.

Removing a Property

To safely remove a property from a component, follow these steps:

  1. Remove any references to the prop in your component's code. This helps prevent unnecessary errors that may appear if the property is undefined.
  2. Remove the associated field from the model in .stackbit/models.

That's it! You can tidy things up by removing content for that property in your content files. But this is optional. In most cases, it's okay if there are values in your content files that you're not using in your components.

Example

Here's an example that removes a subtitle property from an existing component.

Adding a Property

To safely add a property to a component, follow these steps:

  1. Add a new field to the appropriate model in .stackbit/models. Refer to the field reference for help in defining the new field.
  2. Confirm the the field exists by editing a page and adding some content for that field.
  3. Add support for the new property (value set in your content files) in your component code.

When adding a new property to a component, it's generally a good practice to check for its presence in the code. Even if you've set its corresponding field as required, it may not exist if the component is already being used before you added the new field.

Example

Here's an example that adds a subtitle property from an existing component.

Next Steps

After you've added or removed the property, take it for a ride. You now have full control over the Stackbit component you have extended and can do whatever you want with it!