Fluent Commerce Docs

Docs

Search

Help & Feedback

Get Started
Functionality
Learning
Extension
Dev Tooling
APIs
Releases

Content in this track:

Extending the UX Framework with the Component SDK

Building Custom Components with the Component SDK

Setting Up Your Component SDK Project

Client Scenario: Building a Product Availability Map

Creating and Registering a Custom Component

Configuring Custom Components via the Manifest

Accessing User and Location Context with the useAuth Hook

Integrating a Third-Party Map Component

Adding Nested (Child) Components

Accessing Page Query Data

Style and Theme Your Component

Make Your Component Interactive

Configuring Components with Settings

Configuring Components with Dynamic Attributes

Extending Forms with Custom Field Components

Implementing a Custom Form Field

Enhance Your Custom Fields: Leveraging Existing Components from the Registry

Fetching Data with the useQuery Hook

Completing the Custom Form Field: Outputting the Result

Creating Custom Template Helpers

Unit Testing Custom Components

Deploying a Custom Component Plugin

End Of Track

Content in this track: Configuring Components with Settings

Essential knowledge

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` hook provided by the Component SDK to retrieve configuration values from platform settings. This approach makes components more configurable and reusable across different clients and environments, simplifying maintenance and updates.

Key points

Avoiding Hardcoding: Learn why hardcoding API keys or other configuration values directly in components is not recommended.
`useSettings` Hook: Understand how to use the `useSettings` hook to access and utilize platform settings within your components.
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.

Use a different key to the videos

Do not use the same key as shown in the videos - head over to developers.google.com to get your own.

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` to easily interact with Fluent settings.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

Knowledge Tracks Related To This Topic

Component SDK

Extending the UX Framework with the Component SDK

Building Custom Components with the Component SDK

Setting Up Your Component SDK Project

Client Scenario: Building a Product Availability Map

Creating and Registering a Custom Component

Configuring Custom Components via the Manifest

Accessing User and Location Context with the useAuth Hook

Integrating a Third-Party Map Component

Adding Nested (Child) Components

Accessing Page Query Data

Style and Theme Your Component

Make Your Component Interactive

Configuring Components with Settings

Configuring Components with Dynamic Attributes

Extending Forms with Custom Field Components

Implementing a Custom Form Field

Enhance Your Custom Fields: Leveraging Existing Components from the Registry

Fetching Data with the useQuery Hook

Completing the Custom Form Field: Outputting the Result

Creating Custom Template Helpers

Unit Testing Custom Components

Deploying a Custom Component Plugin

Copyright © 2024-2026 Fluent Retail Pty Ltd (trading as Fluent Commerce). Unless otherwise expressly stated in a current written agreement with Fluent Commerce or any of its affiliates or on any single page of the docs.fluentcommerce.com site, use of the materials on this site is strictly limited to viewing by individuals over 18 years old for legitimate commercially appropriate reasons; and any downloading, copying or other actions or uses of any kind or by any means of the materials on this site, including by artificial intelligence tools, is strictly prohibited. All other rights reserved.