Handling User Selection

• Example Selection within a Carousel
• Related Resources

Touchpoint-UI provides useState from the React package to manage highlights and tracking user selections within custom components.

Example Selection within a Carousel

The most common selection pattern allows users to select one item from a group:

1import {
2  Carousel,
3  CustomCard,
4  CustomCardRow,
5  CustomCardImageRow,
6  React,
7} from "@nlxai/touchpoint-ui";
8
9const CarouselExample = ({ data, conversationHandler }) => {
10  // leverage react's useState
11  const [selected, setSelected] = React.useState(null);
12  return (
13    <Carousel>
14      {data.map((cardData, cardIndex) => (
15        <CustomCard
16          key={cardIndex}
17          selected={selected === cardIndex}
18          onClick={() => {
19            setSelected(cardIndex);
20            conversationHandler.sendChoice(cardData.id);
21          }}
22        >
23          <CustomCardImageRow src={cardData.imageUrl} alt="Alt Text" />
24          <CustomCardRow
25            left={<BaseText>{cardData.leftText}</BaseText>}
26            right={<BaseText>{cardData.rightText}</BaseText>}
27          />
28        </CustomCard>
29      ))}
30    </Carousel>
31  );
32};

Related Resources

• React Documentation - Full details from React documentation
• Touchpoint Components - Components used in selection patterns
• HTML Components Guide - More on using HTML template syntax
• Building custom components - Creating custom interactive components