EmojiPicker
EmojiPicker lets users browse and select Unicode emoji.
Source
LLM docs
Package
npm install @plocks/emoji-pickerExamples
2
Properties
41
Basics
Pick an emoji to append it to a message. The picker provides Unicode text; the app owns the message state.
Loading demo…
import { useState } from 'react';
import { Block, Input, Text } from '@plocks/ui';
import { EmojiPicker } from '@plocks/emoji-picker';
export function Demo() {
const [message, setMessage] = useState('That looks great ');
return (
<Block gap="md" w="100%" maw={430}>
<EmojiPicker w="100%" onSelect={({ emoji }) => setMessage(value => value + emoji)} />
<Input label="Message" value={message} onChangeText={setMessage} />
<Text c="muted" size="sm">Search, switch categories, or choose a skin tone before selecting.</Text>
</Block>
);
}Reaction set
Replace the catalog with a small set of reactions and supply a custom category label.
Loading demo…
import { useState } from 'react';
import { Block, Text } from '@plocks/ui';
import { EmojiPicker } from '@plocks/emoji-picker';
import type { EmojiPickerItem } from '@plocks/emoji-picker';
const REACTIONS: EmojiPickerItem[] = [
{ id: 'love', emoji: '❤️', name: 'Love', category: 'reactions', keywords: ['heart', 'like'] },
{ id: 'laugh', emoji: '😂', name: 'Laugh', category: 'reactions', keywords: ['funny'] },
{ id: 'wow', emoji: '😮', name: 'Wow', category: 'reactions', keywords: ['surprised'] },
{ id: 'sad', emoji: '😢', name: 'Sad', category: 'reactions' },
{ id: 'celebrate', emoji: '🎉', name: 'Celebrate', category: 'reactions', keywords: ['party'] },
];
export function Demo() {
const [reaction, setReaction] = useState('❤️');
return (
<Block gap="md" w="100%" maw={430}>
<EmojiPicker w="100%" h={290} emojis={REACTIONS} categoryLabels={{ reactions: 'Reactions' }} onSelect={({ emoji }) => setReaction(emoji)} />
<Text>Selected reaction: {reaction}</Text>
</Block>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources