@householdjs/ui
v2.2.0-alpha.0
Published
premade unstyled ui elements
Downloads
47
Readme
<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
andviewBoxHeight
are the same -> you don't have to defineviewBoxWidth
&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
- you copy it from original svg element - never change this value!! - paths inside svg are calculations based on
- 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
- if not defined, it takes
- children
- all other svg elements but
<svg />
- all other svg elements but