kbin-ui v2.3.9

kbin-ui

Table of contents

Variables

• colors
• scrollbarJSS
• sizes
• springConfig
• zIndex

Functions

• AnimatedFlexCol
• AnimatedFlexRow
• AnimatedText
• AutoPlacingGrid
• Button
• CenterMenu
• CheckBox
• Conditional
• ContextMenu
• ContextMenuExtension
• DualButtons
• FlexCol
• FlexRow
• HorizontalButtonScroller
• HorizontalScroller
• IfElse
• LabelledItems
• LabelledMultiText
• LabelledText
• Map
• Notification
• SVGIcon
• Switch
• Text
• TextArea
• TextAreaOnly
• TextInput
• TextInputOnly
• UncontrolledCheckBox
• UncontrolledDualButtons
• createMenuManager
• setCustomColors
• setCustomScrollbarJSS
• setCustomSizes
• setCustomSpringConfig
• setCustomZIndices
• useContextMenu
• useScrollbarJSS

Variables

colors

• Const colors: object

Type declaration:

Defined in: theme.ts:3

scrollbarJSS

• Const scrollbarJSS: object

an object with JSS to set a custom scrollbar in a component

Usage:

const useJSS = createUseStyles({
  /* style */,
  ...scrollbarJSS.thin
})

Type declaration:

Defined in: theme.ts:142

sizes

• Const sizes: object

a collection of size constants compatible with CSS used across the UI

Usage:

<Button fontSize={sizes.text.small}></Button>

Type declaration:

Defined in: theme.ts:36

springConfig

• Const springConfig: object

a collection of default spring configs

Usage:

const springStyle = useSpring({
  /* animated style */,
  config: springConfig.fast
})

Type declaration:

Defined in: theme.ts:106

zIndex

• Const zIndex: object

sets the z-index of necessary components

Type declaration:

Defined in: theme.ts:96

Functions

AnimatedFlexCol

▸ ConstAnimatedFlexCol(__namedParameters: { alignItems?: string ; backgroundColor?: string ; children?: React.ReactNode ; className?: string ; height?: string ; justifyContent?: string ; margin?: string ; onClick?: (e: MouseEvent<HTMLDivElement>) => void ; onContextMenu?: (e: MouseEvent<HTMLDivElement>) => void ; onDragOver?: (e: DragEvent<HTMLDivElement>) => void ; onDrop?: (e: DragEvent<HTMLDivElement>) => void ; onPointerEnter?: (e: PointerEvent<HTMLDivElement>) => void ; onPointerLeave?: (e: PointerEvent<HTMLDivElement>) => void ; onWheel?: (e: WheelEvent<HTMLDivElement>) => void ; padding?: string ; pointer?: boolean ; ref?: RefObject<HTMLDivElement> ; style?: CSS.Properties ; width?: string }, ref: ForwardedRef<HTMLDivElement>): Element

animated(FlexCol) compatible with springs. see FlexCol.

Parameters:

• __namedParameters: object

• ref: ForwardedRef<HTMLDivElement>

Returns: Element

Defined in: Flex/FlexCol.tsx:58

AnimatedFlexRow

▸ ConstAnimatedFlexRow(__namedParameters: { alignItems?: string ; backgroundColor?: string ; children?: React.ReactNode ; className?: string ; flexWrap?: wrap | nowrap | wrap-reverse ; height?: string ; justifyContent?: string ; margin?: string ; onClick?: (e: MouseEvent<HTMLDivElement>) => void ; onContextMenu?: (e: MouseEvent<HTMLDivElement>) => void ; onPointerEnter?: (e: PointerEvent<HTMLDivElement>) => void ; onPointerLeave?: (e: PointerEvent<HTMLDivElement>) => void ; onWheel?: (e: WheelEvent<HTMLDivElement>) => void ; padding?: string ; pointer?: boolean ; ref?: RefObject<HTMLDivElement> ; style?: CSS.Properties ; width?: string }, ref: ForwardedRef<HTMLDivElement>): Element

animated(FlexRow) compatible with springs. see FlexRow.

Parameters:

• __namedParameters: object

• ref: ForwardedRef<HTMLDivElement>

Returns: Element

