@enquio/react

React wrapper component for the Enquio popup Web Component. Provides a React-idiomatic interface to integrate Enquio popups into your React applications.

📦 Installation

npm install @enquio/react

✅ Requirements

• React: >=17
• React-DOM: >=17

🚀 Quick Start

Basic Usage

import { EnquioPopup } from '@enquio/react';

export default function App() {
  return (
    <div>
      <h1>My App</h1>
      <EnquioPopup projectId="your-project-id" />
    </div>
  );
}

📖 API

EnquioPopup

A React component that renders the Enquio popup Web Component.

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | projectId | string | Yes | Your Enquio project ID |

Example

<EnquioPopup projectId="abc-123-def-456" />

🔧 Advanced Usage

Using Refs

You can access the underlying DOM element using React refs:

import { useRef, useEffect } from 'react';
import { EnquioPopup } from '@enquio/react';

export default function App() {
  const popupRef = useRef<HTMLElement>(null);

  useEffect(() => {
    // Access custom element directly if needed
    if (popupRef.current) {
      console.log('Popup ready:', popupRef.current);
    }
  }, []);

  return <enquio-popup ref={popupRef} project-id="your-project-id" />;
}

With TypeScript

The component is fully typed:

import { EnquioPopup } from '@enquio/react';
import type { ReactElement } from 'react';

export default function App(): ReactElement {
  return <EnquioPopup projectId="your-project-id" />;
}

🔗 Dependencies

• @enquio/core: Core script loader
• react: Peer dependency (must be installed separately)
• react-dom: Peer dependency (must be installed separately)

📝 License

MIT © Enquio Team