Module

React.Keybind

Package: purescript-react-keybind
Repository: EpicOrange/purescript-react-keybind

This module provides bindings for the components provided by the react-keybind library, intended to be used in the same fashion as React.Basic.DOM.

Quick usage guide for the components shortcutProvider, shortcutConsumer, and withShortcut:

shortcutProvider { children: [], ignoreKeys: ["shift", "ctrl"] } [ ... ]

shortcutConsumer \{ registerShortcut, shortcuts } -> [ ... ]

myShortcutComponent :: Component {}
myShortcutComponent = withShortcut "MyShortcutComponent" $
  React.component "MyComponent" \{ shortcut: {registerShortcut, unregisterShortcut} } -> React.do
  ...

Quick guide to registerShortcut:

 _ <- registerShortcut { method: handler_ save
                       , keys: ["ctrl+s", "cmd+s"]
                       , title: "Save"
                       , description: "Save a file"
                       , holdDuration: Nothing }

Every key in keys gets bound to the given method handler. The strings are checked (case-insensitive) against KeyboardEvent.key, and may be modified with ctrl, alt, meta/cmd, and shift.

For further guidance, check out the examples directory in the git repo!

#shortcutConsumer Source

shortcutConsumer :: (ProviderRenderProps -> Array JSX) -> JSX

Create a shortcut consumer that offers the following props:

registerShortcut         :: ShortcutSpec -> Effect Unit
registerSequenceShortcut :: ShortcutSpec -> Effect Unit
shortcuts                :: Array IShortcut
triggerShortcut          :: String -> Effect Unit
unregisterShortcut       :: Array String -> Effect Unit

Usage: shortcutConsumer { registerShortcut, shortcuts } -> [ ... ]

#shortcutProvider Source

shortcutProvider :: forall props_ props. Union props props_ ProviderPropsRow => Record props -> JSX

Create a shortcut provider with possible props:

children       :: Array JSX
ignoreKeys     :: Array String
ignoreTagNames :: Array String
preventDefault :: Boolean

#shortcutProvider_ Source

shortcutProvider_ :: Array JSX -> JSX

Shorthand of shortcutProvider for only passing in children

#withShortcut Source

withShortcut :: forall props_ props. Union WithShortcutPropsRow props props_ => String -> Component { shortcut :: ProviderRenderProps | props } -> Component (Record props)

A higher-order pure component that adds a single prop shortcut containing:

registerShortcut         :: ShortcutSpec -> Effect Unit
registerSequenceShortcut :: ShortcutSpec -> Effect Unit
shortcuts                :: Array IShortcut
triggerShortcut          :: String -> Effect Unit
unregisterShortcut       :: Array String -> Effect Unit

Use this with (or as an alternative to) shortcutConsumer.

Modules: React.Keybind; React.Keybind.Internal; React.Keybind.Types