for more information visit the package's GitHub page
Package contains the following modules:
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).
Include a field in your Model
to hold the picker's submodel:
elm
import EmojiPicker exposing (Model, PickerConfig, Msg(..), view, update, init)
type alias Model =
{ text : String
, emojiModel : EmojiPicker.Model
}
Initialize the picker's submodel with a PickerConfig
:
```elm
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 } ```
Include a constructor in your Msg
to catch the picker's submessages:
elm
type Msg
= NoOp
...
| EmojiMsg EmojiPicker.Msg
...
Catch the Select
submessage in your update
function (let the rest of the messages be handled by the internal update function):
elm
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
...
...
Include a way to toggle the picker's visibility by sending its internal Toggle
message:
elm
view : Model -> Html Msg
view model =
...
button [ onClick <| EmojiMsg EmojiPicker.Toggle ] []
...
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:
elm
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.
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.