---
title: React Integration
description: Using React within WooNooW Addons
date: 2024-01-31
---

# Addon React Integration

## The Challenge

External addons cannot bundle React because WooNooW already ships with a React runtime. Bundling it again would cause conflicts and bloat.

## Solution: Exposed Runtime

WooNooW exposes its React instance and Component library on the `window` object.

### Core Setup (How it works internally)

```typescript
// WooNooW Core
window.WooNooW = {
  React: React,
  ReactDOM: ReactDOM,
  components: {
    Button: Button,
    Input: Input,
    Select: Select,
  },
  hooks: { addFilter, addAction }
};
```

### Addon implementation

#### Level 1: Vanilla JS (No Build)

Good for simple injections.

```javascript
(function() {
  window.addEventListener('woonoow:loaded', function() {
    window.WooNooW.addFilter('woonoow_order_form_after_shipping', function(container) {
      // Manual DOM manipulation
      return container;
    });
  });
})();
```

#### Level 2: React with Build (Recommended)

Use `vite` or `webpack` and configure React as an **external**.

**vite.config.js**
```javascript
export default {
  build: {
    rollupOptions: {
      external: ['react', 'react-dom'],
      output: {
        globals: {
          react: 'window.WooNooW.React',
          'react-dom': 'window.WooNooW.ReactDOM'
        }
      }
    }
  }
};
```

**Index.tsx**
```typescript
const { React, hooks, components } = window.WooNooW;
const { Button } = components;

function MyAddonComponent() {
  return <Button>Click Me</Button>;
}
```