Widget 2.0
    • PPL Access Point Widget — Implementation Guide for E-shops
    • 1. Quick Start — Integration in 5 Minutes
    • 2. Embedding the Widget into a Page
    • 3. Static HTML Integration
    • 4. Integration: Vanilla JavaScript
    • 5. Integration: PHP
    • 6. Integration: React
    • 7. Complete API Reference
    • 8. Advanced Scenarios
    • 9. Communication Channels Overview
    Switch to czech

    6. Integration: React

    6.1 React Versions 16, 17, 18#

    Older React versions do not support automatically setting JavaScript properties on Custom Elements. All values are serialized via setAttribute(), so configuration must be passed as a JSON string and events must be captured via useRef + addEventListener.

    TypeScript Declaration#

    Basic Integration#

    Modal Mode#

    Dynamic Configuration#

    6.2 React 19+#

    React 19 natively supports JavaScript properties on Custom Elements. The widget exposes the widgetConfig property, which React 19 detects and sets the object directly without JSON serialization.

    How React 19 Detects Properties#

    <ppl-access-point-widget widgetConfig={obj} />
    React 19 will:
    1.
    Check: "widgetConfig" in element → true (getter/setter exists)
    2.
    Set: element.widgetConfig = obj → direct object assignment
    3.
    No JSON serialization, no full re-init cycle

    TypeScript Declaration for React 19#

    Basic Integration (Inline Mode)#

    Modal Mode with Ref#

    Recommended: Wrapper Component#

    For larger projects, we recommend creating a wrapper component that encapsulates communication with the widget:
    Using the wrapper component:
    Modified at 2026-04-22 12:00:27
    Previous
    5. Integration: PHP
    Next
    7. Complete API Reference
    Built with