@reactivekit/emojipicker
v0.2.0
Published
This package provides a customizable, easy-to-use emoji picker component for your React applications.
Downloads
4
Maintainers
Readme
@reactivekit/emojipicker
This package provides a customizable, easy-to-use emoji picker component for your React applications.
Installation
npm install @reactivekit/emojipicker
# or
pnpm add @reactivekit/emojipicker
# or
yarn add @reactivekit/emojipicker
Usage with Tailwindcss
// Example usage of the EmojiPicker component with tailwindcss
import {
EmojiPicker,
EmojiGroupNavigator,
EmojiViewPanel,
EmojiSearch,
SkintonePicker,
} from '@reactivekit/emojipicker';
const EmojiPickerComponent = () => {
return (
<div className="p-4 w-80 mx-auto bg-white shadow-lg rounded-lg">
<EmojiPicker
onEmojiClick={(emoji) => {
console.log(emoji);
}}
>
<div className="flex gap-2">
<EmojiSearch type="text" className="border bg-gray-100 h-8 rounded-lg w-full" />
<SkintonePicker
componentProps={{
trigger: {
className:
'w-8 h-8 grid place-items-center shrink-0 rounded-lg border [&>span]:contents',
},
option: { className: 'py-1' },
item: { className: 'block rounded-lg w-6 h-6 cursor-pointer' },
}}
/>
</div>
<EmojiGroupNavigator
className="flex py-4 gap-2 justify-evenly"
componentProps={{
tab: { className: 'data-[state=active]:text-blue-700 transition-colors' },
icon: { className: 'w-5 h-5' },
}}
/>
<EmojiViewPanel
className="h-80 overflow-y-auto"
style={{ scrollbarWidth: 'thin' }}
componentProps={{
groupHeading: {
className: 'text-sm font-bold bg-white bg-opacity-80 px-2 py-1 sticky top-0',
},
groupContent: { className: 'grid grid-cols-7 text-2xl' },
emoji: { className: 'cursor-pointer transition-colors rounded hover:bg-gray-100' },
}}
/>
</EmojiPicker>
</div>
);
};
Documentation
For more documentation, visit EmojiPicker Docs