Configuring Components with Settings
Authors:
Cameron Johns, Cille Schliebitz, Anita Gu
Changed on:
3 Feb 2025
Overview
This lesson addresses the best practice of avoiding hardcoded values, specifically API keys, within components. We'll explore how to use the
`useSettings`Key points
- Avoiding Hardcoding: Learn why hardcoding API keys or other configuration values directly in components is not recommended.
- Hook: Understand how to use the
`useSettings`hook to access and utilize platform settings within your components.`useSettings` - Centralized Configuration: This lesson demonstrates how storing configuration values as platform settings allows for centralized management and easy updates.
- Reusability and Configurability: By using settings, components become more reusable and adaptable to different clients and environments.
In the previous steps, the API key for the Google Map component is hardcoded —this is not considered best practice, since it does not make the component configurable for other clients and environments.
This could be turned into another component prop, but something like an API key might make more sense as a setting if it's used in other places (components, rules, etc.). Then, if you need to update the key, you can do it in one place rather than digging into manifests and workflows.
The Component SDK provides a useful hook called
`useSettings`Watch the video below for steps to load the key from the platform setting:
Adding Configurability
This video explains how to make a component configurable for other clients and environments
