Stickers Keyboard

A sticker picker with category tabs and a 4-column grid for browsing and selecting stickers from the CometChat stickers extension.

AI Integration Quick Reference

{
  "component": "CometChatStickersKeyboard",
  "package": "@cometchat/chat-uikit-react",
  "import": "import { CometChatStickersKeyboard } from \"@cometchat/chat-uikit-react\";",
  "description": "Sticker picker with category tabs and grid layout.",
  "cssRootClass": ".cometchat-stickers-keyboard",
  "props": {
    "callbacks": {
      "onStickerClick": { "type": "(event: CometChatStickerClickEvent) => void", "default": "required" },
      "onClose": { "type": "() => void", "default": "undefined" }
    },
    "behavior": {
      "autoFocus": { "type": "boolean", "default": "true" },
      "stickerData": { "type": "CometChatStickerSet", "default": "undefined" },
      "initialState": { "type": "'loading' | 'error' | 'empty'", "default": "undefined" }
    },
    "text": {
      "errorStateText": { "type": "string", "default": "localized error text" },
      "emptyStateText": { "type": "string", "default": "localized empty text" }
    },
    "styling": {
      "className": { "type": "string", "default": "undefined" }
    }
  }
}

Where It Fits

CometChatStickersKeyboard is opened from the message composer when the sticker button is clicked. It fetches stickers from the CometChat stickers extension API and displays them in a categorized grid.

import { CometChatStickersKeyboard } from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";

function StickerPicker({ onSelect, onClose }) {
  return (
    <CometChatStickersKeyboard
      onStickerClick={(e) => onSelect(e.stickerUrl, e.stickerName)}
      onClose={onClose}
    />
  );
}

Minimal Render

import { CometChatStickersKeyboard } from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";

function Demo() {
  return <CometChatStickersKeyboard onStickerClick={(e) => console.log(e)} />;
}

Root CSS class: .cometchat-stickers-keyboard

Features

• Fetches stickers from CometChat.callExtension('stickers', 'GET', 'v1/fetch')
• Category tabs with horizontal wheel scroll
• 4-column CSS Grid with per-image shimmer placeholders
• Loading shimmer, error state with retry, empty state
• Escape key closes the keyboard
• Full keyboard navigation: ArrowLeft/Right for tabs, Arrow keys for grid
• ARIA: role="dialog", role="tablist"/"tab", role="grid"/"gridcell"
• loading="lazy" on all sticker images
• prefers-reduced-motion respected

Props

---

onStickerClick

Callback when a sticker is selected. Required.

Type	(event: CometChatStickerClickEvent) => void
Default	—

---

onClose

Callback when the keyboard requests close (Escape key).

Type	() => void
Default	undefined

---

autoFocus

Whether to auto-focus the first tab on mount.

Type	boolean
Default	true

---

stickerData

Pre-loaded sticker data. When provided, skips the SDK fetch. Useful for Storybook and testing.

Type	CometChatStickerSet
Default	undefined

---

initialState

Force an initial state. When set, the component renders in this state without fetching.

Type	'loading' | 'error' | 'empty'
Default	undefined

---

errorStateText

Custom text displayed in the error state.

Type	string
Default	Localized error text

---

emptyStateText

Custom text displayed in the empty state.

Type	string
Default	Localized empty text

---

className

Optional custom CSS class appended to the root container.

Type	string
Default	undefined

CSS Selectors

Target	Selector
Root	.cometchat-stickers-keyboard
Tabs container	.cometchat-stickers-keyboard__tabs
Single tab	.cometchat-stickers-keyboard__tab
Active tab	.cometchat-stickers-keyboard__tab--active
Tab icon	.cometchat-stickers-keyboard__tab-icon
Sticker grid	.cometchat-stickers-keyboard__grid
Sticker item	.cometchat-stickers-keyboard__sticker-item
Sticker image	.cometchat-stickers-keyboard__sticker-image
Shimmer placeholder	.cometchat-stickers-keyboard__sticker-shimmer
Error state	.cometchat-stickers-keyboard__error
Retry button	.cometchat-stickers-keyboard__retry-button
Empty state	.cometchat-stickers-keyboard__empty