Message Types

How do I create a custom hook in React?

US

To create a custom hook in React, follow these steps:

  1. Start the function name with "use"
  2. Call other hooks inside if needed
  3. Return necessary values
AI
US

Can you show me an example?

AI

Here's a simple example of a custom hook:

function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);

  const increment = () => setCount(prev => prev + 1);
  const decrement = () => setCount(prev => prev - 1);

  return { count, increment, decrement };
}

Flat Variant

US

What about TypeScript support?

AI

TypeScript works great with custom hooks. You can add type annotations for parameters and return values:

function useCounter(initialValue: number = 0) {
  const [count, setCount] = useState<number>(initialValue);
  // ...
}

Avatar Positioning

The avatar position automatically adjusts based on the order of children

Avatar appears on the right for user messages

JO
BO

Avatar appears on the left for assistant messages

JA

When avatar is placed first for user messages, it appears on the left

When avatar is placed last for assistant messages, it appears on the right

AI