PHPackages                             asuwebplatforms/asu\_react\_integration - 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. [Utility & Helpers](/categories/utility)
4. /
5. asuwebplatforms/asu\_react\_integration

ActiveDrupal-module[Utility & Helpers](/categories/utility)

asuwebplatforms/asu\_react\_integration
=======================================

Provide functionality related to integration of react components

2.18.12(1w ago)01.2k↓34.9%1MITJavaScript

Since Oct 22Pushed 1w ago1 watchersCompare

[ Source](https://github.com/ASUWebPlatforms/asu_react_integration)[ Packagist](https://packagist.org/packages/asuwebplatforms/asu_react_integration)[ RSS](/packages/asuwebplatforms-asu-react-integration/feed)WikiDiscussions main Synced yesterday

READMEChangelogDependencies (6)Versions (40)Used By (1)

ASU React Integration
=====================

[](#asu-react-integration)

The ASU React Integration module provides React and ReactDOM as a Drupal library (`asu_react_integration/reactjs`) consumed by all React-based Webspark modules (`asu_brand`, `asu_react_core`, `asu_news`, `asu_events`, `webspark_webdir`, `asu_degree_rfi`).

How it works
------------

[](#how-it-works)

Rather than relying on React's pre-built UMD files (which were removed in React 19), this module builds its own combined bundle using [esbuild](https://esbuild.github.io/). The build entry point (`build.js`) imports React and ReactDOM and assigns them to `globalThis`, producing a single IIFE file (`dist/react.production.min.js`) that sets `window.React` and `window.ReactDOM` when loaded in a browser.

The downstream `@asu/*` UMD packages expect these two globals to be present before they execute. The Drupal library definition in `asu_react_integration.libraries.yml` loads the bundle with `weight: -10` to ensure it runs first.

The compiled `dist/react.production.min.js` artifact is committed to the repository so no build step is required at deploy time — matching the pattern used by all other Webspark React modules.

Installation
------------

[](#installation)

The ASU React Integration module installs when you create a Webspark site. No manual steps are required.

Requirements
------------

[](#requirements)

Drupal 10.x or later.

Updating React
--------------

[](#updating-react)

When a new version of React is released, follow these steps:

**1. Update the version in `package.json`:**

```
"dependencies": {
  "react": "^19",
  "react-dom": "^19"
}
```

Replace `^19` with the new version constraint as needed.

**2. Install dependencies:**

```
yarn install
```

**3. Rebuild the bundle:**

```
yarn build
```

This runs esbuild against `build.js` and overwrites `dist/react.production.min.js`.

**4. Verify the output:**

Confirm the bundle correctly sets both globals by running:

```
node -e "
const vm = require('vm');
const fs = require('fs');
const code = fs.readFileSync('dist/react.production.min.js', 'utf8');
const ctx = { globalThis: {} };
vm.createContext(ctx);
vm.runInContext(code, ctx);
const g = ctx.globalThis;
console.log('React.version:', g.React.version);
console.log('React.createElement:', typeof g.React.createElement);
console.log('ReactDOM.createRoot:', typeof g.ReactDOM.createRoot);
console.log('ReactDOM.hydrateRoot:', typeof g.ReactDOM.hydrateRoot);
"
```

All four values should be the new version string or `function`.

**5. Update the library version in `asu_react_integration.libraries.yml`:**

```
reactjs:
  version: 2.19.x # update to reflect the new React version
```

**6. Commit the updated files:**

```
asu_react_integration/package.json
asu_react_integration/yarn.lock
asu_react_integration/asu_react_integration.libraries.yml
asu_react_integration/dist/react.production.min.js

```

Notes on `react-dom/client` vs `react-dom`
------------------------------------------

[](#notes-on-react-domclient-vs-react-dom)

In React 19, `createRoot` and `hydrateRoot` moved from the top-level `react-dom` export to `react-dom/client`. The `build.js` entry point imports `react-dom/client` specifically to ensure these methods are present on `window.ReactDOM`, as all `@asu/*` UMD bundles depend on them.

If a future `@asu/*` package requires additional methods on `window.ReactDOM` that live on the base `react-dom` export (such as `createPortal` or `flushSync`), update `build.js` to merge both:

```
import * as React from 'react';
import * as ReactDOMClient from 'react-dom/client';
import * as ReactDOMBase from 'react-dom';
globalThis.React = React;
globalThis.ReactDOM = { ...ReactDOMBase, ...ReactDOMClient };
```

Note that this will increase the bundle size slightly as both `react-dom` and `react-dom/client` will be included.

###  Health Score

48

—

FairBetter than 93% of packages

Maintenance98

Actively maintained with recent releases

Popularity20

Limited adoption so far

Community15

Small or concentrated contributor base

Maturity51

Maturing project, gaining track record

 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.

###  Release Activity

Cadence

Every ~16 days

Recently: every ~8 days

Total

39

Last Release

7d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/1ef1b4d562b29a2e31f1d7c671de1cc388b8afd25b833031f11e82f43ea82a87?d=identicon)[mlsamuel](/maintainers/mlsamuel)

![](https://www.gravatar.com/avatar/8f75e2a47756245df20e3851807bcdae3b357570e635f4a455ac863aa6ba0f3c?d=identicon)[chill5-0](/maintainers/chill5-0)

![](https://www.gravatar.com/avatar/2942d322525cdeac050d6126050d84324b4a6a8f4f04bfb3cbe02ac31f73bf4b?d=identicon)[tbutterf](/maintainers/tbutterf)

---

Top Contributors

[![tbutterf](https://avatars.githubusercontent.com/u/6109406?v=4)](https://github.com/tbutterf "tbutterf (1 commits)")

### Embed Badge

![Health badge](/badges/asuwebplatforms-asu-react-integration/health.svg)

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

###  Alternatives

[laravel-frontend-presets/bootstrap-4

Laravel 5.5.x Front-end preset for Bootstrap 4

392.1k](/packages/laravel-frontend-presets-bootstrap-4)

PHPackages © 2026

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