Instantiating Vanilla JS Class in SolidJs

[99bits]

Hi Fellow SolidJs friends,

I am new to SolidJs and would like to use vanilla JS components in a SolidJs project.
For example this calendar:

https://mcdatepicker.netlify.app/usage

Datepicker Demo

/* javascript */
const datePicker = MCDatepicker.create({
el: '#datepicker',
bodyType: 'modal'
});

[orenelbaum]

Integrating things with Solid is always the same in Solid whether you want to integrate with classes or anything else. You can't use them directly. Unless you have a more specific question it's hard to describe the whole process of integrating a vanilla JS library with Solid, but in order to get a general idea maybe you can look at how other people have already integrated vanilla libraries.

[ryansolid]

Typically you wrap these things in component wrappers. If you can pass the element in, instead of a selector is better. But generally you'd do something like:

function DatePicker() {
  onMount(() => {
    const datePicker = MCDatepicker.create({
      el: '#datepicker',
      bodyType: 'modal'
    });
    onCleanup(() => datePicker.dispose());
  });
  return <div id="datepicker" />
}

This is just a rough example. As I said getting a ref to the element would be better.

[trusktr]

Then if you want to map props to it, you can use an effect instead of onMount:

function DatePicker(props) {
  createEffect(() => {
    const datePicker = MCDatepicker.create({
      el: '#datepicker',
      bodyType: props.bodyType // any time props.bodyType changes, the old picker is disposed, and a new one created
    });
    onCleanup(() => datePicker.dispose());
  });
  return <div id="datepicker" />
}

Note, if there's a way to update properties of MCDatepicker, then do that, instead of making a new one each time, as it would be more efficient, but the above at least would work.