Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/LXSMNSYC/solid-emoji-picker
Unstyled emoji picker for SolidJS
https://github.com/LXSMNSYC/solid-emoji-picker
Last synced: about 1 month ago
JSON representation
Unstyled emoji picker for SolidJS
- Host: GitHub
- URL: https://github.com/LXSMNSYC/solid-emoji-picker
- Owner: lxsmnsyc
- License: mit
- Created: 2021-12-01T16:20:40.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-04-16T05:23:29.000Z (8 months ago)
- Last Synced: 2024-11-01T14:03:27.771Z (about 1 month ago)
- Language: TypeScript
- Size: 606 KB
- Stars: 31
- Watchers: 4
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-solid-js - Solid Emoji Picker - Unstyled emoji picker for SolidJS (📦 Components & Libraries / Misc.)
README
# solid-emoji-picker
> Unstyled Emoji Picker component for SolidJS
[](https://www.npmjs.com/package/solid-emoji-picker) [](https://github.com/airbnb/javascript) [](https://codesandbox.io/s/github/LXSMNSYC/solid-emoji-picker/tree/main/examples/demo)
## Install
```bash
npm i solid-emoji-picker
```
```bash
yarn add solid-emoji-picker
```
```bash
pnpm add solid-emoji-picker
```
## Usage
### Simplest example
```jsx
import { EmojiPicker } from 'solid-emoji-picker';
function App() {
function pickEmoji(emoji) {
console.log('You clicked', emoji.name);
}
return (
);
}
```
### Emoji Data
The emoji data is based on [`unicode-emoji-json`](https://github.com/muan/unicode-emoji-json).
### Events
All event properties receives the emoji item data and the accompanying event value.
- `onEmojiClick` - `"click"` event
- `onEmojiFocus` - `"focus"` event
- `onEmojiHover` - `"mouseover"` event
### Styling
The emoji picker has the following structure:
```html
```
You can refer to these classes for styling the parts of the emoji picker.
### Skin Tones
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.
### Filtering
`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')} />
```
### Custom rendering
`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`](https://github.com/twitter/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}
```
> [!WARNING]
> As of April 2024, twemoji no longer works as their CDN is no longer maintained.
### Custom CDN
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.
### Suspense
`` 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
## License
MIT © [lxsmnsyc](https://github.com/lxsmnsyc)