import {
EmojiPicker,
EmojiPickerContent,
EmojiPickerSearch,
} from "@/components/ui/emoji-picker";
import { useToastManager } from "@/components/ui/toast";
export function EmojiPickerDemo() {
const toast = useToastManager();
return (
<EmojiPicker
onEmojiSelect={({ emoji, label }) => {
toast.add({
title: `${emoji} ${label}`,
});
}}
>
<EmojiPickerSearch />
<EmojiPickerContent />
</EmojiPicker>
);
}About
The emoji picker component is built using the Frimousse library built by Liveblocks.
Installation
npx shadcn@latest add "https://eo-n.vercel.app/r/emoji-picker"Usage
Import all parts and piece them together.
import {
EmojiPicker,
EmojiPickerContent,
EmojiPickerSearch,
} from "@/components/ui/emoji-picker";<EmojiPicker
onEmojiSelect={({ emoji }) => {
console.log(emoji);
}}
>
<EmojiPickerSearch />
<EmojiPickerContent />
</EmojiPicker>Examples
On Popover
import { Button } from "@/components/ui/button";
import {
EmojiPicker,
EmojiPickerContent,
EmojiPickerFooter,
EmojiPickerSearch,
EmojiPickerSkinToneSelector,
} from "@/components/ui/emoji-picker";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import { useToastManager } from "@/components/ui/toast";
export function EmojiPickerDemo() {
const toast = useToastManager();
return (
<Popover>
<PopoverTrigger render={<Button>Open emoji picker</Button>} />
<PopoverContent className="w-fit p-0">
<EmojiPicker
onEmojiSelect={({ emoji, label }) => {
toast.add({
title: `${emoji} ${label}`,
});
}}
>
<EmojiPickerSearch />
<EmojiPickerContent />
<EmojiPickerFooter>
<EmojiPickerSkinToneSelector />
</EmojiPickerFooter>
</EmojiPicker>
</PopoverContent>
</Popover>
);
}See the Frimousse docs for more information.