https://github.com/hugodf/react-alpinejs

Simple React-AlpineJS integration example
https://github.com/hugodf/react-alpinejs

alpinejs parcel parcel-bundler react reactjs

Last synced: 2 months ago
JSON representation

Simple React-AlpineJS integration example

• Host: GitHub
• URL: https://github.com/hugodf/react-alpinejs
• Owner: HugoDF
• License: mit
• Created: 2020-02-29T15:22:53.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-02-03T04:39:41.000Z (almost 2 years ago)
• Last Synced: 2024-10-10T12:11:28.501Z (3 months ago)
• Topics: alpinejs, parcel, parcel-bundler, react, reactjs
• Language: JavaScript
• Homepage:
• Size: 2.29 MB
• Stars: 5
• Watchers: 2
• Forks: 2
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React AlpineJS Example

A minimal integration of AlpineJS inside of React.

See it in full [./main.js](main.js).

tl;dr of the integration as per GitHub Issue comment [https://github.com/alpinejs/alpine/issues/201#issuecomment-592946560](https://github.com/alpinejs/alpine/issues/201#issuecomment-592946560):

- 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.

```js

import React from 'react';

import 'alpinejs';

window.counter = function() {

  return {

    count: 0,

    inc() {

      this.count += 1;

    }

  };

};

const alpineString = `


  Increment

  


`;


const AlpineWidget = () => (

  <>

    


  >

);

```


## 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](./LICENSE).