Coral is a thoroughly developed design system widely adopted by developers and designers for creating beautiful and user-friendly Sea internal products.
Copyright © 2018-2025 Sea Labs
Popper
A thin wrapper on Floating UI. This component is created to reduce duplications because we leverage on useFloating hook API abstraction is too low.
This component helps to break up popper related into a separate context. Otherwise with the new API, you may have mixed these together into the consumer components’ context.
Generally, it’s similar to old render prop API. However, it’s using hook instead, hence it’s easier to compose values.
Popup
View code
API
usePopperPopper
| Prop name | Type | Default | Description |
|---|---|---|---|
| autoUpdateEnabled | boolean | ||
| elements | { reference?: ReferenceType; floating?: HTMLElement; } | Object containing the reference and floating elements. | |
| eventsEnabled | boolean | @deprecated Use autoUpdateEnabled instead | |
| middleware | (false | { name: string; options?: any; fn: (state: { placement: Placement; x: number; y: number; strategy: Strategy; platform: Platform; initialPlacement: Placement; middlewareData: MiddlewareData; rects: ElementRects; elements: Elements; }) => Promisable<...>; })[] | Array of middleware objects to modify the positioning or provide data for rendering. | |
| offset | [number, number] | Will be overwrote by middleware, please set this in offset() under middleware in such case | |
| open | boolean | false | The open state of the floating element to synchronize with the isPositioned value. |
| placement | "left" | "right" | "bottom" | "top" | "top-start" | "top-end" | "left-start" | "left-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | Where to place the floating element relative to the reference element. | |
| platform | Platform | Custom or extended platform object. | |
| referenceElement | HTMLElement | ||
| strategy | Strategy | Using 'fixed' by default because it's less problematic than using 'absolute' in the case of scrollable container. Strategy 'absolute' often leads to outer container to be scrollable. | |
| transform | boolean | false | Whether to use transform for positioning instead of top and left (layout) in the floatingStyles object. |
| whileElementsMounted | (reference: ReferenceType, floating: HTMLElement, update: () => void) => () => void | A callback invoked when both the reference and floating elements are mounted, and cleaned up when either is unmounted. This is useful for setting up event listeners (e.g. pass autoUpdate). |
usePopperReference
| Prop name | Type | Default | Description |
|---|---|---|---|
| arrowElement | HTMLElement | ||
| popperElement | HTMLElement | ||
| referenceElement | HTMLElement | ||
| setArrowElement | (el: HTMLElement) => void | ||
| setPopperElement | (el: HTMLElement) => void | ||
| setReferenceElement | (el: HTMLElement) => void |