PHPackages                             agusquiw/react - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Framework](/categories/framework)
4. /
5. agusquiw/react

ActiveMagento2-module[Framework](/categories/framework)

agusquiw/react
==============

Use React in Magento

00JavaScript

Since Sep 19Pushed 4y ago1 watchersCompare

[ Source](https://github.com/anietog1/magento-react)[ Packagist](https://packagist.org/packages/agusquiw/react)[ RSS](/packages/agusquiw-react/feed)WikiDiscussions master Synced today

READMEChangelogDependenciesVersions (1)Used By (0)

React for Magento
=================

[](#react-for-magento)

React components can be created using normal JS. For example:

```
// File: app/code/Agusquiw/ReactDemo/view/frontend/web/js/components/Counter.js"
define(['react', 'html'], ({ useState, useCallback, useEffect }, html) => {
    const Counter = (props) => {
        const [count, setCount] = useState(props.initialValue || 0);
        const decreaseCount = useCallback(() => setCount((count) => count - 1));
        const increaseCount = useCallback(() => setCount((count) => count + 1));
        return html`

                Decrease
                ${count}
                Increase

        `;
    };

    return Counter;
});
```

React components can be added to phtml templates using the custom widget `reactComponent`:

```

```

It would produce an output similar to:

[![Gif of React in Magento](./assets/react-in-magento.gif)](./assets/react-in-magento.gif)

Htm instead of JSX
==================

[](#htm-instead-of-jsx)

To ease the use of React and avoid the necessity of compilation, this extension makes use of [htm](https://github.com/developit/htm) for it's JSX-like syntax.

Custom Hooks
============

[](#custom-hooks)

This extension puts some hooks in place, which are in charge of communicating with Magento.

useForcedUpdate
---------------

[](#useforcedupdate)

Force the update of the component calling the `forceUpdate` function. It can be passed down to other components or even shared anywhere else.

```
const forceUpdate = useForcedUpdate();
```

useObservable
-------------

[](#useobservable)

Syncs a React state with an observable.

```
const [cartData, setCartData, getCartData] = useObservable(customerData.get('cart-data'));
```

useSharedState
--------------

[](#usesharedstate)

Hook for sharing state between multiple React components.

```
const [state, setState, getState] = useSharedState('state', 0);
```

Event bus
=========

[](#event-bus)

Since multiple unrelated components are going to be rendered, a communication system is required between them. `Agusquiw_React/js/eventBus` offers such a service.

Roadmap and pending features
============================

[](#roadmap-and-pending-features)

- Switch between react-development and react-production builds based on Magento Admin configuration.
- Useful templates and blocks to avoid boilerplate code.
- API query system and hooks, similar to apollo graphql but not necessarily with graphql.

Contributing
============

[](#contributing)

- Use prettier.
- Don't bloat the code with comments.
- Don't optimize ahead of time.
- Contributing ideas is also contributing.

Demos
=====

[](#demos)

Demos can be found at [Agusquiw\_ReactDemo](https://github.com/anietog1/magento-react-demo).

###  Health Score

15

—

LowBetter than 3% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity0

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity29

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

### Community

Maintainers

![](https://www.gravatar.com/avatar/3c8c124a179677ac1e595952c1e4ee1983dca44937144c6abdee8f3c08579603?d=identicon)[anietog1](/maintainers/anietog1)

---

Top Contributors

[![nietoga](https://avatars.githubusercontent.com/u/30280788?v=4)](https://github.com/nietoga "nietoga (19 commits)")

---

Tags

magento2magento2-modulereact

### Embed Badge

![Health badge](/badges/agusquiw-react/health.svg)

```
[![Health](https://phpackages.com/badges/agusquiw-react/health.svg)](https://phpackages.com/packages/agusquiw-react)
```

###  Alternatives

[laravel/dusk

Laravel Dusk provides simple end-to-end testing and browser automation.

1.9k39.6M300](/packages/laravel-dusk)[nineinchnick/edatatables

Grid widget for the Yii Framework, wrapper for the DataTables jQuery plugin

173.2k](/packages/nineinchnick-edatatables)[link-cloud/fast-hyperf

LinkCloud Fast Hyperf

241.2k1](/packages/link-cloud-fast-hyperf)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)