😀 OnigiriJS Emoji Picker

📝 Interactive Demo

✨ Features

📚 Usage Examples

Basic Setup

// Initialize emoji module
Onigiri.emojis.init({
    showRecents: true,
    showSearch: true,
    position: 'bottom-right'
});

// Attach emoji picker to a button
document.getElementById('emoji-btn').addEventListener('click', function() {
    Onigiri.emojis.show(document.getElementById('my-textarea'));
});

Using OnigiriJS Selectors

// Automatically attach picker to all elements with class
Onigiri('.emoji-trigger').emojiPicker({
    position: 'bottom-left',
    theme: 'dark'
});

Parse Emoji Codes

// Convert shortcodes to emojis
const text = 'Hello :smile: World! :heart:';
const parsed = Onigiri.emojis.parse(text);
// Result: "Hello 😊 World! ❤️"

// Parse emojis in DOM elements
Onigiri('.comment-text').parseEmojis();

Random Emojis

// Get random emoji from category
const foodEmoji = Onigiri.emojis.random('food');
const smiley = Onigiri.emojis.random('smileys');

// Available categories:
// smileys, gestures, people, animals, food, 
// activities, travel, objects, symbols, flags

🎯 Configuration Options

🔧 Available Emoji Shortcodes

🎨 Styling

The emoji picker comes with beautiful default styles that automatically adapt to your OnigiriJS theme. To customize the appearance, simply override the CSS variables:

.emoji-picker {
    --picker-width: 320px;
    --picker-max-height: 400px;
    --emoji-size: 32px;
}

/* Customize for dark theme */
.emoji-picker.theme-dark {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}