Document how to use emoji-mart without React

[rugk]

I know, this is maybe a stupid question, but I'd better ask it now.

So: Can I somehow use this without React?

E.g. if there would be release bundles that just use "usual JS" (transpiled via babel or so) and allow me to use the whole lib here with "usual" JS calls or so, that would help me a lot. 😄

[nolanlawson]

You can use emoji-mart with inferno, react-lite, or preact. In particular, preact version 10 is very small, about ~14kB minified for the preact/compat version.

Then you can wrap it in a custom element using something like remount, which allows you to use emoji-mart within any framework (or no framework at all). In fact, this is what I'm doing in my project Pinafore; I'm using preact and remount. :)

I don't think it's likely that emoji-mart will switch to Vanilla JS, but since you have these options I think it's close enough to vanilla. :)

[nolanlawson]

Let me know if that helps; arguably we should add some documentation around this since it's probably not obvious how emoji-mart can be used in a non-React project.

[nolanlawson]

Reopened with the docs label

[rugk]

Yes, it seems complex. Also one still has to use some react thing as it seems.
But it would be preferable to have a vanilla js bundle at the end. (Possibly with GitHub releases)

[nolanlawson]

emoji-mart could offer its own bundle as a custom element, yes. But then we'd have to choose a React flavor (React, preact, react-lite, inferno), and then there's also the question of which components to export (nimble-picker, emoji, etc.), as well as whether or not to include a custom elements polyfill.

I think this is too much responsibility for this project, when compatibility layers like remount already exist and are well-documented. I would prefer to just document that it's possible to use emoji-mart outside of React, and provide some pointers on how to do so.

[nolanlawson]

@rugk Please see #307. I wrote an end-to-end app showing how to do this. Yes we are asking a bit of the developer, but emoji-mart as a vanilla JS custom element can be done. 🙂

[rugk]

Oh, thanks, I'll have a look at it. 😄

[rugk]

Looks interesting. Note that my definition of "vanilla JS" would also include "without nodejs". 😉

[rugk]

Thinking about it again https://github.com/nolanlawson/emoji-mart-outside-react still uses React (i.e. Preact), does not it? The shipped JS code still contains all the JS from preact, just now bundled in a way, so you can use it as a custom element?

[nolanlawson]

There is no way I can think of to turn emoji-mart into a custom element without this technique, yes. Otherwise you would have to rewrite it as a vanilla JS component.

[nolanlawson]

fixed in #307

[rugk]

Okay, but certainly thanks for your support!