爱莫吉·皮克
带有 Tailwind styling 的可堆叠回放的取相器组件
特征
- 🎨 未命名可编译( C):由Tailwind CSS所建造. 每个组件默认的样式最小,而且完全可以自定义.
- ⚡️ 快速轻量级( L): 用于平滑滚动的虚拟列表. 只能让Emojis进入视野.
- 🎯 可访问: 完整的键盘和屏幕阅读器导航支持.
- 🛜 无外部 CDN:所有emoji数据都包含在这个依赖中,没有外部CDN.
- 🔣 无符号: 不支持的emojis 自动隐藏
- 🌈 主导色彩花纹: 被支持的emojis被构建出主导色彩.
- 🖼️ 自定义 Emojis: 添加您自己的基于图像的emoji部分(如Slack自定义的emojis)和一个被频繁使用的部分.
安装
要使用此组件, 您的项目必须使用 React 和 Tailwind .
要安装组件 :
bun add @ferrucc-io/emoji-picker
# or
yarn add @ferrucc-io/emoji-picker
# or
npm i @ferrucc-io/emoji-picker
# or
pnpm add @ferrucc-io/emoji-picker
在您的工程中,您可以使用这样的组件:
<EmojiPicker onEmojiSelect={handleEmojiSelect}>
<EmojiPicker.Header>
<EmojiPicker.Input placeholder="Search emoji" />
</EmojiPicker.Header>
<EmojiPicker.Group>
<EmojiPicker.List />
</EmojiPicker.Group>
</EmojiPicker>
最后,导入您 Tailwind 配置中的组件样式 :
// If you're using Tailwind v4.x
// In your CSS file containing your tailwind configuration
// Add this line:
@source "../node_modules/@ferrucc-io/emoji-picker";
// If you're using Tailwind v3.x
// In your tailwind.config.ts
"content": [
// Keep the existing content array
// Add this line:
"./node_modules/@ferrucc-io/emoji-picker/dist/**/*.{js,jsx,ts,tsx}",
],
默认样式
<EmojiPicker onEmojiSelect={handleEmojiSelect}>
<EmojiPicker.Header>
<EmojiPicker.Input placeholder="Search emoji" />
</EmojiPicker.Header>
<EmojiPicker.Group>
<EmojiPicker.List />
</EmojiPicker.Group>
</EmojiPicker>
道具自定义( C)
基础组件接受几种定制道具:
interface EmojiPickerProps {
emojisPerRow?: number; // Number of emojis per row
emojiSize?: number; // Size of each emoji in pixels
containerHeight?: number; // Height of the emoji container
maxUnicodeVersion?: number; // Maximum Unicode version to include (defaults to 16.0, matching unicode-emoji-json package). Hides unsupported emojis that render as � on the user's system
onEmojiSelect?: (emoji: string) => void; // Callback when emoji is selected
customSections?: CustomSection[]; // Custom image-based emoji sections to show alongside the standard categories
frequentlyUsedEmojis?: (string | CustomEmoji)[]; // Emojis to show in a "Frequently Used" section at the top
renderHeader?: (props: HeaderRendererProps) => React.ReactNode; // Custom renderer for section headers
}
自定义 Emojis
您可以通过 : customSections prop,并将一个"经常使用"的段落标出在列表的首位,其中 frequentlyUsedEmojis数字 :
import { EmojiPicker } from '@ferrucc-io/emoji-picker';
import type { CustomEmoji, CustomSection } from '@ferrucc-io/emoji-picker';
const customSections: CustomSection[] = [
{
id: 'custom',
name: 'Custom',
priority: 1, // Lower values appear first (defaults to 999)
emojis: [
{ id: 'mic-drop', name: 'mic-drop', imageUrl: '/custom-emojis/mic-drop.gif' },
{ id: 'shipitparrot', name: 'shipitparrot', imageUrl: '/custom-emojis/shipitparrot.gif' },
],
},
];
// Mix standard emoji strings and custom emoji objects
const frequentlyUsedEmojis: (string | CustomEmoji)[] = [
'👍',
'❤️',
{ id: 'thisisfine', name: 'thisisfine', imageUrl: '/custom-emojis/thisisfine.gif' },
];
<EmojiPicker
customSections={customSections}
frequentlyUsedEmojis={frequentlyUsedEmojis}
onEmojiSelect={(emoji) => {
// Standard emojis: the emoji character, e.g. "👍"
// Custom emojis: the name wrapped in colons, e.g. ":mic-drop:"
console.log(emoji);
}}
>
{/* ... */}
</EmojiPicker>
自定义的emojis按名可搜索,支持完整的键盘导航,并像标准emojis一样出现在预览中.
相关类型从包中导出,并带有 isCustomEmoji 类型守护 :
interface CustomEmoji {
id: string;
name: string;
imageUrl: string;
category?: string;
}
interface CustomSection {
id: string;
name: string;
emojis: (EmojiMetadata | CustomEmoji)[];
priority?: number; // Lower values appear first (defaults to 999)
}
自定义区域标题
使用 renderHeader 完全控制分区标题的配置道具 :
import type { HeaderRendererProps } from '@ferrucc-io/emoji-picker';
function MyHeader({ content, isSticky }: HeaderRendererProps) {
return (
<div className={isSticky ? 'bg-white/95 backdrop-blur-sm' : 'bg-transparent'}>
{content}
</div>
);
}
<EmojiPicker renderHeader={MyHeader}>
{/* ... */}
</EmojiPicker>
实例
组成部分背后的主要思想是能够支持尽可能多的不同风格. 我们制作的第一个版本 支持建立一个拾取器 看起来像Slack和Linear的.
将来最好能支持Discord,Whatsapp,Notion等更多风格.
线性样式
<EmojiPicker
className="border border-zinc-200 dark:border-zinc-800 rounded-lg"
emojisPerRow={12}
emojiSize={28}
onEmojiSelect={onEmojiSelect}
>
<EmojiPicker.Header className="p-2 pb-0">
<EmojiPicker.Input
placeholder="Search emoji"
autoFocus={true}
className="focus:ring-2 focus:ring-inset ring-1 ring-transparent"
/>
</EmojiPicker.Header>
<EmojiPicker.Group>
<EmojiPicker.List hideStickyHeader={true} containerHeight={400} />
</EmojiPicker.Group>
</EmojiPicker>
黑样式
<EmojiPicker
className="font-['Lato'] w-[380px] border-none"
emojisPerRow={9}
emojiSize={36}
>
<EmojiPicker.Header>
<EmojiPicker.Input
placeholder="Search all emoji"
className="h-[36px] bg-white dark:bg-zinc-800 border border-zinc-300 dark:border-zinc-600 w-full rounded-[8px] text-[15px] focus:shadow-[0_0_0_1px_#1d9bd1,0_0_0_6px_rgba(29,155,209,0.3)] dark:focus:shadow-[0_0_0_1px_#1d9bd1,0_0_0_6px_rgba(29,155,209,0.3)] focus:border-transparent focus:outline-none mb-1"
hideIcon
/>
</EmojiPicker.Header>
<EmojiPicker.Group>
<EmojiPicker.List containerHeight={320} />
</EmojiPicker.Group>
<EmojiPicker.Preview>
{({ previewedEmoji }) => (
<>
{previewedEmoji ?
<EmojiPicker.Content />
:
<button>Add Emoji</button>
}
<EmojiPicker.SkinTone />
</>
)}
</EmojiPicker.Preview>
</EmojiPicker>
用于
该项目目前用于:
随便打开公关,在这里添加你的名字 如果你在项目里使用组件的话.
贷项
此工程是使用 bun init 在包子v1.2.0. 阿宝 是一个快速的全能JavaScript运行时间.
捐款
这个项目的结构是单一的,有两个主要部分:
packages/emoji-picker: 主包中包含 emoji 拾取器组件demo:演示应用程序显示组件的不同用途
开发设置
要从发展入手:
# Install dependencies for all packages
bun install
# Run the development server
bun dev
更新 Emoji 颜色
要更新 emoji 徘徊的颜色 :
cd packages/emoji-picker
bun run build:emoji-colors
这将产生一个新的 emojiColors.ts 在软件包中的文件 src/utils 目录.
测试
# Run tests for the emoji picker package
cd packages/emoji-picker
bun test
欢迎捐款! 请随意提交公关.