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!
{ 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.
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
{ 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
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.