<Dropdown />
props:
isOpen: boolean
checkDOMUpdate?: boolean
maxHeightDefined?: number
children: ReactNode
props in detail:
-
isOpen
- in most cases the only option you need to define to make this work
-
maxHeightDefined
- detecting element.offsetHeight comes with a layout reflow expense, this option will help you prevent it
- we might ask for the content to load on Dropdown open, in that case, we won't know the content height upfront
-
checkDOMUpdate
- if Dropdown children are being deeply nested, the dropdown might not be able to detect changes inside dropdown - e.g adding an item to a list
- you enable this option, and the Dropdown will detect any changes inside the Dropdown DOM. It comes at the performance expense of course.
<SvgIcon />
props:
withPointer?: boolean
viewBoxSize?: number - must be defined if viewBoxWidth and viewBoxHeight are not
viewBoxWidth?: number - must be defined if viewBoxSize is not
viewBoxHeight?: number - must be defined if viewBoxSize is not
size?: number
children: ReactNode
props in detail:
-
pointingTo
- default is top, make sure your icon (e.g arrow) points to top when exported
-
withPointer
- adds pointer to an element
-
viewBoxSize
- you copy it from original svg element
- never change this value!! - paths inside svg are calculations based on
viewBox
- when
viewBoxWidth
and viewBoxHeight
are the same -> you don't have to define viewBoxWidth
& viewBoxHeight
then
-
viewBoxWidth
- you copy it from original svg element
- never change this value!! - paths inside svg are calculations based on
viewBox
- don't define it if you defined
viewBoxSize
-
viewBoxHeight
- you copy it from original svg element - never change this value!! - paths inside svg are calculations based on
viewBox
- don't define it if you defined
viewBoxSize
-
size
- if not defined, it takes
(viewBoxWidth && viewBoxHeight) || viewBoxSize
as it's width and height parameters
- if width and height are not the same, it defines the longer side length -> the other side is ratio calculated
-
children
- all other svg elements but
<svg />