use JsBarcode with Stimulus and importmaps

app/javascript/controllers/barcode_controller.js

@@ -0,0 +1,17 @@
+import { Controller } from "@hotwired/stimulus"
+import JsBarcode from 'jsbarcode';
+
+// Connects to data-controller="barcode"
+export default class extends Controller {
+  connect() {
+    const options = {
+      format: "CODE128",
+      // format: "CODE39",
+      lineColor: "#0000FF",
+      displayValue: false,
+      width: 2,
+      margin: 0
+    }
+    JsBarcode(this.element, this.element.dataset.code, options)
+  }
+}

app/models/product.rb

@@ -1,2 +1,9 @@
 class Product < ApplicationRecord
+  # after_create do
+  #   update(barcode: SecureRandom.hex)
+  # end
+
+  before_create do
+    self.barcode = SecureRandom.hex
+  end
 end

app/views/products/_product.html.erb

@@ -9,4 +9,5 @@
     <%= product.barcode %>
   </p>
 
+  <img data-controller="barcode" data-code="<%= product.barcode %>">
 </div>

config/importmap.rb

@@ -5,3 +5,4 @@
 pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
 pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
 pin_all_from "app/javascript/controllers", under: "controllers"
+pin "jsbarcode", to: "https://ga.jspm.io/npm:jsbarcode@3.11.5/bin/JsBarcode.js"