Defined in: Flex/FlexRow.tsx:54

AnimatedText

▸ ConstAnimatedText(__namedParameters: { className?: string ; color?: string ; fontSize?: string ; margin?: string ; onClick?: (e: MouseEvent<HTMLDivElement>) => void ; padding?: string ; pointer?: boolean ; ref?: RefObject<HTMLDivElement> ; style?: CSS.Properties ; text: string ; textAlign?: string ; textCursor?: boolean ; underline?: boolean ; wrap?: boolean }, ref: ForwardedRef<HTMLDivElement>): Element

animated(Text) compatible with springs. see Text.

Parameters:

• __namedParameters: object

• ref: ForwardedRef<HTMLDivElement>

Returns: Element

Defined in: Text/Text.tsx:40

AutoPlacingGrid

▸ AutoPlacingGrid(__namedParameters: { alignItems?: start | end | center | stretch ; children?: ReactNode ; className?: string ; direction: row | column | row dense | column dense ; gap?: string ; justifyContent?: start | end | center | stretch ; minHeight: string ; minWidth: string ; numCols?: number | string ; numRows?: number | string ; placeItems?: start | end | center | stretch ; style?: CSS.Properties }): Element

a div with css grid and basic auto placing capabilities

Parameters:

• __namedParameters: object

Returns: Element

Defined in: AutoPlacingGrid/AutoPlacingGrid.tsx:5

Button

▸ Button(__namedParameters: { buttonRef?: RefObject<HTMLDivElement> ; children?: React.ReactNode ; className?: string ; fontSize?: string ; isRed?: boolean ; margin?: string ; notClickable?: boolean ; onClick?: (e: MouseEvent<HTMLDivElement>) => void ; onContextMenu?: (e: MouseEvent<HTMLDivElement>) => void ; onDoubleClick?: (e: MouseEvent<HTMLDivElement>) => void ; onKeyDown?: (e: KeyboardEvent<HTMLDivElement>) => void ; onPointerDown?: (e: React.PointerEvent<HTMLDivElement>) => void ; onPointerEnter?: (e: MouseEvent<HTMLDivElement>) => void ; onPointerLeave?: (e: MouseEvent<HTMLDivElement>) => void ; padding?: string ; style?: CSS.Properties }): Element

a standard button element with onClick + more

Parameters:

• __namedParameters: object

Returns: Element

Defined in: Button/Button.tsx:6

CenterMenu

▸ CenterMenu(__namedParameters: { bounderStyle?: CSS.Properties ; children: React.ReactNode ; className?: string ; cmControlData: CenterMenuControlData ; header?: string ; headerClassName?: string ; headerStyle?: CSS.Properties ; onClose: () => void ; style?: CSS.Properties }): Element

a component to create central menu popups. used along with the menuManager and useCenterMenu hook.

Usage:

First the menu manager must be instantiated. See createMenuManager.

once the useCenterMenu hook is available (probably through export / import), create center menus following the two component pattern below

function ExampleCenterMenu() {
  const { cmControlData, closeMenu, softClose } = useCenterMenu('exampleMenu')
  return (
    <CenterMenu
      cmControlData={cmControlData}
      onClose={closeMenu}
    > 
      <ExampleMenuItems closeMenu={closeMenu} softClose={softClose}>
    </CenterMenu>
  )
}

function ExampleMenuItems({ closeMenu, softClose }) {
  useEscapeToClose(closeMenu)
  return (
    <Fragment>
      /* menu content */
    </Fragment>
  )
}

Parameters:

• __namedParameters: object

Returns: Element

Defined in: CenterMenu/CenterMenu.tsx:11

CheckBox

▸ CheckBox(__namedParameters: { onChecked?: () => void ; onUnChecked?: () => void ; style?: CSS.Properties }): Element

Parameters:

• __namedParameters: object

Returns: Element

Defined in: CheckBox/CheckBox.tsx:5

Conditional

▸ Conditional(__namedParameters: { children: ReactNode ; showIf: boolean }): Element

Parameters:

• __namedParameters: object

Returns: Element

Defined in: Conditional.tsx:3

ContextMenu

