Skip to content

HugoDF/react-alpinejs

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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