Introducing Stimulus components

I'm a huge fan of the Stimulus JavaScript framework. If you never heard about it, you should read The Origin of Stimulus.

Stimulus has a very different approach compared to Vue or React. With Stimulus, you don't need to move all your logic or code in components, you don't need to write jQuery spaghetti code too. You connect JS to your HTML.

In complex applications, you need business logic in dedicated controllers, but you don't want to write classic JavaScript controllers for common behaviour that you will copy and paste over and over in all your projects.

Vue and React have a pretty solid ecosystem with hundreds of components to deal with that.

Unfortunately Stimulus does not have this yet. It needs to change! Stimulus deserves to have a big and qualitative ecosystem with plug'n'play controllers like in other modern JS frameworks. Stimulus deserves to be far more popular.

Stimulus components

That's why I created Stimulus components. Stimulus components is a bunch of Stimulus controllers that stick to the Stimulus philosophy as much as possible.

Because Stimulus controllers are vanilla JS Classes, you can extend them or use them directly in your application.

My goal is to create a controller for every common behavior to help people getting into Stimulus in their applications.

It would be awesome if you could help me to add feature and controllers, to open issues or PRs!

You can start using controllers today in your app! I'm using them in production for months now.

👉 Find all controllers on GitHub : Stimulus components

Example

Let's take stimulus-content-loader for instance.

Install the package:

$ yarn add stimulus-content-loader

Use it in your JS file:

import { Application } from 'stimulus'
import ContentLoader from 'stimulus-content-loader'
const application = Application.start()
application.register('content-loader', ContentLoader)

Boom! Enjoy it in your HTML:

<div
  data-controller="content-loader"
  data-content-loader-url="<%= comments_path %>"
>
  <i class="fas fa-spinner fa-spin"></i> Loading comments... This content will
  be replaced by the content of the `posts/comments` partial generated by Rails.
</div>

Enjoy! 👋