Skip to content

HugoDF/react-alpinejs

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React AlpineJS Example

A minimal integration of AlpineJS inside of React.

See it in full ./main.js.

tl;dr of the integration as per GitHub Issue comment alpinejs/alpine#201 (comment):

  • 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.), as in x-on:click or :key.
  • @ won't be supported either

Which means a minimal integration looks as follows, note: you only need to import 'alpinejs' once in your whole project.

import React from 'react';
import 'alpinejs';

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

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

const AlpineWidget = () => (
  <>
    <div dangerouslySetInnerHTML={{__html: alpineString}} />
  </>
);

Scripts

npm start: runs Parcel in dev mode

npm run build: run Parcel in build mode (outputs to ./dist).

License

Licensed under MIT, see LICENSE.

About

Simple React-AlpineJS integration example

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •