Merge pull request #5 from drinking-code/v0.5.0

V0.5.0

Author: drinking-code

.npmignore

@@ -1,5 +1,3 @@
 .idea/
-.git/
-node_modules/
 src/
 lib/

README.md

@@ -1,6 +1,6 @@
 # Openmoji for React
-unofficial; bodged by drinking-code  
-not optimized for production use  
+
+unofficial; bodged by drinking-code
 
 1. [What is Openmoji for React?](#what-is-openmoji-for-react)
 2. [Installation](#installation)
@@ -14,19 +14,26 @@ not optimized for production use
         3. [Attributes](#attributes)
 
 #### What is Openmoji for React?
-[Openmoji](https://github.com/hfg-gmuend/openmoji) is a collection of open source emojis. This repository lets you use these emojis in a React app easily.
+
+[Openmoji](https://github.com/hfg-gmuend/openmoji) is a collection of open source emojis. This repository lets you use
+these emojis in a React app easily.
 
 > Please comply with the [Openmoji Attribution Requirements](https://github.com/hfg-gmuend/openmoji#attribution-requirements)
 
 ## Installation
+
 ```shell script
 npm i react-openmoji
 ```
 
 ## Usage
+
 ### Automatically
+
 #### `reactReplaceEmojis(jsx[, options])`
+
 For easy and dynamic use you can replace emojis completely automatically:
+
 ```jsx
 import React from 'react';
 import reactReplaceEmojis from 'react-openmoji';
@@ -38,9 +45,12 @@ const App = () => {
 export default App;
 ```
 
-You can also set options:  
-`size` — size of the emojis; default `1.7em`  
-`outline` — set to `true` if you want the colourless emojis; default `false`
+You can also set options:
+
+|Field|Type|Description|Default|  
+|---|---|---|---|  
+|`size`| CSS length (string) | size of the emojis | `1.5em` |  
+|`outline`| boolean | set to `true` if you want the colourless emojis | `false` |
 
 ```jsx
 import React from 'react';
@@ -57,7 +67,9 @@ export default App;
 ```
 
 #### `replaceEmojis(string[, options])`
-Is the sting equivalent to `reactReplaceEmojis`. Use this if you only want to replace emojis within a string.
+
+Is the string equivalent to `reactReplaceEmojis`. Use this if you just want to replace emojis within a string.
+
 ```jsx
 import React from 'react';
 import {replaceEmojis} from 'react-openmoji';
@@ -70,24 +82,33 @@ export default App;
 ```
 
 ### Manually
+
 #### Via icon name
+
 ```jsx
 import React from 'react';
-import { ManRaisingHand } from 'react-openmoji';
+import {ManRaisingHand} from 'react-openmoji';
 
 const App = () => {
-  return <p>Hello World! <ManRaisingHand/></p>
+    return <p>Hello World! <ManRaisingHand/></p>
 };
 
 export default App;
 ```
-Icon names from the [Openmoji Library](https://openmoji.org/library/) are converted into camelCase, so `man raising hand` translates to `ManRaisingHand`.
+
+Icon names from the [Openmoji Library](https://openmoji.org/library/) are converted into PascalCase,
+so `man raising hand` translates to `ManRaisingHand`.
+
 ##### Additions
-`:` are replaced with `_`.
+
+`:` is replaced with `_`.
+
 ```
-waving hand: light skin tone -> WavingHand_LightSkinTone
+waving hand: light skin tone  ->  WavingHand_LightSkinTone
 ```
+
 `,`, `.`, `’`, `!`, `”`, and `&` are removed.
+
 ```
 person: light skin tone, blond hair -> Person_LightSkinToneBlondHair
 Mrs. Claus                          -> MrsClaus
@@ -96,56 +117,72 @@ ON! arrow                           -> ONArrow
 Japanese “here” button              -> JapaneseHereButton
 flag: Bosnia & Herzegovina          -> Flag_BosniaHerzegovina
 ```
+
 `#` is replaced with `NumberSign`, `*` is replaced with `Asterisk`.
+
 ```
-keycap: # -> Keycap_NumberSign
-keycap: * -> Keycap_Asterisk
+keycap: #  ->  Keycap_NumberSign
+keycap: *  ->  Keycap_Asterisk
 ```
+
 Everything in brackets is removed.
+
 ```
 A button (blood type) -> AButton
 ```
+
 If a name starts with a number, a `_` is added in front of the name.
+
 ```
 1st place medal -> _1stPlaceMedal
 ```
 
+> **Note:** Some names may appear more than once in the Library (i.e. some emoji variations). Those duplicates are renamed to `DuplicatedName2`, `DuplicatedName3` etc.
+
 #### Via unicode
-You can use the unicode of the emoji to import it. Unicodes are listed also in the [Openmoji Library](https://openmoji.org/library/).
+
+You can use the unicode of the emoji to import it. Unicodes are also listed in
+the [Openmoji Library](https://openmoji.org/library/). All unicode names have the `U_` prefix in `react-openmoji`.
+
 ```jsx
 import React from 'react';
-import {_1F64B_200D_2642_FE0F} from 'react-openmoji';
+import {U_1F64B_200D_2642_FE0F} from 'react-openmoji';
 
 const App = () => {
-  return <p>Hello World! <_1F64B_200D_2642_FE0F/></p>
+    return <p>Hello World! <U_1F64B_200D_2642_FE0F/></p>
 };
 
 export default App;
 ```
 
-You can also include all 3458 emojis:
+> **Fun fact:** Importing all 3914 emojis at once is actually just as fast as the other methods because all emojis are dynamically loaded:
+
 ```jsx
 import React from 'react';
 import * as Emoji from 'react-openmoji';
 
 const App = () => {
-  return <p>Hello <Emoji.ManRaisingHand/> World! <Emoji._1F30D/></p>
+    return <p>Hello <Emoji.ManRaisingHand/> World! <Emoji._1F30D/></p>
 };
 
 export default App;
 ```
 
 #### Attributes
-In all manual cases you can use two attributes:  
-`size` — sets the size of the emojis; default `1.7em`  
-`outline` — add if you want the colourless emojis
+
+With all manual methods you can use two attributes:
+
+|Field|Type|Description|Default|  
+|---|---|---|---|  
+|`size`| CSS length (string) | size of the emojis | `1.5em` |  
+|`outline`| boolean attribute | add if you want the colourless emojis | `false` |
 
 ```jsx
 import React from 'react';
-import { ManRaisingHand } from 'react-openmoji';
+import {ManRaisingHand} from 'react-openmoji';
 
 const App = () => {
-  return <p>Hello World! <ManRaisingHand size={'1.2em'} outline/></p>
+    return <p>Hello World! <ManRaisingHand size={'1.2em'} outline/></p>
 };
 
 export default App;