Merge pull request #69 from josemariagomez/feature/add-react-to-readme

Add React version to README.md

README.md

@@ -9,6 +9,7 @@ Check out the [demo app](https://modal.advanced-inertia.com) demonstrating the M
 - [**Installation**](#installation)
  - [**Laravel**](#laravel)
  - [**Vue 3**](#vue-3)
+ - [**React**](#react)
 - [**Setup**](#setup)
  - [**Vite**](#vite)
  - [**Laravel Mix**](#laravel-mix)
@@ -28,8 +29,6 @@ composer require based/momentum-modal
 
 ### Vue 3
 
-> The frontend package is only for Vue 3 now due to its adoption within the Laravel community.
-
 Install the frontend package.
 
 ```bash
@@ -40,6 +39,24 @@ yarn add momentum-modal
 
 > **Warning**
 > The package utilizes `axios` under the hood. If your app is already using `axios` as a dependency, make sure to lock it to the same version Inertia uses.
+>
+> ```bash
+> npm i [email protected]
+> ```
+
+### React
+
+Install the frontend package.
+
+```bash
+npm i momentum-modal-react
+# or
+yarn add momentum-modal-react
+```
+
+> **Warning**
+> The package utilizes `axios` under the hood. If your app is already using `axios` as a dependency, make sure to lock it to the same version Inertia uses.
+>
 > ```bash
 > npm i [email protected]
 > ```
@@ -50,6 +67,8 @@ yarn add momentum-modal
 
 Put the `Modal` component somewhere within the layout.
 
+### Vue 3 setup
+
 ```vue
 <script setup>
 import { Modal } from 'momentum-modal'
@@ -63,11 +82,27 @@ import { Modal } from 'momentum-modal'
 </template>
 ```
 
+### React setup
+
+```jsx
+import {Modal} from 'momentum-modal-react';
+
+export function Layout({children}) {
+ return (
+ <>
+ {children}
+ <Modal />
+ </>
+ );
+}
+```
+
 Set up a `modal` plugin with the same component resolver you use to render Inertia pages.
 
 ### Vite
 
 ```javascript
+// Vue
 import { modal } from "momentum-modal"
 
 createInertiaApp({
@@ -81,11 +116,28 @@ createInertiaApp({
  .mount(el)
  }
 })
+
+// React
+globalThis.resolveMomentumModal = (name) => {
+ const pages = import.meta.glob('./Pages/**/*.jsx', {eager: true});
+ return pages[`./Pages/${name}.jsx`];
+};
+
+createInertiaApp({
+ resolve: (name) => {
+ const pages = import.meta.glob('./Pages/**/*.jsx', {eager: true});
+ return pages[`./Pages/${name}.jsx`];
+ },
+ setup({el, App, props}) {
+ createRoot(el).render(<App {...props} />);
+ },
+});
 ```
 
 ### Laravel Mix
 
 ```javascript
+// Vue
 import { modal } from "momentum-modal"
 
 createInertiaApp({
@@ -99,6 +151,16 @@ createInertiaApp({
  .mount(el)
  }
 })
+
+// React
+globalThis.resolveMomentumModal = (name) => require(`./Pages/${name}`);
+
+createInertiaApp({
+ resolve: (name) => require(`./Pages/${name}`),
+ setup({el, App, props}) {
+ createRoot(el).render(<App {...props} />);
+ },
+});
 ```
 
 ## Usage
@@ -132,7 +194,7 @@ class ShowTweet extends Controller
 }
 ```
 
-Find the example frontend implementation [here](https://github.com/lepikhinb/momentum-modal-plugin/tree/master/examples).
+Find the example Vue 3 implementation [here](https://github.com/lepikhinb/momentum-modal-plugin/tree/master/examples).
 
 ## Advanced Inertia
 
@@ -155,8 +217,6 @@ Momentum is a set of packages designed to improve your experience building Inert
 
 ## Credits
 
-## Credits
-
 - [Boris Lepikhin](https://twitter.com/lepikhinb)
 - [All Contributors](../../contributors)