▸ ContextMenu(__namedParameters: { bounderStyle?: CSS.Properties ; children: ReactNode ; event: React.MouseEvent<HTMLDivElement> | MouseEvent ; isOpen: boolean ; onClose: () => void ; style?: CSS.Properties }): Element

Parameters:

• __namedParameters: object

Returns: Element

Defined in: ContextMenu/ContextMenu.tsx:7

ContextMenuExtension

▸ ContextMenuExtension(__namedParameters: { buttonStyle?: CSS.Properties ; children: ReactNode ; fontSize?: string ; text: string }): Element

Parameters:

• __namedParameters: object

Returns: Element

Defined in: ContextMenuExtension/ExtensionMenu.tsx:10

DualButtons

▸ DualButtons(__namedParameters: { leftText: string ; onLeft?: () => void ; onRight?: () => void ; rightText: string ; startRight?: boolean }): Element

Parameters:

• __namedParameters: object

Returns: Element

Defined in: DualButtons/DualButtons.tsx:4

FlexCol

▸ ConstFlexCol(__namedParameters: { alignItems?: string ; backgroundColor?: string ; children?: React.ReactNode ; className?: string ; height?: string ; justifyContent?: string ; margin?: string ; onClick?: (e: MouseEvent<HTMLDivElement>) => void ; onContextMenu?: (e: MouseEvent<HTMLDivElement>) => void ; onDragOver?: (e: DragEvent<HTMLDivElement>) => void ; onDrop?: (e: DragEvent<HTMLDivElement>) => void ; onPointerEnter?: (e: PointerEvent<HTMLDivElement>) => void ; onPointerLeave?: (e: PointerEvent<HTMLDivElement>) => void ; onWheel?: (e: WheelEvent<HTMLDivElement>) => void ; padding?: string ; pointer?: boolean ; ref?: RefObject<HTMLDivElement> ; style?: CSS.Properties ; width?: string }, ref: ForwardedRef<HTMLDivElement>): Element

Parameters:

• __namedParameters: object

• ref: ForwardedRef<HTMLDivElement>

Returns: Element

Defined in: Flex/FlexCol.tsx:56

FlexRow

▸ ConstFlexRow(__namedParameters: { alignItems?: string ; backgroundColor?: string ; children?: React.ReactNode ; className?: string ; flexWrap?: wrap | nowrap | wrap-reverse ; height?: string ; justifyContent?: string ; margin?: string ; onClick?: (e: MouseEvent<HTMLDivElement>) => void ; onContextMenu?: (e: MouseEvent<HTMLDivElement>) => void ; onPointerEnter?: (e: PointerEvent<HTMLDivElement>) => void ; onPointerLeave?: (e: PointerEvent<HTMLDivElement>) => void ; onWheel?: (e: WheelEvent<HTMLDivElement>) => void ; padding?: string ; pointer?: boolean ; ref?: RefObject<HTMLDivElement> ; style?: CSS.Properties ; width?: string }, ref: ForwardedRef<HTMLDivElement>): Element

Parameters:

• __namedParameters: object

• ref: ForwardedRef<HTMLDivElement>

Returns: Element

Defined in: Flex/FlexRow.tsx:52

HorizontalButtonScroller

▸ HorizontalButtonScroller(__namedParameters: { buttonClassName?: string ; buttonStyle?: CSS.Properties ; children: ReactNode ; className?: string ; onLeft: () => void ; onRight: () => void ; onWheel?: (e: WheelEvent<HTMLDivElement>) => void ; style?: CSS.Properties ; useOnWheel?: boolean }): Element

Parameters:

• __namedParameters: object

Returns: Element

Defined in: HorizontalButtonScroller.tsx:10

HorizontalScroller

▸ HorizontalScroller(__namedParameters: { alignItems?: string ; children: ReactNode ; className?: string ; height?: string ; style?: CSS.Properties ; width?: string }): Element

Parameters:

• __namedParameters: object

Returns: Element

Defined in: HorizontalScroller/HorizontalScroller.tsx:13

IfElse

▸ IfElse(__namedParameters: { show: ReactNode ; showElse: ReactNode ; showIf: boolean }): Element

Parameters:

• __namedParameters: object

Returns: Element

Defined in: IfElse.tsx:3

