Stimulus form utilities

A set of small form utility helpers:

• characters count for any input field
• auto-resize height of a textarea
• copy to clipboard
• cmd-/ctrl + enter to submit form

Install

Assuming StimulusJS is already installed. Add the stimulus-form-utilities module:

$ yarn add stimulus-form-utilities

or

$ npm install stimulus-form-utilities

Initialise all form utilites.

import { Application } from "stimulus"
import { definitionsFromContext } from "stimulus/webpack-helpers"

const application = Application.start();
const context = require.context("controllers", true, /.js$/);
application.load(definitionsFromContext(context));

import { CharacterCount, AutoResizeHeight, Clipboard, CommandEnter } from "stimulus-form-utilities"
application.register('character_count', CharacterCount)
application.register('auto_resize_height', AutoResizeHeight)
application.register('clipboard', Clipboard)
application.register('command_enter', CommandEnter)

CharacterCount

import { CharacterCount } from "stimulus-form-utilities"
application.register('character_count', CharacterCount)

<form data-controller="character-count" data-character-count-max-value="10" data-character-count-warning-class="text-red">
  <textarea data-target="character-count.input" data-action="keyup->character-count#update"></textarea>
  <span data-target="character-count.countValue"></span>
</form>

You can change the maximum allowed characters by changing data-character-count-max-value. Furthermore data-character-count-warning-class is the value for the Css class added to count value element if the maximum count is exceeded.

Auto-resize height of textarea

import { AutoResizeHeight } from "stimulus-form-utilities"
application.register('auto_resize_height', AutoResizeHeight)

<form data-controller="auto-resize-height">
  <textarea data-target="auto-resize-height.input" data-action="keyup->auto-resize-height#update"></textarea>
</form>

Copy contents of field

import { Clipboard } from "stimulus-form-utilities"
application.register('clipboard', Clipboard)

<form data-controller="clipboard" data-clipboard-success-message="copied" data-clipboard-error-message="error">
  <textarea row="1" data-target="clipboard.source"></textarea>
  <button data-target="clipboard.button" data-action="click->clipboard#copy">copy</button>
</form>

You can change the success message by changing the value of data-clipboard-success-message.

Cmd-/Ctrl + Enter to submit

import { CommandEnter } from "stimulus-form-utilities"
application.register('command_enter', CommandEnter)

<form data-controller="command-enter" action="https://www.getsjabloon.com">
  <textarea data-target="command-enter.input" data-action="keydown->command-enter#submit"></textarea>
  <input type="submit">
</form>

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/eelcoj/stimulus-form-utilities.

License

This package is available as open source under the terms of the MIT License.