@householdjs/ui
TypeScript icon, indicating that this package has built-in type declarations

2.2.0-alpha.0 • Public • Published

<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 />

Readme

Keywords

Package Sidebar

Install

npm i @householdjs/ui

Weekly Downloads

0

Version

2.2.0-alpha.0

License

ISC

Unpacked Size

23.1 kB

Total Files

27

Last publish

Collaborators

  • ledanielz