vjousse/elm-emoji/2.0.0

NOTE: the latest version is 2.0.1

Rerouted (retagged, needs approval). The tag now points at a different commit than when this version was published. The Lamdera package server serves a copy recovered from https://github.com/vjousse/elm-emoji.

What we checked: Tag 2.0.0 is still on github.com/vjousse/elm-emoji; its commit b5a2cf5ad139 is from 2024-06-12 18:59 UTC, after the version was published (2024-06-12 18:57 UTC); elm.json differs from package.elm-lang.org's; the exposed modules match docs.json; the zip's SHA-1 is not the published one and nothing else confirms its contents.

We could not verify this copy against what was published, so the Lamdera compiler asks before using it (y/n). Without a terminal, as in CI, it stops with an error unless approved:

  • lamdera make --auto-approve-package-rerouting approves rerouted versions for that run,
  • LAMDERA_AUTO_APPROVE_PACKAGE_REROUTING=1 does the same for every run in that environment,
  • LAMDERA_CACHE=off skips the Lamdera package server altogether: packages come from package.elm-lang.org and GitHub only, as with elm, and a rerouted version then fails to download.

Details · package.elm-lang.org's zip: https://github.com/vjousse/elm-emoji/zipball/2.0.0/

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 =
{ activeCategory : Category
, closeOnSelect : Bool
, customEmojis : List Emoji
, customEmojisHeight : Maybe String
, customEmojisWidth : Maybe String
, hidden : Bool
, offsetX : Float
, offsetY : Float
, searchText : String
, skinColor : SkinColor
}

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
| ChooseSkinColor SkinColor
| SelectCategory Category
| Select String
| Search String
| Toggle

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 : Float
, offsetY : Float
, closeOnSelect : Bool
, customEmojis : List Emoji
, customEmojisHeight : Maybe String
, customEmojisWidth : Maybe String
}

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 customEmojis: a list of emojis you would like to add to the custom category

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, 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.