Ability to dynamically update emojisPerRow

[marquizzo]

I'm building a site with the EmojiPicker spanning the whole width of the screen. I'd like to dynamically change the value of emojisPerRow based on the width of the window. For example:

window.addEventListener("resize", () => {
    emojiPicker.options.emojisPerRow = window.innerWidth / 100;
});

But setting that property seems to only work upon initiation. Once it's initiated it's stuck on the first value. Is there any functionality to dynamically update emojisPerRow, visibleRows, etc? I tried to override the CSS variables via theming but it doesn't seem to work because --emojis-per-row is overriden with inline styles.

[joeattardi]

Yes, currently that is a limitation. I didn't anticipate this use case because typically an emoji picker is a static grid that doesn't grow with the page. I can certainly take that on as an enhancement at some point.

The picker could watch certain options such as emojisPerRow, and recalculate the styles.

PRs are always welcome too! 😉

[marquizzo]

Thanks, Joe! I'd love to do a PR, but after looking at the source I'd probably end up breaking your code. 😄

For now I found a simple workaround that overrides the element's --emojis-per-row property. Here it is if anybody needs it:

const emojiPicker = picmo.createPicker(options);

window.addEventListener("resize", onResize);

function onResize() {
    let count = window.innerWidth / 70;
    count = Math.floor(count);
    emojiPicker.el.style.setProperty("--emojis-per-row", count);
}

[joeattardi]

That's a good workaround for now, though I would recommend maybe denouncing the resize handler, otherwise if you do a big resize you'll get a lot of resize events and could cause performance issues as the picker constantly re-renders itself.

There has been enough interest in this, the theme, etc. that I am looking into a way to support in a generic way the changing of picker options (where it makes sense). This could mean changing the emojisPerRow, theme, etc. options and having the picker recalculate and re-render.

[joeattardi]

5.6.0 just released, now has the ability to update certain options after picker creation. See https://picmojs.com/docs/api/picmo/classes/emoji-picker#updateoptions for details.

Dynamically updatable options are here: https://picmojs.com/docs/api/picmo/types/updatable-options