Choo: External library like Slick

[zapaiamarce]

Hi. Is there a best way to use an external tool like https://github.com/kenwheeler/slick inside a view?

Thanks

[timwis]

Sure - one option is to use the onload callback like this:

const view = (state, prev, send) => {
  const gallery = html`<div></div>`
  return html`
    <div onload=${onload}>
      ${gallery}
    </div>
  `
  function onload () {
    $(gallery).slick()
  }
}

Another, probably more ideal way is to memoize the gallery element. @yoshuawuyts worked up a demo of how to do that, but if I recall correctly it needs to be abstracted to be more consumable.

[yoshuawuyts]

implementation now WIP https://github.com/yoshuawuyts/cache-element

[mzahirr]

@timwis hi I tried what you said. But i could not.
Is there an example to use external libraries? I have a lot of problems with this

[YerkoPalma]

onload is no longer part of bel. You could use it anyway as a standalone module.
What library are you trying to use?

[bcomnes]

@mzahirr for stateful components try https://github.com/choojs/nanocomponent. It ships with the on-load hooks as well.

[mzahirr]

@yerkoPalma ı m use slick library

[mzahirr]

@bcomnes Could you show me an example?

[bcomnes]

@mzahirr I don't have time to set up a slick example right now, but here are two components I did recently: https://github.com/bcomnes/twitter-component https://github.com/bcomnes/youtube-component

The issue with slick is that its not modular javascript and has peer deps to jQuery 1.7, and doesn't seem to document a commonJS export, so you may end up needing to shim global dependencies or just write a poorly contained component module that assumes global peer dependencies (e.g. slick and jQuery available on the window object or something). I'm also going to toot my horn here and recommend a different carousel library that exports commonJS as a primary API and leave the Jquery plugin ecosystem behind. Unfortunately I don't have a recommendation off hand.

That being said, nanocomponent will give you all of the correct lifecycle hooks to get it working with Choo. Check the docs and examples and let me know if you have any specific confusions.