6. Integrace: React

6.1 React verze 16, 17, 18

Starší verze Reactu nepodporují automatické nastavování JavaScript properties na Custom Elements. Všechny hodnoty jsou serializovány přes setAttribute(), proto je nutné předávat konfiguraci jako JSON string a události zachytávat přes useRef + addEventListener.

TypeScript deklarace

Základní integrace

Dynamická konfigurace

6.2 React 19+

React 19 nativně podporuje JavaScript properties na Custom Elements. Widget vystavuje property widgetConfig, kterou React 19 detekuje a nastaví objekt přímo bez JSON serializace.

Jak React 19 detekuje properties

<ppl-access-point-widget widgetConfig={obj} />

React 19 provede:

Zkontroluje: "widgetConfig" in element → true (getter/setter existuje)

Nastaví: element.widgetConfig = obj → přímé přiřazení objektu

Bez JSON serializace, bez full re-init cyklu

TypeScript deklarace pro React 19

Základní integrace (inline režim)

Doporučení: Wrapper komponenta

Pro větší projekty doporučujeme vytvořit wrapper komponentu, která zapouzdří komunikaci s widgetem:

Použití wrapper komponenty:

6.1 React verze 16, 17, 18#

TypeScript deklarace#

Základní integrace#

Modal režim#

Dynamická konfigurace#

6.2 React 19+#

Jak React 19 detekuje properties#

TypeScript deklarace pro React 19#

Základní integrace (inline režim)#

Modal režim s ref#

Doporučení: Wrapper komponenta#