Rules Hub
Coding Rules Library
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
Declare a wrapped custom element as a JSX intrinsic instead of using React.createElement
When bridging a web component / custom element into JSX, declare it once as a JSX intrinsic element (via a JSX.IntrinsicElements namespace augmentation) rather than building it with React.createElement — call sites then use it as plain JSX.
Bad example
| 1 | const K5aStream = ({ name, slotTag, children }: Props) => |
| 2 | React.createElement('k5a-stream', { name, 'slot-tag': slotTag }, children); |
Explanation (EN)
Manually calling createElement for a custom element works, but it's more verbose than JSX and forces every consumer through this wrapper instead of writing the tag directly.
Objašnjenje (HR)
Ručno pozivanje createElement za custom element funkcionira, ali je opširnije od JSX-a i tjera svakog korisnika da prolazi kroz ovaj wrapper umjesto da direktno piše tag.
Good example
| 1 | declare global { |
| 2 | namespace JSX { |
| 3 | interface IntrinsicElements { |
| 4 | 'k5a-stream': { name: string; 'slot-tag'?: string; children?: React.ReactNode }; |
| 5 | } |
| 6 | } |
| 7 | } |
| 8 |
|
| 9 | <k5a-stream name={name} slot-tag={slotTag}>{children}</k5a-stream> |
Explanation (EN)
Registering the tag as a JSX intrinsic lets any call site write it as plain, typed JSX, with no createElement indirection needed.
Objašnjenje (HR)
Registriranjem taga kao JSX intrinsic elementa, svako mjesto poziva može ga pisati kao običan, tipiziran JSX, bez potrebe za createElement posrednikom.