Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 

Elmoji

Check out the demo!

This module provides a general-purpose emoji picker written in Elm. In order to integrate this with your application, there are a few things that need to be implemented (check the examples directory for a sample).

  1. Include a field in your Model to hold the picker's submodel:

    import EmojiPicker exposing (Model, PickerConfig, Msg(..), view, update, init)
    type alias Model =
        { text       : String
        , emojiModel : EmojiPicker.Model
        }
  2. Initialize the picker's submodel with a PickerConfig:

    pickerConfig : PickerConfig
    pickerConfig =
        { offsetX       = -271  -- horizontal offset
        , offsetY       = -410  -- vertical offset
        , closeOnSelect = True  -- close after clicking an emoji
        }
         
    initialModel : Model
    initialModel = 
        { text       = ""
        , emojiModel = EmojiPicker.init pickerConfig
        }
  3. Include a constructor in your Msg to catch the picker's submessages:

    type Msg
        = NoOp
        ...
        | EmojiMsg EmojiPicker.Msg
        ...
  4. Catch the Select submessage in your update function (let the rest of the messages be handled by the internal update function):

    update : Msg -> Model -> (Model, Cmd Msg)
    update msg model =
        case msg of
            ...
            EmojiMsg subMsg ->
                case subMsg of
                    EmojiPicker.Select s ->
                        -- "s" is the emoji, add this to your input field
                        ...
            ...
  5. Include a way to toggle the picker's visibility by sending its internal Toggle message:

    view : Model -> Html Msg
    view model =
    ...
        button [ onClick <| EmojiMsg EmojiPicker.Toggle ] []
    ...
  6. Include the picker in your view function (along with a button or something that sends the ToggleEmojiPicker message onClick). The picker is styled with the elm-css module, which uses an internal replacement for the standard elm/html module, so you'll need to Html.map it first:

    view : Model -> Html Msg
    view model =
        let
            picker = Html.map (EmojiMsg) <| EmojiPicker.view model.emojiModel
        in
            -- use `picker` somewhere
            ...

And that's it! If you'd like to change any of the default styles in this module, you can clone the repo and edit the Styles.elm file.

Acknowledgements

The category icons were taken from the emoji-mart repo by Missive, and rewritten in Elm.
The emojis themselves were obtained by parsing the emoji.json file on the emoji-data repo.

About

Elm emoji picker

Resources

License

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •  

Languages