HTML Components without JSX

• Best Practices and Limitations with HTML Templates
• Basic Usage
• Syntax Guidelines
• Example: Creating a Carousel
• Related Resources

Touchpoint UI provides a powerful way to create components without requiring JSX transpilation or complex build systems through the html template literal tag. This approach, powered by the htm library, lets you build interactive components using familiar HTML syntax directly in JavaScript.

• No Build Step Required: Create components without JSX transpilation
• Easy Integration: Add to existing JavaScript codebases with minimal setup

Best Practices and Limitations with HTML Templates

1. Maintain proper nesting: The template must have properly nested components and tags
2. Use string interpolation for dynamic values: ${expression} for dynamic values
3. Wrap nested components: Use ${html...} for nesting
4. Keys for lists: Always provide unique key props when mapping arrays
5. Flow Control: Cannot use JavaScript control flow (if/else, loops) directly in the template
6. Verbose: Slightly more verbose than JSX for complex nested structures

Basic Usage

The html template literal tag allows you to write HTML-like syntax directly in JavaScript:

1import { html } from "@nlxai/touchpoint-ui";
2
3const MyComponent = ({ data }) => {
4  return html`<BaseText>Hello ${data.name}</BaseText>`;
5};

Syntax Guidelines

When using the html template tag, follow these patterns:

1. Basic Component Rendering:

   1html`<BaseText>Hello World</BaseText>`;

2. Dynamic Content with Expressions:

   1html`<BaseText>Hello ${userName}</BaseText>`;

3. Component Nesting:

   1html`<CustomCard>
   2  ${html`<BaseText>Nested content</BaseText>`}
   3</CustomCard>`;

4. Props and Attributes:

   1html`<TextButton onClick=${handleClick}> Click me </TextButton>`;

5. Rendering Arrays:

   1html`${items.map(
   2  (item) => html`<BaseText key=${item.id}>${item.text}</BaseText>`,
   3)}`;

Example: Creating a Carousel

Here's an example of creating a carousel component with the html tag and leveraging React's state management

1const CarouselExample = ({ data, conversationHandler }) => {
2  const [selected, setSelected] = React.useState(null);
3
4  return html`<Carousel>
5    ${data.map(
6      (cardData, cardIndex) =>
7        html`<CustomCard
8          key=${cardIndex}
9          selected=${selected === cardIndex}
10          onClick=${() => {
11            setSelected(cardIndex);
12            conversationHandler.sendChoice(cardData.id);
13          }}
14        >
15          <CustomCardImageRow src=${cardData.imageUrl} alt="Product image" />
16          <CustomCardRow
17            left=${html`<BaseText>${cardData.name}</BaseText>`}
18            right=${html`<BaseText>$${cardData.price}</BaseText>`}
19          />
20        </CustomCard>`,
21    )}
22  </Carousel>`;
23};

Related Resources

• Touchpoint Components - Available components to use with HTML syntax
• Building custom components - How to implement custom components
• Advanced Theming - Styling your components