Fluent Commerce Docs

Docs

Search

Help & Feedback

Home
Essential Knowledge
By Type
Building Blocks
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: Make Your Component Interactive

Essential knowledge

Authors:

Cameron Johns, Cille Schliebitz, Anita Gu

Changed on:

3 Feb 2025

Overview

This lesson focuses on adding interactivity to the map pins. Building on the previous styling enhancements, we'll use React's

`useState`

hook to manage the state of pin interactions, specifically clicks. This will enable us to trigger actions when a pin is clicked, making the map more dynamic and responsive.

Key points

React
```
`useState`
```
Hook: Learn how to use the
```
`useState`
```
hook to manage the interactive state of components, such as tracking pin clicks.
Pin Click Actions: This lesson demonstrates how to implement actions that occur when a pin is clicked, enabling interactive map functionality.
Interactive Components: This provides a practical example of making components interactive, a core concept in front-end development.

In the previous lesson, we added some styling elements to the pins. Now, let’s make these pins interactive!

Managing state is one of the things React does really well. We'll make use of the React

`useState`

hook to keep track of the interactions on the map, such as clicking on different pins.

Watch the video below for steps on how to apply an action to a pin (or pins) once it has been clicked.

Creating Interactive Components

This video explains how to make a component interactive

Cameron Johns

Cameron Johns

Contributors:

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 © 2025 Fluent Retail Pty Ltd (trading as Fluent Commerce). All rights reserved. No materials on this docs.fluentcommerce.com site may be used in any way and/or for any purpose without prior written authorisation from Fluent Commerce. Current customers and partners shall use these materials strictly in accordance with the terms and conditions of their written agreements with Fluent Commerce or its affiliates.