LabelledItems

▸ LabelledItems(__namedParameters: { children: ReactNode ; itemsStyle?: CSS.Properties ; label: ReactNode ; labelSize?: string ; labelStyle?: CSS.Properties ; style?: CSS.Properties }): Element

Parameters:

• __namedParameters: object

Returns: Element

Defined in: LabelledItems/LabelledItems.tsx:9

LabelledMultiText

▸ LabelledMultiText(__namedParameters: { label: string ; labelSize?: string ; labelStyle?: CSS.Properties ; style?: CSS.Properties ; text: string[] ; textSize?: string ; textStyle?: CSS.Properties }): Element

Parameters:

• __namedParameters: object

Returns: Element

Defined in: LabelledText/LabelledMultiText.tsx:8

LabelledText

▸ LabelledText(__namedParameters: { label: string ; labelSize?: string ; labelStyle?: CSS.Properties ; style?: CSS.Properties ; text: string ; textSize?: string ; textStyle?: CSS.Properties }): Element

Parameters:

• __namedParameters: object

Returns: Element

Defined in: LabelledText/LabelledText.tsx:8

Map

▸ Map<T>(__namedParameters: { array: T[] ; map: (val: T, index: number) => ReactNode }): Element

Type parameters:

Parameters:

• __namedParameters: object

Returns: Element

Defined in: Map.tsx:3

Notification

▸ Notification(__namedParameters: { xLocation?: left | center | right ; yLocation?: top | center | bottom }): Element

Parameters:

• __namedParameters: object

Returns: Element

Defined in: Notification/Notification.tsx:16

SVGIcon

▸ SVGIcon(__namedParameters: { alt: string ; className?: string ; height?: string ; imageRef?: RefObject<HTMLImageElement> ; margin?: string ; onClick?: (e: MouseEvent<HTMLImageElement>) => void ; onPointerDown?: (e: PointerEvent<HTMLImageElement>) => void ; padding?: string ; pointer?: boolean ; scale?: number ; size?: string ; src: string ; style?: CSS.Properties ; width?: string }): Element

Parameters:

• __namedParameters: object

Returns: Element

Defined in: SVGIcon/SVGIcon.tsx:5

Switch

▸ Switch(__namedParameters: { fontSize?: string ; initState: boolean ; onSwitch: (newState: boolean) => void ; style?: object ; text: string }): Element

Parameters:

• __namedParameters: object

Returns: Element

Defined in: Switch/Switch.tsx:19

Text

▸ ConstText(__namedParameters: { className?: string ; color?: string ; fontSize?: string ; margin?: string ; onClick?: (e: MouseEvent<HTMLDivElement>) => void ; padding?: string ; pointer?: boolean ; ref?: RefObject<HTMLDivElement> ; style?: CSS.Properties ; text: string ; textAlign?: string ; textCursor?: boolean ; underline?: boolean ; wrap?: boolean }, ref: ForwardedRef<HTMLDivElement>): Element

Parameters:

• __namedParameters: object

• ref: ForwardedRef<HTMLDivElement>

Returns: Element

Defined in: Text/Text.tsx:38

TextArea

▸ TextArea(__namedParameters: { autoFocus?: boolean ; bounderClassName?: string ; defaultValue?: string ; fontSize?: string ; inputClassName?: string ; label?: string ; labelFontSize?: string ; labelStyle?: CSS.Properties ; layout?: row | column ; onBlur?: (e: FocusEvent<HTMLTextAreaElement>) => void ; onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void ; onEnter?: () => void ; onEscape?: () => void ; onFocus?: (e: FocusEvent<HTMLTextAreaElement>) => void ; onKeyDown?: (e: KeyboardEvent<HTMLTextAreaElement>) => void ; placeholder?: string ; style?: CSS.Properties ; textAreaRef?: RefObject<HTMLTextAreaElement> ; value?: string }): Element

Parameters:

• __namedParameters: object

Returns: Element

Defined in: TextArea/TextArea.tsx:11

TextAreaOnly

