Skip to main content

MessageInput Hooks

The MessageInput component uses a variety of custom hooks to assemble the MessageInputContext. These hooks can also be useful when building a custom Input UI component.

The main provided hook, useMessageInputState, uses a group of smaller, helper hooks which are segmented by functionality. Other hooks provided include useCooldownTimer and the several hooks used by the DefaultTriggerProvider.

Hooks#

useMessageInputState#

A custom hook that is a reducer hook and compiles all of the state information for the input and returns the current state and a dispatch method. This dispatch method is then used within the many smaller hooks that each compile and process a specific section of the state, and these are outlined below.

  • useAttachments - sets the state for attachments and returns this data and related functions. Utilizes two hooks within it, useFileUploads and useImageUplaods.

  • useEmojiIndex - returns the NimbleEmojiIndex. Added to the state under the emojiIndex key.

  • useEmojiPicker - sets state logic and returns this data (including info on whether the picker is open or closed) and related handler functions.

  • useMessageInputText - processes the state for the text in the input and returns handlers for text change and insertion.

  • usePasteHandler - returns a handler function that processes items that are pasted into the input.

  • useSubmitHandler - processes the items in the input and then will send, clears the state after. Returns the handleSubmit handler function.

useCooldownTimer#

A custom hook where the CooldownTimer component is established. Handles the state logic for the timer and returns this data and the related handler.

useCommandTrigger#

A custom hook used within the DefaultTriggerProvider component. Returns an object of trigger settings related to the / command.

useEmojiTrigger#

A custom hook used within the DefaultTriggerProvider component. Returns an object of trigger settings related to the : command.

useUserTrigger#

A custom hook used within the DefaultTriggerProvider component. Returns an object of trigger settings related to the @ command.

Did you find this page helpful?