Hi, I’m exploring Kotlin/JS at the moment and stil...

# javascript

[Archie]

Hi, I’m exploring Kotlin/JS at the moment and still very new to it.

Currently I’m exploring React with Kotlin/JS. I’m wondering if there are any step by step guide on how I could use and integrate existing Libraries (or any library) thats commonly used for React Development.

What I know so far is that I can use implementation(npm(<name>, <version>) to add in the library, but other than that I can’t seem to figure our how to properly access them. I’ve looked into the Kotlin/JS docs and looks like I need to write wrappers to access the imported libraries but I can’t seem to figure out how to start.

Anyone has links to tutorial I could look into? or any guidance would be very much appreciated.

Thanks in advance.

[Robert Jaros]

Check: https://dev.to/mpetuska/js-in-kotlinjs-c4g

[Robert Jaros]

This could be useful as well: https://kvision.gitbook.io/kvision-guide/4.-integrating-with-javascript-libraries/using-react-components

[Archie]

@Robert Jaros If I understand it correctly, for every library I add through implementation(npm(…)) I will need to write either a NPM Package Object or NPM Package File to access them.. is that correct?

[Robert Jaros]

In general, yes.

[Archie]

I’m finding that at the moment, using existing libraries is very cumbersome to do. Having to manually write the wrapper takes alot of time to do. 🤔 Thanks for the help @Robert Jaros.

[James Yox]

You can usually get something quick and dirty working by using dynamic when creating your wrappers. This can let you get to calling your JS libs quickly.

You'll want to eventually write proper type definitions. You certainly can just write definitions for the specific functions or objects you need to reference though.

I was messing around with chart.js at one point and the wrapper I needed was as simple as

external val Chart: dynamic

Obviously this would be better if I had real type definitions but you can do this for testing purposes!

[James Yox]

You can also use kotlin's functions like json(...) in KotlinJS to pass JS objects to functions, etc. Again, this isn't exactly something I would advise in production code but you can cobble together JS libs pretty fast if you are just prototyping.