▸ TextAreaOnly(__namedParameters: { autoFocus?: boolean ; className?: string ; defaultValue?: string ; fontSize?: string ; onBlur?: (e: FocusEvent<HTMLTextAreaElement>) => void ; onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void ; onEnter?: () => void ; onEscape?: () => void ; onFocus?: (e: FocusEvent<HTMLTextAreaElement>) => void ; onKeyDown?: (e: KeyboardEvent<HTMLTextAreaElement>) => void ; placeholder?: string ; style?: CSS.Properties ; textAreaRef?: RefObject<HTMLTextAreaElement> ; value?: string }): Element

Parameters:

• __namedParameters: object

Returns: Element

Defined in: TextArea/TextAreaOnly.tsx:5

TextInput

▸ TextInput(__namedParameters: { autoFocus?: boolean ; bounderClassName?: string ; defaultValue?: string ; fontSize?: string ; inputClassName?: string ; inputRef?: RefObject<HTMLInputElement> ; label?: string ; labelFontSize?: string ; labelStyle?: CSS.Properties ; layout?: row | column ; onBlur?: (e: FocusEvent<HTMLInputElement>) => void ; onChange?: (e: ChangeEvent<HTMLInputElement>) => void ; onEnter?: () => void ; onEscape?: () => void ; onFocus?: (e: FocusEvent<HTMLInputElement>) => void ; onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void ; password?: boolean ; placeholder?: string ; style?: CSS.Properties ; value?: string }): Element

Parameters:

• __namedParameters: object

Returns: Element

Defined in: TextInput/TextInput.tsx:11

TextInputOnly

▸ TextInputOnly(__namedParameters: { autoFocus?: boolean ; className?: string ; defaultValue?: string ; fontSize?: string ; inputRef?: RefObject<HTMLInputElement> ; onBlur?: (e: FocusEvent<HTMLInputElement>) => void ; onChange?: (e: ChangeEvent<HTMLInputElement>) => void ; onEnter?: () => void ; onEscape?: () => void ; onFocus?: (e: FocusEvent<HTMLInputElement>) => void ; onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void ; password?: boolean ; placeholder?: string ; style?: CSS.Properties ; value?: string }): Element

Parameters:

• __namedParameters: object

Returns: Element

Defined in: TextInput/TextInputOnly.tsx:5

UncontrolledCheckBox

▸ UncontrolledCheckBox(__namedParameters: { checked: boolean ; className?: string ; onClick?: (e: MouseEvent<HTMLDivElement>) => void ; style?: CSS.Properties }): Element

Parameters:

• __namedParameters: object

Returns: Element

Defined in: CheckBox/UncontrolledCheckBox.tsx:7

UncontrolledDualButtons

▸ UncontrolledDualButtons(__namedParameters: { isRight: boolean ; leftText: string ; onLeft: () => void ; onRight: () => void ; rightText: string ; style?: CSS.Properties }): Element

Parameters:

• __namedParameters: object

Returns: Element

Defined in: DualButtons/UncontrolledDualButtons.tsx:9

createMenuManager

▸ createMenuManager(): object

Returns: object

Defined in: menuManager/menuManager.ts:4

setCustomColors

▸ setCustomColors(customColors: Partial<typeof colors>): void

Parameters:

Returns: void

Defined in: theme.ts:32

setCustomScrollbarJSS

▸ setCustomScrollbarJSS(customJSS: CustomScrollbarJSS): void

Parameters:

Returns: void

Defined in: theme.ts:193

setCustomSizes

▸ setCustomSizes(customSizes: CustomSizes): void

Parameters:

Returns: void

Defined in: theme.ts:75

setCustomSpringConfig

▸ setCustomSpringConfig(customSpringConfig: CustomSpringConfig): void

Parameters:

Returns: void

Defined in: theme.ts:130

setCustomZIndices

▸ setCustomZIndices(customZIndices: Partial<typeof zIndex>): void

Parameters:

Returns: void

Defined in: theme.ts:102

useContextMenu

▸ useContextMenu<Data>(idata: Data): Return<Data>

Type parameters:

Parameters:

Returns: Return<Data>

Defined in: ContextMenu/hooks.ts:14

useScrollbarJSS

▸ ConstuseScrollbarJSS(data?: unknown): Record<Scroller, string>

Parameters:

Returns: Record<Scroller, string>

Defined in: theme.ts:205