svelte-emoji-keyboard

A customizable emoji keyboard component for Svelte applications.

Features

• Full Emoji Categories: Smileys & People, Animals & Nature, Food & Drink, Activities, Travel & Places, Objects, Symbols, and Flags
• Recent Emojis: Automatically stores and displays recently used emojis using localStorage
• Emoji Search: Comprehensive search functionality to find emojis quickly
• Skin Tone Variations: Support for emojis with multiple skin tone components
• Responsive Design: Works on mobile and desktop devices
• Touch Support: Optimized for touch devices with drag-to-scroll functionality
• Customizable: Easily customize the appearance and behavior
• Dark Mode Support: Automatic detection of system dark mode preference
• Component Variations: Long-press or right-click on emojis with skin tone variations to select specific components

Installation

npm install svelte-emoji-keyboard

Usage

Basic Usage

<script lang="ts">
	import { EmojiKeyboard } from 'svelte-emoji-keyboard';

	let selectedEmoji = '';

	function handleEmojiSelect(emoji: string) {
		selectedEmoji = emoji;
	}

	function handleBackspace() {
		selectedEmoji = '';
	}
</script>

<div class="emoji-keyboard">
	<EmojiKeyboard onEmojiSelect={handleEmojiSelect} onBackspace={handleBackspace} />
</div>

{#if selectedEmoji}
	<p>Selected: {selectedEmoji}</p>
{/if}
<!-- rest of the code and styling -->

Compact Popular Emojis

<script lang="ts">
	import { EmojiKeyboardPopular } from 'svelte-emoji-keyboard';

	let showFullKeyboard = false;

	function handleEmojiSelect(emoji: string) {
		console.log('Selected emoji:', emoji);
	}
</script>

<div class="emoji-keyboard-compact">
	<EmojiKeyboardPopular
		onEmojiSelect={handleEmojiSelect}
		onToggleFullKeyboard={() => (showFullKeyboard = true)}
		onClose={() => {}}
		popularEmojis={['😀', '😂', '👍', '❤️', '🔥']}
		useRecentEmojis={true}
	/>
</div>

{#if showFullKeyboard}
	<!-- Show full keyboard here -->
{/if}
<!-- rest of the code and styling -->

API Reference

EmojiKeyboard Props

| Prop | Type | Description | | ------------------------ | ------------------------- | ----------------------------------------------------------------- | | onEmojiSelect | (emoji: string) => void | Called when an emoji is selected (including component variations) | | onBackspace | () => void | Called when the backspace button is pressed | | onClose | () => void | Called when the keyboard should be closed | | categoryHighlightColor | string | Custom color for the active category tab (default: '#a825ff') | | darkMode | boolean | Force dark mode (optional, defaults to system preference) |

EmojiKeyboardPopular Props

| Prop | Type | Description | | ---------------------- | ------------------------- | ------------------------------------------------------------------- | | onEmojiSelect | (emoji: string) => void | Called when an emoji is selected (including component variations) | | onToggleFullKeyboard | () => void | Called when the user wants to toggle to the full keyboard | | onClose | () => void | Called when the keyboard should be closed | | popularEmojis | string[] | Array of emojis to display as popular (optional) | | useRecentEmojis | boolean | Whether to include recent emojis from localStorage (default: false) | | darkMode | boolean | Force dark mode (optional, defaults to system preference) |

Development

To run the demo locally:

npm install
npm run dev

Then visit http://localhost:5173/ to see the demo.

License

This project is licensed under the MIT License - see the LICENSE file for details.