solid-emoji-picker

> Unstyled Emoji Picker component for SolidJS

  

Install

``bash
npm i solid-emoji-picker
`

`bash
yarn add solid-emoji-picker
`

`bash
pnpm add solid-emoji-picker
`

Usage

$3

`jsx
import { EmojiPicker } from 'solid-emoji-picker';

function App() {
function pickEmoji(emoji) {
console.log('You clicked', emoji.name);
}

return (

);
}
`

$3

The emoji data is based on unicode-emoji-json.

$3

All event properties receives the emoji item data and the accompanying event value.

- onEmojiClick - "click" event
- onEmojiFocus - "focus" event
- onEmojiHover - "mouseover" event

$3

The emoji picker has the following structure:

`html


You can define your selected skin tone with the skinTone property for EmojiPicker. The skinTone property has the following possible values: "light", "medium-light", "medium", "medium-dark" and "dark". By default, it is undefined.

`jsx

`

Take note that some emojis might not correctly apply the skin tone, this depends on the emoji support.

$3

filter allows conditionally rendering each emoji item. filter receives the emoji item data which shall then return a boolean. This is useful for emulating emoji search.

`jsx
emoji.name.includes('hand')} />
`

$3

renderEmoji allows emoji to be rendered in a user-defined way. renderEmoji receives the emoji item data, the components (used for skin tone reference) and the currently selected skin tone, in which renderEmoji must return a JSX.Element.

Here's an example with twemoji:

`jsx
import twemoji from 'twemoji';
import {
convertSkinToneToComponent,
getEmojiWithSkinTone,
} from 'solid-emoji-picker';

function getTwemoji(
emojis,
emoji,
components,
tone,
) {
const skinTone = convertSkinToneToComponent(components, tone);
const tonedEmoji = getEmojiWithSkinTone(emojis, emoji, skinTone);
return twemoji.parse(tonedEmoji);
}

function renderTwemoji(
emojis,
emoji,
components,
tone,
) {
return ;
}


`

If renderEmoji is unspecified, it renders the following:

`jsx
{emojiCodeWithSkinTone}
`

$3

By default, solid-emoji-picker loads the emoji data from unicode-emoji-json's UNPKG. You can use the following to modify the data handling:

- setCDN - sets the base CDN path, defaults to "https://unpkg.com/unicode-emoji-json/"
- setEmojiURL - specify the full path of the emoji data JSON. If not set, it defaults to selected CDN path + "data-by-emoji.json".
- setGroupURL - specify the full path of the group data JSON. If not set, it defaults to selected CDN path + "data-by-group.json".
- setComponentsURL - specify the full path of the component JSON. If not set, it defaults to selected CDN path + "data-emoji-components.json".
- loadEmojiData - Fetch the emoji data.
- loadEmojiComponents - Fetch the components data.
- loadEmojiGroupData - Fetch the emoji group data.
- setEmojiData - Set the emoji data.
- setEmojiComponents - Set the components data.
- setEmojiGroupData - Set the emoji group data.

$3

uses createResource for data fetching. Wrapping it in is recommended.

To directly access these resource primitives, you can use useEmojiData, useEmojiGroupData and useEmojiComponents`, both returns the data resource.

Sponsors

!Sponsors

License

MIT © lxsmnsyc