Holmusk / elmoji / EmojiPicker

This module provides a general-purpose emoji picker, with emojis segregated by category. See this file for an example of how to use the picker in your application!

Internals


type alias Model =
{ skinColor : SkinColor
, activeCategory : Types.Category
, hidden : Basics.Bool
, offsetX : Basics.Float
, offsetY : Basics.Float
, closeOnSelect : Basics.Bool 
}

The internal state of the emoji picker.

Note: the skinColor field is not in use in the current version, but a future release may include a skin tone selector to switch between emoji variants.


type Msg
    = NoOp
    | Toggle
    | ChooseSkinColor SkinColor
    | SelectCategory Types.Category
    | Select String

Most of the messages are handled internally, but there are a couple that will be of interest to the parent module:

Toggle: Use this message in the parent to toggle the emoji picker on and off
Select: Catch this message in the parent to retrieve the selected emoji

Config & Initialization


type alias PickerConfig =
{ offsetX : Basics.Float
, offsetY : Basics.Float
, closeOnSelect : Basics.Bool 
}

When initializing the emoji picker, you'll need to provide a few configuration parameters.

offsetX: the horizontal offset from where the picker is declared
offsetY: the vertical offset from where the picker is declared
closeOnSelect: whether or not the close the picker after an emoji is selected

init : PickerConfig -> Model

This is the function to call to initialize the emoji picker.

pickerConfig : PickerConfig
pickerConfig = 
    { offsetX       = -271
    , offsetY       = -410
    , closeOnSelect = True
    }

emojiModel : EmojiPicker.Model
emojiModel = EmojiPicker.init pickerConfig

Functions to use in integration

view : Model -> Html Msg

Use this function to instantiate the actual Html msg for the picker.

update : Msg -> Model -> ( Model, Platform.Cmd.Cmd Msg )

You'll need to catch the Select message in your parent module to obtain the emoji from the picker. However, don't forget to propagate the messages down to this function, because some internal states will probably need to be updated.