status-im
/
rn-emoji-keyboard
mirror of https://github.com/status-im/rn-emoji-keyboard.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor: improve readme and change package name

This commit is contained in:
Jakub Grzywacz 2021-07-19 19:26:41 +02:00
parent f58aa52e40
commit b8aeaebcf0
No known key found for this signature in database
GPG Key ID: 5BBB685871FF63C4
1 changed files with 31 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
README.md
View File

@ -1,12 +1,20 @@
# @jake7/react-native-emoji-keyboard # 🚀 rn-emoji-keyboard
A lightweight emoji picker, fully customizable, written as React Native component (without native elements). Designated to be user and developer friendly! 💖
![Preview](/example/assets/preview-small.gif) ![Preview](/example/assets/preview-small.gif)
## Usage ## 🪄 Installation
```sh
yarn add rn-emoji-keyboard
```
or
```sh
npm install rn-emoji-keyboard
```
## ⚡️ Usage
```js ```js
import EmojiPicker from '@jake7/react-native-emoji-keyboard'; import EmojiPicker from 'rn-emoji-keyboard';
export default function App() { export default function App() {
const [isOpen, setIsOpen] = React.useState<boolean>(false); const [isOpen, setIsOpen] = React.useState<boolean>(false);
@ -30,17 +38,7 @@ export default function App() {
} }
``` ```
## Installation ## ⚙️ Accepted props (current implemented)
```sh
yarn add @jake7/react-native-emoji-keyboard
```
or
```sh
npm install @jake7/react-native-emoji-keyboard
```
## Accepted props (current implemented)
| Name | Type | Default Value | Required | Description | | Name | Type | Default Value | Required | Description |
|---|---|---|---|---| |---|---|---|---|---|
| onEmojiSelected | function | undefined | yes | Callback on emoji selected | | onEmojiSelected | function | undefined | yes | Callback on emoji selected |
@ -61,21 +59,21 @@ npm install @jake7/react-native-emoji-keyboard
| onCategoryChangeFailed | function | warn(info) | no | Callback on category change failed (info: {index, highestMeasuredFrameIndex, averageItemLength}) | | onCategoryChangeFailed | function | warn(info) | no | Callback on category change failed (info: {index, highestMeasuredFrameIndex, averageItemLength}) |
| translation | CategoryTranslation | en | no | Translation object *see translation section* | | translation | CategoryTranslation | en | no | Translation object *see translation section* |
| disabledCategory | CategoryTypes[] | [] | no | Hide categories by passing their slugs | | disabledCategory | CategoryTypes[] | [] | no | Hide categories by passing their slugs |
## Internationalization ## 🇺🇸 Internationalization
### Pre-defined ### Pre-defined
Due to the limited translation possibilities, we only provide a few pre-defined translations into the following languages: Due to the limited translation possibilities, we only provide a few pre-defined translations into the following languages:
* `en` - English * `en` - English 🇺🇸
* `pl` - Polish * `pl` - Polish 🇵🇱
First import lang and use it as `translation` prop. First import lang and use it as `translation` prop.
```ts ```ts
import { pl } from '@jake7/react-native-emoji-keyboard'; import { pl } from 'rn-emoji-keyboard';
// ... // ...
translation={pl} translation={pl}
``` ```
### Own ### 🏁 Own
There is possibility to pass own translation to library with the prop called `translation` like this There is possibility to pass own translation to library with the prop called `translation` like this
```ts ```ts
translation={{ translation={{
@ -91,20 +89,20 @@ translation={{
}} }}
``` ```
*If you have written a translation into your language, we strongly encourage you to create a Pull Request and add your language to the package, following the example of other langs.* *If you have written a translation into your language, we strongly encourage you to create a Pull Request and add your language to the package, following the example of other langs.*
## Full Example ## 📚 Full Example
```ts ```ts
import * as React from 'react'; import * as React from 'react';
import { Text, SafeAreaView, TouchableOpacity } from 'react-native'; import { Text, SafeAreaView, TouchableOpacity } from 'react-native';
import EmojiPicker from '@jake7/react-native-emoji-keyboard'; import EmojiPicker from 'rn-emoji-keyboard';
import { EmojiType } from '@jake7/react-native-emoji-keyboard/lib/typescript/types'; import { EmojiType } from 'rn-emoji-keyboard/lib/typescript/types';
export default function App() { export default function App() {
const [result, setResult] = React.useState<string>(); const [result, setResult] = React.useState<string>();
const [isModalOpen, setIsModalOpen] = React.useState<boolean>(false); const [isModalOpen, setIsModalOpen] = React.useState<boolean>(false);
const handlePick = (emoji: EmojiType) => { const handlePick = (emojiObject: EmojiType) => {
setResult(emoji.emoji); setResult(emojiObject.emoji);
setIsModalOpen((prev) => !prev); setIsModalOpen(false);
}; };
return ( return (
@ -122,5 +120,9 @@ const handlePick = (emoji: EmojiType) => {
); );
} }
``` ```
## License ## 📈 Future plans
* Skin tone palette selector.
* Search bar.
* Hide forbidden emojis.
## ⚖️ License
**[MIT](/LICENSE)** **[MIT](/LICENSE)**