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-inline-edit with all npm packages installed. Try it out:

var stimulusInlineEdit = require("stimulus-inline-edit")

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

stimulus-inline-edit v1.0.1

A StimulusJS controller to add inline edit to Rails-powered input fields.

Stimulus inline edit controller

A StimulusJS controller to add inline edit to input fields (Rails-only).

Install

Assuming StimulusJS is already installed. Add the stimulus-inline-edit module:

$ yarn add stimulus-inline-edit

or

$ npm install stimulus-inline-edit

Example

  <p
    data-controller="inline-edit"
    data-inline-edit-model="user"
    data-inline-edit-name="email"
    data-inline-edit-input-class="input"
    data-target="inline-edit.source"
    data-action="click->inline-edit#toggle click@window->inline-edit#close"
   >
    <%= @user.email %>
  </p>

It assumes you add it in a show view (as it uses this URL to POST/PATCH to), eg. users_controller#show. You can change data-inline-edit-model and data-inline-edit-name to respectively change the model and its record/field.

Change data-inline-edit-input-class to add a class to the input field.

Contributing

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

License

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

Metadata

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