How can i use jsx in extention?

ddeeffw

i want to make an extention with frontend interface, and i see some extentions use jquery to create dom, but i'm not familiar with jquery, can i use jsx to build dom?

clarkwinkelmann

ddeeffw JSX is the official way to write components for Flarum. The other option is to use the Mithril hyperscript directly. jQuery should only be used for use cases outside of the single page app, or when there is no way to do things using the Mithril templates and lifecycles.

There's nothing special to do. When you compile your javascript as described in our documentation https://docs.flarum.org/extend/frontend.html#transpilation-and-file-structure JSX is automatically parsed and converted to Mithril templates.

You can name your files .jsx (respectively .tsx for typescript) but I don't think it's a requirement. I think JSX will be parsed in all files.

For an example you can see how the Tags extension has its components described with JSX inside of the Mithril component. For example the TagsPage: https://github.com/flarum/tags/blob/master/js/src/forum/components/TagsPage.js#L47

If you have difficulty using JSX for a particular use case, please describe what you are creating, we can point to useful examples 🙂

ddeeffw

clarkwinkelmann thank you very much. i'm just a beginner and i want to make a meme picker which can custom memes. i've successfully created a button on toolbar of editor. i referenced emojipicker extention, but don't know how to mount my component to specific dom. is there any examples like this?

ddeeffw

i've tried

m.mount(el, <MyComponent />)

but logs error m.mount(element, component) expects a component, not a vnode
which method should i use?

datitisev

ddeeffw You shouldn't need to use m.mount because we already have a way to add components to the editor toolbar. Check out https://github.com/flarum/mentions/blob/5a4be87f3ef9e37b14b7b0c150cfd4f159be53f0/js/src/forum/addComposerAutocomplete.js#L220-L225 for an example (with a picker you would use your own component and/or onclick function, and probably open a modal or however you're planning on doing it).