Instantiating Multiple Material Design Components

Question

Instantiating a single Material Design Component is straightforward. For example,

import { MDCRipple } from "@material/ripple";
const iconButtonRipple = new MDCRipple(document.querySelector(".mdc-icon-button"));
iconButtonRipple.unbounded = true;

When there are multiple components, MDC documentation recommends using querySelectorAll like this:

const iconButtonRipple = [].map.call(
    document.querySelectorAll(".mdc-icon-button"),
    function (el) {
        return new MDCRipple(el);
    }
);

However, the above instantiation does not work, and I don't know where to use the iconButtonRipple.unbounded = true line in this. The only workaround I have is to assign a special class to every icon button and instantiate it all one by one.

Can someone please help me instantiate this like the one mentioned in the documentation?

Answer 1

I would try running this:

const ripples = [...document.querySelectorAll(".mdc-icon-button")].map(el => {
  const ripple = new MDCRipple(el);
  ripple.unbounded = true;
});

or

const ripples = [...document.querySelectorAll(".mdc-icon-button")].map(el => new MDCRipple(el));
ripples.forEach(ripple => {
  ripple.unbounded = true;
});