Skip to content

Instantly share code, notes, and snippets.

@chibicode

chibicode/README-Twemoji-React.md

Last active March 24, 2025 01:14
Show Gist options
  • Save chibicode/fe195d792270910226c928b69a468206 to your computer and use it in GitHub Desktop.
Save chibicode/fe195d792270910226c928b69a468206 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. chibicode revised this gist Mar 1, 2019. 1 changed file with 10 additions and 0 deletions.
    10 changes: 10 additions & 0 deletions README-Twemoji-React.md
    View file
    Original file line number Diff line number Diff line change
    @@ -3,3 +3,13 @@
    A dead simple React [Twemoji](https://github.com/twitter/twemoji) component.

    <img width="184" alt="" src="https://user-images.githubusercontent.com/992008/53618713-6910e880-3ba1-11e9-9ea9-82ec7a28d83a.png">

    ## Requirements: `twemoji`

    ```
    npm install --save twemoji
    # or
    yarn add twemoji
    ```
  2. chibicode renamed this gist Mar 1, 2019. 1 changed file with 0 additions and 0 deletions.
    0 Twemoji-README.md → README-Twemoji-React.md
    View file
    File renamed without changes.
  3. chibicode renamed this gist Mar 1, 2019. 1 changed file with 0 additions and 0 deletions.
    0 README.md → Twemoji-README.md
    View file
    File renamed without changes.
  4. chibicode renamed this gist Mar 1, 2019. 1 changed file with 0 additions and 0 deletions.
    0 Example.js → Twemoji-Example.js
    View file
    File renamed without changes.
  5. chibicode revised this gist Mar 1, 2019. 2 changed files with 10 additions and 12 deletions.
    4 changes: 2 additions & 2 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    # Twemoji + React with Hooks
    # Twemoji + React

    A dead simple React [Twemoji](https://github.com/twitter/twemoji) component implemented with hooks.
    A dead simple React [Twemoji](https://github.com/twitter/twemoji) component.

    <img width="184" alt="" src="https://user-images.githubusercontent.com/992008/53618713-6910e880-3ba1-11e9-9ea9-82ec7a28d83a.png">
    18 changes: 8 additions & 10 deletions Twemoji.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,17 +1,15 @@
    import React, { useState, useEffect, memo } from 'react'
    import React, { memo } from 'react'
    import twemoji from 'twemoji'

    const Twemoji = ({ emoji }) => {
    const [emojiHtml, setEmojiHtml] = useState(emoji)
    useEffect(() => {
    setEmojiHtml(
    twemoji.parse(emojiHtml, {
    const Twemoji = ({ emoji }) => (
    <span
    dangerouslySetInnerHTML={{
    __html: twemoji.parse(emoji, {
    folder: 'svg',
    ext: '.svg'
    })
    )
    }, [emoji])
    return <span dangerouslySetInnerHTML={{ __html: emojiHtml }} />
    }
    }}
    />
    )

    export default memo(Twemoji)
  6. chibicode revised this gist Mar 1, 2019. 2 changed files with 4 additions and 2 deletions.
    2 changes: 1 addition & 1 deletion Example.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    import React from 'react'
    import Twemoji from './twemoji'
    import Twemoji from './Twemoji'

    const Example = () => (
    <p>
    4 changes: 3 additions & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,5 @@
    # Twemoji + React with Hooks

    A dead simple React [Twemoji](https://github.com/twitter/twemoji) component implemented with hooks.
    A dead simple React [Twemoji](https://github.com/twitter/twemoji) component implemented with hooks.

    <img width="184" alt="" src="https://user-images.githubusercontent.com/992008/53618713-6910e880-3ba1-11e9-9ea9-82ec7a28d83a.png">
  7. chibicode revised this gist Mar 1, 2019. 2 changed files with 11 additions and 1 deletion.
    10 changes: 10 additions & 0 deletions Example.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,10 @@
    import React from 'react'
    import Twemoji from './twemoji'

    const Example = () => (
    <p>
    Hello! <Twemoji emoji="👋" />
    </p>
    )

    export default Example
    2 changes: 1 addition & 1 deletion Twemoji.css
    View file
    Original file line number Diff line number Diff line change
    @@ -3,4 +3,4 @@
    width: auto;
    height: 1em;
    vertical-align: -0.125em;
    }
    }
  8. chibicode revised this gist Mar 1, 2019. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions Twemoji.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,6 @@
    .emoji {
    display: inline-block;
    width: auto;
    height: 1em;
    vertical-align: -0.125em;
    }
  9. chibicode revised this gist Mar 1, 2019. 2 changed files with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1,3 @@
    # Twemoji + React with Hooks

    A dead simple React [Twemoji](https://github.com/twitter/twemoji) component implemented with hooks.
    0 App.css → Twemoji.css
    View file
    File renamed without changes.
  10. chibicode revised this gist Mar 1, 2019. 2 changed files with 3 additions and 2 deletions.
    1 change: 1 addition & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    A dead simple React [Twemoji](https://github.com/twitter/twemoji) component implemented with hooks.
    4 changes: 2 additions & 2 deletions Twemoji.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    import React, { useState, useEffect } from 'react'
    import React, { useState, useEffect, memo } from 'react'
    import twemoji from 'twemoji'

    const Twemoji = ({ emoji }) => {
    @@ -14,4 +14,4 @@ const Twemoji = ({ emoji }) => {
    return <span dangerouslySetInnerHTML={{ __html: emojiHtml }} />
    }

    export default Twemoji
    export default memo(Twemoji)
  11. chibicode created this gist Mar 1, 2019.
    4 changes: 4 additions & 0 deletions App.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,4 @@
    .emoji {
    height: 1em;
    vertical-align: -0.125em;
    }
    17 changes: 17 additions & 0 deletions Twemoji.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,17 @@
    import React, { useState, useEffect } from 'react'
    import twemoji from 'twemoji'

    const Twemoji = ({ emoji }) => {
    const [emojiHtml, setEmojiHtml] = useState(emoji)
    useEffect(() => {
    setEmojiHtml(
    twemoji.parse(emojiHtml, {
    folder: 'svg',
    ext: '.svg'
    })
    )
    }, [emoji])
    return <span dangerouslySetInnerHTML={{ __html: emojiHtml }} />
    }

    export default Twemoji