Integrating Emoji Selector via NPM in WeWeb

Ask us anything How do I?
1

Hello everyone, I’m having trouble trying to use npm in WeWeb. In my case, I wanted to use an emoji npm package to add an emoji selector on the screen, but I can’t find any solutions for this. Has anyone done this before?

2

Hi, @Vitor

Which library? The NPM plugin is mostly used for JS utilities. It’s not suitable for all packages. Have you checked whether the library has any embed scripts?

3

In my project, I came across two situations where I needed to use an npm plugin: an emoji picker. In this case, I tested @incidentiq/emoji-button and emoji-mart. In another situation, I tried using cropperjs for my images. These three plugins seem to have all the requirements to work, but I didn’t succeed with any of them. I feel the lack of a more comprehensive tutorial in the community, which should cover general aspects of each plugin. The existing ones aren’t situational enough.

4

Hmmm… I don’t know those packages :slight_smile: but as I’ve said, the NPM plugin is mostly for JavaScript utilities, like Lodash. It’s not a way to import any NPM package; some will work, others won’t. If the picker has a CDN or some embed scripts, you can try adding it in WeWeb using an HTML element. If not, it’s better to create a custom Vue component, and then you will be able to import anything.

5

You can try this code:

document.body.appendChild(Object.assign(document.createElement('script'), {
  type: 'text/javascript',
  src: 'https://cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js',
  onload: () => this.onScriptLoaded()
}));