Alpine: [Question] AlpineJS inside of React?

[zaydek]

Alpine looks great but is it possible for me to use AlpineJS template _inside_ of React, rather than replacing React? It would be really helpful if I can use Alpine for simple toggle, etc. states and React for everything else.

Is this possible? Thanks!

[OwenMelbz]

Try it and report back?!? 😇

[HugoDF]

It's possible but:

• you need to register functions as window.yourFunction
• you'll get a warnings about using : (Namespace tags are not supported by default. React's JSX doesn't support namespace tags.), @ won't be supported either

The workaround is to do something as follows, using dangerouslySetInnerHtml and an HTML string instead of JSX.

window.hello = function () {
  return {
    count: 0,
    inc() {
      this.count += 1;
    }
  }
}

const alpineWidget = `<div x-data="hello()">
  <button @click="inc()">Increment</button>
  <p x-text="count"></p>
</div>`;

const App = () => (
  <>
    <div dangerouslySetInnerHTML={{ __html: alpineWidget }}/>
  </>
);

Full write-up: https://codewithhugo.com/alpine-js-react/

[zaydek]

Thanks!

It looks like it may not be worth it, but still interesting. I’ll keep this in mind — closing the issue.