How can I limit an input field to an emoji?

Need help Plugins
1

Hello Bubblers,

I am trying to allow users to define a emoji (which we will call an “icon”) to a thing in my dB. I am looking for two things:

  1. An emoji plugin recommendation. I’ve tried two that don’t seem to be decently documented.
  2. Guidance on how to limit an input field to the emoji only so that user cannot manually type in a letter, for instance.

This is a similar use case to what Notion does for allowing users to define an icon per template. You can see this here: Page icons & covers

Any help is appreciated!

2

Maybe you store the ones you need in your database and use a dropdown to select an emoji, or display them in a repeating group?

You could use the following api to store them without a lot effort:

https://emoji-api.com

1 Like
3

I like the idea of a RG and drop down. Curious, is there a way to feed an API into an option set? There are over 1500 emojis.

4

Maybe use this regex to check the input?

5

I don’t know if its a good idea to have an option set with 1500 entries, because option sets load on every page load.

6

Thanks man! So I did the Emoji-API last night and got it set up, however it seems like there is a 4 second loading delay when I select the group focus container where the RG lives.

I am newer to APIs but is there something I should be doing to optimize performance? I don’t even think it needs to fetch 1500 at a time. From my eye, it looks like it’s grabbing the first set up 40ish and then loading the rest but still… quite slow. You can see here:

PP_emoji

7

Try saving the emoji list to some custom state on page load and point the RG to said custom state instead.

8

What I did was saving the emojis to bubble database and then filtering them by category (as I think the API already gives you categories.
So its almost the same as on native emoji integrations on mac or something. This should reduce loading time.