A StimulusJS controller for content that needs a placeholder.
Switch branches/tags
Nothing to show
Clone or download
Stephen Dolan
Stephen Dolan v1.0.5
Latest commit 99a51f9 May 11, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Remove default export keyword May 10, 2018
.eslintrc.yml Ignore default export class rule May 10, 2018
.gitignore Initial commit May 10, 2018
.npmignore Add ESlint to package May 10, 2018
LICENSE Initial commit May 10, 2018
README.md Add code quality checker badge May 10, 2018
package-lock.json Add ESlint to package May 10, 2018
package.json v1.0.5 May 11, 2018
webpack.config.js How did I spell this made up word incorrectly. May 10, 2018
yarn.lock Add ESlint to package May 10, 2018


npm codebeat badge

Stimulus Placeholdable

This is a simple StimulusJS controller that shows and hides a placeholder based on the content within some container element.

JSFiddle Demo.


This assumes that StimulusJS is already installed.

Add the stimulus-placeholdable module:

$ yarn add stimulus-placeholdable


$ npm install stimulus-placeholdable

Basic Usage

First, register the controller with StimulusJS:

// application.js
import { Application } from 'stimulus';
import { Placeholdable } from 'stimulus-placeholdable';

const application = Application.start();
application.register('placeholdable', Placeholdable);

Next, you need to attach the controller to some set of elements that contains a container target to monitor, and a placeholder target to show when the container is empty.

<div data-controller="placeholdable">
  <ul data-target="placeholdable.container">
    <li>An item</li>
    <li>Another item</li>

  <h1 data-target="placeholdable.placeholder">
    There are no items in the list!


Bug reports and pull requests are welcome on GitHub at https://github.com/stephendolan/stimulus-placeholdable. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.


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