Advanced

Hooks, keyboard shortcuts, and performance optimization. These utilities handle the finer details of building a production chat interface — scroll behavior, auto-resizing textareas, typing indicators, and more.

Hooks Demo

Today

Bot

Hey! Have you tried the new hooks?

5:28 AM

Not yet, which ones?

5:29 AM

Bot

useAutoScroll is really smooth

5:30 AM

Does it handle the scroll-to-bottom FAB?

5:31 AM

Bot

Yep, with an unread count badge too

5:32 AM

Nice! What about the composer?

5:33 AM

Bot

useAutoResize grows the textarea automatically

5:34 AM

That sounds great, let me try it out

5:35 AM

useAutoScroll

useAutoResize

useAutoScroll

Keeps the message list scrolled to the bottom when new messages arrive, but only if the user hasn't scrolled up. Returns a containerRef to attach to the scroll container, scrollToBottom to imperatively jump down, isAtBottom for UI logic, and unseenCount to show a badge.

useAutoScroll(messages)

containerRefscrollToBottom()isAtBottomunseenCount

useAutoResize

Automatically grows and shrinks a <textarea> to fit its content, up to a configurable maxRows limit. Returns a textareaRef and a resize function you call after each content change.

Try typing multiple lines:Grows up to ~6 rows, then scrolls

useTypingIndicator

Tracks whether the local user is actively typing and debounces the signal. Returns isTyping (current state), handleKeyDown (attach to the textarea), stopTyping (force stop), and accepts a debounceMs config (default 1500ms).

Not typing

Keyboard Shortcuts

The composer and message list respond to these keyboard shortcuts by default:

Shortcut	Action
`Enter`	Send the current message
`Shift+Enter`	Insert a newline without sending
`Escape`	Cancel the active reply
`↑` in empty composer	Edit your last sent message

Virtual Scrolling

For conversations with 10,000+ messages, rendering every DOM node will degrade performance. We recommend @tanstack/react-virtual for windowed rendering. It only mounts the messages visible in the viewport plus a configurable overscan buffer.

@tanstack/react-virtual

useVirtualizerestimateSize: 72overscan: 20

Security Utilities

chatcn includes a handful of security helpers for sanitizing user-generated content:

Utility	Description
`sanitizeUrl`	Strips `javascript:` and data URIs from user-submitted links, returning a safe href or an empty string.
`validateFile`	Checks a File object against allowed MIME types and a max size limit. Returns an error string or null.
`isValidEmoji`	Validates that a string is a single Unicode emoji sequence, preventing injection of arbitrary text in reaction pickers.
`stripBidiOverrides`	Removes Unicode bidirectional override characters (U+202A–U+202E, U+2066–U+2069) that can be used for text spoofing attacks.

← Search Security →