https://github.com/kmbn/elm-hotkeys

Elm event handlers for sending content and triggering actions with keypresses.
https://github.com/kmbn/elm-hotkeys

elm elm-lang

Last synced: about 1 month ago
JSON representation

Elm event handlers for sending content and triggering actions with keypresses.

• Host: GitHub
• URL: https://github.com/kmbn/elm-hotkeys
• Owner: kmbn
• License: mit
• Created: 2018-06-30T11:03:35.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2019-03-29T15:38:39.000Z (almost 6 years ago)
• Last Synced: 2024-10-21T18:46:38.574Z (3 months ago)
• Topics: elm, elm-lang
• Language: Elm
• Size: 9.77 KB
• Stars: 4
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# elm-hotkeys

[![MIT License](https://img.shields.io/github/license/kmbn/elm-hotkeys.svg?style=flat-square)](https://raw.githubusercontent.com/kmbn/elm-hotkeys/master/LICENSE)

Event handlers for sending content and triggering actions with keypresses.

## Install

```bash

elm package install kmbn/elm-hotkeys

```

## Import

```elm

import Hotkeys

    exposing

        ( onEnter

        , onEnterSend

        , onKeyCode

        )

```

## Use

```elm

import Html exposing (div, input)

import Hotkeys exposing (onEnter, onEnterSend, onKeyCode)

type Msg

    = EnterWasPressed

    | NewContent

html =

    div []

        [ input [ onKeyCode 13 EnterWasPressed ] []

        , input [ onEnter EnterWasPressed ] []

        , input [ placeholder "Enter new content", onEnterSend NewContent ] []

        ]

```

See `../examples/onEnterSend.elm` for a working example of `onEnterSend`.

## Functions

### onKeyCode

Construct an event handler for any keycode. Send a Msg when the given key is pressed.

(You can use [](http://keycode.info) to find the keycode for a given key.)

### onEnter

Send a Msg when enter is pressed. This is a convenience function that wraps `onKeyCode`.

### onEnterSend

Send content only when enter is pressed. Do not send anything beforehand.

This is an alternative to using `Html.Events.onInput` to update the model with incomplete content on every keystroke and then using another event handler to indicate that the content collected in the model is now complete.

Instead, we only send content to `update` when the content is ready to be consumed.

## License

MIT

## Copyright

© 2018 Kevin Brochet-Nguyen