React Integration

Using React within WooNooW Addons

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;
    });
  });
})();

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>;
}

Last updated Jan 31, 2024