{"_id":"@alihesari/emoji-picker","_rev":"2-41c658a71a206a19ab41c1b29dfea9eb","name":"@alihesari/emoji-picker","dist-tags":{"latest":"0.1.2"},"versions":{"0.1.0":{"name":"@alihesari/emoji-picker","version":"0.1.0","keywords":["emoji","emoji-picker","react","react-emoji","emoji-selector","unicode","picker","lightweight"],"author":{"name":"Ali Hesari","email":"ali@alihesari.com"},"license":"MIT","_id":"@alihesari/emoji-picker@0.1.0","maintainers":[{"name":"alihesari","email":"alihesari.com@gmail.com"}],"homepage":"https://github.com/alihesari/emoji-picker#readme","bugs":{"url":"https://github.com/alihesari/emoji-picker/issues"},"dist":{"shasum":"91a5f736f328a6454dc96f59e96dd34ec9503871","tarball":"https://registry.npmjs.org/@alihesari/emoji-picker/-/emoji-picker-0.1.0.tgz","fileCount":10,"integrity":"sha512-npNXdoZMmQWFwHXWWFtE4NErjs5djZ4WRI2Wr0sQ+YvMTd+PYOpqPHhMYHOuOx6psa19PYXlpKiSy+RKiXDwSg==","signatures":[{"sig":"MEYCIQC1iDKsZ1cZxFfrsv2SdLNg6vosHhgW3saGxXWYGKOdggIhAI4Sv5Y8OP2EXUH7YbJI/ni522tQePvM4GKDcJ3A6PlS","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":668437},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./styles.css":"./dist/styles.css"},"gitHead":"161445a31072a805b50165bf1b5de770abb13374","scripts":{"dev":"tsup --watch","lint":"eslint src/","build":"tsup","typecheck":"tsc --noEmit","prepublishOnly":"pnpm build"},"_npmUser":{"name":"alihesari","email":"alihesari.com@gmail.com"},"repository":{"url":"git+https://github.com/alihesari/emoji-picker.git","type":"git"},"_npmVersion":"10.9.2","description":"A fast, lightweight, zero-dependency emoji picker for React. Virtual scrolling, keyboard navigation, skin tones, search, and full accessibility — all under 30KB gzipped.","directories":{},"sideEffects":["*.css"],"_nodeVersion":"22.13.1","_hasShrinkwrap":false,"packageManager":"pnpm@9.15.0+sha512.76e2379760a4328ec4415815bcd6628dee727af3779aaa4c914e3944156c4299921a89f976381ee107d41f12cfa4b66681ca9c718f0668fa0831ed4c6d8ba56c","devDependencies":{"tsup":"^8.5.0","react":"^19.2.4","react-dom":"^19.2.4","typescript":"^5.9.3","@types/react":"^19.2.10","@types/react-dom":"^19.2.3"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/emoji-picker_0.1.0_1774733740535_0.19972168224373332","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@alihesari/emoji-picker","version":"0.1.2","description":"A fast, lightweight, zero-dependency emoji picker for React. Virtual scrolling, keyboard navigation, skin tones, search, and full accessibility — all under 30KB gzipped.","keywords":["emoji","emoji-picker","react","react-emoji","emoji-selector","unicode","picker","lightweight"],"license":"MIT","author":{"name":"Ali Hesari","email":"ali@alihesari.com"},"repository":{"type":"git","url":"git+https://github.com/alihesari/emoji-picker.git"},"homepage":"https://github.com/alihesari/emoji-picker#readme","bugs":{"url":"https://github.com/alihesari/emoji-picker/issues"},"type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./styles.css":"./dist/styles.css"},"sideEffects":["*.css"],"scripts":{"build":"tsup","dev":"tsup --watch","lint":"eslint src/","typecheck":"tsc --noEmit","prepublishOnly":"pnpm build"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"devDependencies":{"@types/react":"^19.2.10","@types/react-dom":"^19.2.3","react":"^19.2.4","react-dom":"^19.2.4","tsup":"^8.5.0","typescript":"^5.9.3"},"packageManager":"pnpm@9.15.0+sha512.76e2379760a4328ec4415815bcd6628dee727af3779aaa4c914e3944156c4299921a89f976381ee107d41f12cfa4b66681ca9c718f0668fa0831ed4c6d8ba56c","_id":"@alihesari/emoji-picker@0.1.2","gitHead":"33f405d8439ba1aeb756eca9cad3565b30f1988f","_nodeVersion":"22.13.1","_npmVersion":"10.9.2","dist":{"integrity":"sha512-LoQVxUlAmYZ1DZxUcOMeeLodv/kSs/UKT0oerZBFIhCvoLPrU9Ey61sqpEwPxA5U/kYcrNNmbvGI+khL+pZJdQ==","shasum":"eec6e3133fcb34db1d6996ec8e79987e96c48a7f","tarball":"https://registry.npmjs.org/@alihesari/emoji-picker/-/emoji-picker-0.1.2.tgz","fileCount":10,"unpackedSize":668923,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIDyClR+1JvsF18QuURyVhDPP2gBh3AmWNLHvPLivhq7kAiBMwV0UllUWZBJ7v9RWBvW/XcSoejBP2pbsTmL5HsBs7A=="}]},"_npmUser":{"name":"alihesari","email":"alihesari.com@gmail.com"},"directories":{},"maintainers":[{"name":"alihesari","email":"alihesari.com@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/emoji-picker_0.1.2_1774735721528_0.8011465986779192"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-28T21:35:40.478Z","modified":"2026-03-28T22:08:41.878Z","0.1.0":"2026-03-28T21:35:40.759Z","0.1.2":"2026-03-28T22:08:41.756Z"},"bugs":{"url":"https://github.com/alihesari/emoji-picker/issues"},"author":{"name":"Ali Hesari","email":"ali@alihesari.com"},"license":"MIT","homepage":"https://github.com/alihesari/emoji-picker#readme","keywords":["emoji","emoji-picker","react","react-emoji","emoji-selector","unicode","picker","lightweight"],"repository":{"type":"git","url":"git+https://github.com/alihesari/emoji-picker.git"},"description":"A fast, lightweight, zero-dependency emoji picker for React. Virtual scrolling, keyboard navigation, skin tones, search, and full accessibility — all under 30KB gzipped.","maintainers":[{"name":"alihesari","email":"alihesari.com@gmail.com"}],"readme":"# @alihesari/emoji-picker\n\nA fast, lightweight, zero-dependency emoji picker for React.\n\n<p align=\"center\">\n  <img src=\"https://raw.githubusercontent.com/alihesari/emoji-picker/main/media/screenshot-light.png\" alt=\"Emoji Picker Light Theme\" width=\"350\" height=\"349\" />\n  <img src=\"https://raw.githubusercontent.com/alihesari/emoji-picker/main/media/screenshot-dark.png\" alt=\"Emoji Picker Dark Theme\" width=\"350\" />\n</p>\n\n<p align=\"center\">\n  <img src=\"https://raw.githubusercontent.com/alihesari/emoji-picker/main/media/demo.gif\" alt=\"Emoji Picker Demo\" width=\"600\" />\n</p>\n\n- **Virtual scrolling** — renders only visible rows for buttery-smooth performance\n- **Skin tone support** — per-emoji skin tone modifiers\n- **Search** — instant filtering across names and keywords\n- **Recent emojis** — localStorage-backed recently-used list\n- **Full accessibility** — ARIA roles, keyboard navigation, focus management\n- **Themeable** — light / dark / auto via CSS custom properties\n- **Tiny** — zero runtime dependencies, tree-shakeable ESM + CJS\n- **TypeScript** — complete type definitions included\n\n## Installation\n\n```bash\n# npm\nnpm install @alihesari/emoji-picker\n\n# pnpm\npnpm add @alihesari/emoji-picker\n\n# yarn\nyarn add @alihesari/emoji-picker\n```\n\n> Peer dependencies: `react >=18` and `react-dom >=18`.\n\n## Quick Start\n\n```tsx\nimport { EmojiPicker } from \"@alihesari/emoji-picker\";\nimport \"@alihesari/emoji-picker/styles.css\";\n\nfunction App() {\n  return (\n    <EmojiPicker\n      onEmojiClick={(emoji) => {\n        console.log(emoji.emoji); // 😎\n        console.log(emoji.name);  // \"smiling face with sunglasses\"\n      }}\n    />\n  );\n}\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `onEmojiClick` | `(emoji: EmojiData) => void` | **required** | Called when an emoji is clicked |\n| `width` | `number` | `350` | Width in pixels |\n| `height` | `number` | `450` | Height in pixels |\n| `theme` | `\"light\" \\| \"dark\" \\| \"auto\"` | `\"auto\"` | Color theme (`auto` follows system) |\n| `categories` | `CategoryId[]` | all categories | Which categories to display |\n| `searchPlaceholder` | `string` | `\"Search emojis…\"` | Placeholder for the search input |\n| `searchDisabled` | `boolean` | `false` | Hide the search bar |\n| `skinTonesDisabled` | `boolean` | `false` | Hide the skin tone selector |\n| `defaultSkinTone` | `SkinTone` | `\"neutral\"` | Default skin tone |\n| `recentEnabled` | `boolean` | `true` | Enable the Recent category |\n| `maxRecent` | `number` | `30` | Max number of recent emojis to store |\n| `autoFocusSearch` | `boolean` | `false` | Auto-focus search on mount |\n| `previewConfig` | `PreviewConfig` | `{ enabled: true, showName: true }` | Configure the preview bar |\n| `columns` | `number` | `8` | Number of columns in the grid |\n| `emojiSize` | `number` | `40` | Size of each emoji button (px) |\n| `className` | `string` | — | Extra CSS class on root |\n| `style` | `CSSProperties` | — | Inline styles on root |\n\n## Types\n\n```ts\ninterface EmojiData {\n  emoji: string;        // The rendered emoji (with skin tone applied)\n  name: string;         // Human-readable name\n  originalEmoji: string; // Emoji without skin tone\n  skinTone: SkinTone;   // Which skin tone was applied\n}\n\ntype SkinTone = \"neutral\" | \"light\" | \"medium-light\" | \"medium\" | \"medium-dark\" | \"dark\";\n\ntype CategoryId =\n  | \"recent\" | \"smileys\" | \"people\" | \"animals\" | \"food\"\n  | \"travel\" | \"activities\" | \"objects\" | \"symbols\" | \"flags\";\n```\n\n## Theming\n\nAll colours use CSS custom properties. Override them on `.ep-root` or a parent:\n\n```css\n.my-picker {\n  --ep-bg: #1a1a2e;\n  --ep-border: #16213e;\n  --ep-text: #eaeaea;\n  --ep-text-secondary: #888;\n  --ep-hover-bg: #16213e;\n  --ep-active-bg: #0f3460;\n  --ep-input-bg: #0a0a1a;\n  --ep-input-border: #16213e;\n  --ep-radius: 12px;\n}\n```\n\n```tsx\n<EmojiPicker className=\"my-picker\" onEmojiClick={handleClick} />\n```\n\n### Available custom properties\n\n| Property | Description |\n| --- | --- |\n| `--ep-bg` | Background colour |\n| `--ep-border` | Border & divider colour |\n| `--ep-text` | Primary text colour |\n| `--ep-text-secondary` | Secondary/muted text |\n| `--ep-hover-bg` | Hover background |\n| `--ep-active-bg` | Active/selected background |\n| `--ep-input-bg` | Search input background |\n| `--ep-input-border` | Search input border |\n| `--ep-radius` | Root border radius |\n| `--ep-font-family` | Font family |\n\n## Keyboard Navigation\n\n- **Escape** — clears the search query\n- **Tab** — navigates between search, categories, and the grid\n- Standard focus management with `:focus-visible` outlines\n\n## Comparison with emoji-picker-react\n\n| Feature | @alihesari/emoji-picker | emoji-picker-react |\n| --- | --- | --- |\n| Runtime dependencies | **0** | 5+ |\n| Virtual scrolling | **Built-in** | No |\n| Bundle size (gzipped) | **~25KB** | ~90KB |\n| CSS-in-JS | **No** (CSS custom props) | Yes |\n| SSR safe | **Yes** | Partial |\n| TypeScript | **Full** | Full |\n| Tree-shakeable | **Yes** | Partial |\n\n## Development\n\n```bash\n# Install dependencies\npnpm install\n\n# Build\npnpm build\n\n# Dev (watch mode)\npnpm dev\n\n# Type check\npnpm typecheck\n```\n\n## License\n\nMIT © [Ali Hesari](https://github.com/alihesari)\n","readmeFilename":"README.md"}