React component in extensions

[jamalsoueidan]

I'm writing extensions to add a extra button, is it possible to use react in the extension to add react component like a button to do something? or do I need to manipulate the dom using dom methods?

[NaotoshiFujita]

No it is not possible. You need to use DOM methods.

But if you are using React, do you really need to create an extension?
I think you can do like this:

function Carousel() {
  return (
    <div className="your-carousel">
      <Splide>...</Splide>
      <button>Custom Button</button>
    </div>
  );
}

[jamalsoueidan]

I'm creating a fullscreen extension, first i add a custom button "go fullscreen" and when you are in fullscreen, I configure splidejs css, and then add "close button" to exit "fullscreen" mode.

On some slide the "go fullscreen" button is not visible like when we have a video on slide.

If I go the way you mention I have to inject the ref splide instance to the button, to access to splide, and such.

[jamalsoueidan]

You should consider making a hook in react world for the splide instance 👍