-
Notifications
You must be signed in to change notification settings - Fork 63
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: add emojisData export * docs: add Emojis Data JSON section * feat: allow to pass own set of emojis * docs: add emojisByGroup prop description, modified emojiDataJson section * fix: emojisByGroup types * feat: made custom emojis optional props, used our emoji data as default * feat: add customEmojisData example * docs: add customEmojisData example section, updated modal.md * chore: changed fn name in customEmojiData example * docs: deleted unneccesary import from customEmojisData example * chore: minor types and imports changes * change: improve docs * refactor: change emojisByGroup to emojisByCategory * fix: typescript types in context * fix: unused import in keyboard provider --------- Co-authored-by: Jakub Grzywacz <kontakt@jakubgrzywacz.pl>
- Loading branch information
Showing
12 changed files
with
170 additions
and
8 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
--- | ||
sidebar_position: 6 | ||
title: Emojis Data | ||
--- | ||
|
||
The library provides the ability to import a `.json` file containing all currently available emojis. Additionally, you can pass your own set of emojis, provided they follow our structure and types. | ||
|
||
To import the emojis data, use the following code: | ||
|
||
```ts | ||
import { emojisByCategory } from 'rn-emoji-keyboard' | ||
``` | ||
|
||
Here is the EmojisData structure explained as Typescript code | ||
|
||
```ts | ||
type EmojiType = { | ||
emoji: string // Visual representation of emoji | ||
name: string | ||
slug: string | ||
unicode_version: string | ||
toneEnabled: boolean | ||
alreadySelected?: boolean | ||
} | ||
|
||
type EmojisByCategory = { | ||
title: CategoryTypes | ||
data: JsonEmoji[] | ||
} | ||
|
||
const emojisByCategory: EmojisByCategory[] | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,44 @@ | ||
--- | ||
sidebar_position: 11 | ||
title: Custom Emojis Data | ||
--- | ||
|
||
:::info | ||
To preview app with this example, clone [**github repo**](https://github.com/TheWidlarzGroup/rn-emoji-keyboard.git) and run `yarn example ios` or `yarn example android`. | ||
::: | ||
|
||
### Usage | ||
|
||
It's possible to pass your own set of emojis. You have to keep in mind that types and category titles must match the ones that we are using. In the example you can see custom emojis set that contains only emojis with unicode version === 11. | ||
|
||
```jsx | ||
import EmojiPicker, { emojisByCategory } from 'rn-emoji-keyboard' | ||
import type { EmojisByCategory } from 'src/types' | ||
|
||
const getCustomEmojis = () => { | ||
const newEmojiSet: EmojisByCategory[] = [] | ||
for (const [, value] of Object.entries(emojisByCategory)) { | ||
const newData = value.data.filter((emoji) => parseFloat(emoji.v) === 11) | ||
newEmojiSet.push({ | ||
title: value.title, | ||
data: newData, | ||
}) | ||
} | ||
return newEmojiSet | ||
} | ||
|
||
const ExampleComponent = () => { | ||
// ... | ||
|
||
return ( | ||
<EmojiPicker | ||
open={isOpen} | ||
onClose={handleOnClose} | ||
onEmojiSelected={handleOnEmojiSelected} | ||
emojisByCategory={getCustomEmojis()} | ||
/> | ||
) | ||
} | ||
``` | ||
|
||
![Preview](../../../assets/img/custom-emojis-data.png) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,57 @@ | ||
import * as React from 'react' | ||
import { StyleSheet, Text, TouchableOpacity } from 'react-native' | ||
import { SafeAreaView } from 'react-native-safe-area-context' | ||
import EmojiPicker, { emojisByCategory } from 'rn-emoji-keyboard' | ||
|
||
import type { EmojiType, EmojisByCategory } from 'src/types' | ||
|
||
const getCustomEmojis = () => { | ||
const newEmojiSet: EmojisByCategory[] = [] | ||
for (const [, value] of Object.entries(emojisByCategory)) { | ||
const newData = value.data.filter((emoji) => parseFloat(emoji.v) === 11) | ||
newEmojiSet.push({ | ||
title: value.title, | ||
data: newData, | ||
}) | ||
} | ||
return newEmojiSet | ||
} | ||
|
||
const CustomEmojisData = () => { | ||
const [result, setResult] = React.useState<string>() | ||
const [isModalOpen, setIsModalOpen] = React.useState<boolean>(false) | ||
|
||
const handlePick = (emoji: EmojiType) => { | ||
console.log(emoji) | ||
setResult(emoji.emoji) | ||
setIsModalOpen((prev) => !prev) | ||
} | ||
return ( | ||
<SafeAreaView style={styles.container}> | ||
<Text style={styles.text}>Result: {result}</Text> | ||
<TouchableOpacity onPress={() => setIsModalOpen(true)}> | ||
<Text style={styles.text}>Open</Text> | ||
</TouchableOpacity> | ||
|
||
<EmojiPicker | ||
onEmojiSelected={handlePick} | ||
open={isModalOpen} | ||
onClose={() => setIsModalOpen(false)} | ||
emojisByCategory={getCustomEmojis()} | ||
/> | ||
</SafeAreaView> | ||
) | ||
} | ||
|
||
const styles = StyleSheet.create({ | ||
container: { | ||
flex: 1, | ||
}, | ||
text: { | ||
textAlign: 'center', | ||
margin: 64, | ||
fontSize: 18, | ||
}, | ||
}) | ||
|
||
export default CustomEmojisData |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters