DEV Community

Cover image for Introducing stimulus-image-grid
leastbad
leastbad

Posted on

Introducing stimulus-image-grid

I published my first npm package today!

https://www.npmjs.com/package/stimulus-image-grid

With only three optional parameters, this is a simple, drop-in, backend-agnostic, code-free solution that is completely free of CSS opinions. It's responsive and scales to whatever bounding container you give it.

It's also performant AF: stimulus-image-grid uses the ResizeObserver so there's zero screen flicker. It's compatible with Turbolinks by design and free for personal and commercial use.

Built for StimulusJS

This Stimulus controller allows you to make any configurations for the image grid directly with data attributes in your HTML. Once registered in your Stimulus application, you can use it anywhere you like.

Here is a simple example:

<div data-controller="image-grid">
  <img src="https://placehold.it/350x300/EEE04A/ffffff">
  <img src="https://placehold.it/420x320/5cb85c/ffffff">
  <img src="https://placehold.it/320x380/5bc0de/ffffff">
  <img src="https://placehold.it/472x500/f0ad4e/ffffff">
  <img src="https://placehold.it/540x360/FF3167/ffffff">
</div>

Yes, that's really it.

Setup

Add an import to your main JS entry point, and then register it:

import { Application } from 'stimulus'
import ImageGrid from 'stimulus-image-grid'

import { definitionsFromContext } from 'stimulus/webpack-helpers'
const application = Application.start()
const context = require.context('../controllers', true, /\.js$/)
application.load(definitionsFromContext(context))

// Manually register ImageGrid as a Stimulus controller
application.register('image-grid', ImageGrid)

And you're done! Note, this package relies on the alpha preview of Stimulus v2, which is stable and available here.

Top comments (3)

Collapse
 
deikka profile image
Alex Núñez

Thanks! I was using the bootstrap theme's grid and fighting against turbolinks :)

Collapse
 
leastbad profile image
leastbad

Please let me know if you have any problems or suggestions. I have also done the Zoom widget, too!

Not published yet, but let me know if you need a hookup.

Collapse
 
deikka profile image
Alex Núñez

It's working like a charm.

The zoom widget works ok by now, thanks anyway :)