Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including stimulus-form-utilities with all npm packages installed. Try it out:

var stimulusFormUtilities = require("stimulus-form-utilities")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

stimulus-form-utilities v1.0.3

A set of small form utility helpers built with Stimulus.

Stimulus form utilities

A set of small form utility helpers:

  • characters count
  • auto-resize heighy 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.

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">
  <textarea row="1" data-target="clipboard.source"></textarea>
  <span data-target="clipboard.button" data-action="click->clipboard#copy">copy</span>
</form>

You can change the success message by changing data-character-count-max-value.

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.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free