@blueprintjs/core
- Version 5.16.6
- Published
- 6.76 MB
- 10 dependencies
- Apache-2.0 license
Install
npm i @blueprintjs/core
yarn add @blueprintjs/core
pnpm add @blueprintjs/core
Overview
Core styles & components
Index
Variables
- Alert
- Alignment
- AnchorButton
- Blockquote
- Boundary
- Breadcrumb
- Button
- ButtonGroup
- Callout
- Card
- CardList
- Checkbox
- CheckboxCard
- Code
- CompoundTag
- ContextMenu
- ContextMenuPopover
- ControlGroup
- DialogBody
- DialogFooter
- DialogStep
- DISPLAYNAME_PREFIX
- Divider
- Elevation
- EntityTitle
- Expander
- FileInput
- FocusStyleManager
- FormGroup
- H1
- H2
- H3
- H4
- H5
- H6
- HandleInteractionKind
- HandleType
- HotkeysContext
- HotkeysDialog2
- HTMLSelect
- HTMLTable
- Icon
- Intent
- KeyComboTag
- Keys
- Label
- Menu
- MenuDivider
- MenuItem
- Navbar
- NavbarDivider
- NavbarGroup
- NavbarHeading
- OL
- Overlay2
- OverlaysContext
- PanelStack2
- PopoverInteractionKind
- PopoverPosition
- PortalContext
- Position
- Pre
- ProgressBar
- Radio
- RadioCard
- RadioGroup
- Section
- SectionCard
- SegmentedControl
- Spinner
- Switch
- SwitchCard
- TabsExpander
- Tag
- Text
- Toast2
- Toaster
- ToasterInstance
- UL
- useIsomorphicLayoutEffect
Functions
- BlueprintProvider()
- comboMatches()
- ContextMenuTargetLegacy()
- getKeyCombo()
- getKeyComboString()
- getRef()
- hideContextMenu()
- hideHotkeysDialog()
- hideHotkeysDialogAfterDelay()
- HotkeysProvider()
- HotkeysTarget()
- HotkeysTarget2()
- isHotkeysDialogShowing()
- isRefCallback()
- isRefObject()
- mergeRefs()
- OverlaysProvider()
- parseKeyCombo()
- Portal()
- PortalProvider()
- refHandler()
- removeNonHTMLProps()
- setHotkeysDialogProps()
- setRef()
- showContextMenu()
- showHotkeysDialog()
- useAsyncControllableValue()
- useHotkeys()
- useOverlayStack()
- usePrevious()
Classes
Interfaces
Enums
Type Aliases
- Alignment
- AnchorButtonProps
- Boundary
- ButtonProps
- ButtonSharedPropsAndAttributes
- CheckboxCardProps
- ControlledProps
- DefaultPopoverTargetHTMLProps
- DialogStepButtonProps
- DialogStepId
- Elevation
- HandleHtmlProps
- HandleInteractionKind
- HandleType
- HotkeyProps
- HotkeysContextInstance
- HTMLDivProps
- HTMLInputProps
- HTMLSelectIconName
- IconProps
- Intent
- MaybeElement
- MultistepDialogNavPosition
- NumberRange
- OverlayToasterCreateOptions
- PanelProps
- PopoverClickTargetHandlers
- PopoverHoverTargetHandlers
- PopoverInteractionKind
- PopoverPosition
- PopperCustomModifier
- PopperModifierOverrides
- Position
- RadioCardProps
- RadioProps
- ResizeEntry
- SectionElevation
- SegmentedControlIntent
- StrictModifierNames
- SwitchCardProps
- TabId
- TagInputAddMethod
- ToasterPosition
- ToastOptions
- TreeEventHandler
Namespaces
Classes
- ACTIVE
- ALERT
- ALERT_BODY
- ALERT_CONTENTS
- ALERT_FOOTER
- ALIGN_LEFT
- ALIGN_RIGHT
- alignmentClass()
- BLOCKQUOTE
- BREADCRUMB
- BREADCRUMB_CURRENT
- BREADCRUMBS
- BREADCRUMBS_COLLAPSED
- BUTTON
- BUTTON_GROUP
- BUTTON_SPINNER
- BUTTON_TEXT
- CALLOUT
- CALLOUT_HAS_BODY_CONTENT
- CALLOUT_ICON
- CARD
- CARD_LIST
- CARD_LIST_BORDERED
- CHECKBOX
- CHECKBOX_CONTROL_CARD
- CODE
- CODE_BLOCK
- COLLAPSE
- COLLAPSE_BODY
- COMPACT
- COMPOUND_TAG
- COMPOUND_TAG_LEFT
- COMPOUND_TAG_LEFT_CONTENT
- COMPOUND_TAG_RIGHT
- COMPOUND_TAG_RIGHT_CONTENT
- CONTEXT_MENU
- CONTEXT_MENU_BACKDROP
- CONTEXT_MENU_POPOVER
- CONTEXT_MENU_VIRTUAL_TARGET
- CONTROL
- CONTROL_CARD
- CONTROL_CARD_LABEL
- CONTROL_GROUP
- CONTROL_INDICATOR
- CONTROL_INDICATOR_CHILD
- DARK
- DIALOG
- DIALOG_BODY
- DIALOG_BODY_SCROLL_CONTAINER
- DIALOG_CLOSE_BUTTON
- DIALOG_CONTAINER
- DIALOG_FOOTER
- DIALOG_FOOTER_ACTIONS
- DIALOG_FOOTER_FIXED
- DIALOG_FOOTER_MAIN_SECTION
- DIALOG_HEADER
- DIALOG_STEP
- DIALOG_STEP_CONTAINER
- DIALOG_STEP_ICON
- DIALOG_STEP_TITLE
- DIALOG_STEP_VIEWED
- DISABLED
- DIVIDER
- DRAWER
- DRAWER_BODY
- DRAWER_FOOTER
- DRAWER_HEADER
- EDITABLE_TEXT
- EDITABLE_TEXT_CONTENT
- EDITABLE_TEXT_EDITING
- EDITABLE_TEXT_INPUT
- EDITABLE_TEXT_PLACEHOLDER
- ELEVATION_0
- ELEVATION_1
- ELEVATION_2
- ELEVATION_3
- ELEVATION_4
- elevationClass()
- END
- ENTITY_TITLE
- ENTITY_TITLE_ELLIPSIZE
- ENTITY_TITLE_HAS_SUBTITLE
- ENTITY_TITLE_ICON_CONTAINER
- ENTITY_TITLE_SUBTITLE
- ENTITY_TITLE_TAGS_CONTAINER
- ENTITY_TITLE_TEXT
- ENTITY_TITLE_TITLE
- ENTITY_TITLE_TITLE_AND_TAGS
- FILE_INPUT
- FILE_INPUT_HAS_SELECTION
- FILE_UPLOAD_INPUT
- FILE_UPLOAD_INPUT_CUSTOM_TEXT
- FILL
- FIXED
- FIXED_TOP
- FLEX_EXPANDER
- FOCUS_DISABLED
- FOCUS_STYLE_MANAGER_IGNORE
- FORM_CONTENT
- FORM_GROUP
- FORM_GROUP_SUB_LABEL
- FORM_HELPER_TEXT
- getClassNamespace()
- HEADING
- HOTKEY
- HOTKEY_COLUMN
- HOTKEY_DIALOG
- HOTKEY_LABEL
- HTML_SELECT
- HTML_TABLE
- HTML_TABLE_BORDERED
- HTML_TABLE_STRIPED
- ICON
- ICON_LARGE
- ICON_MUTED
- ICON_STANDARD
- iconClass()
- INLINE
- INPUT
- INPUT_ACTION
- INPUT_GHOST
- INPUT_GROUP
- INPUT_LEFT_CONTAINER
- INTENT_DANGER
- INTENT_PRIMARY
- INTENT_SUCCESS
- INTENT_WARNING
- intentClass()
- INTERACTIVE
- KEY
- KEY_COMBO
- LABEL
- LARGE
- LIST
- LIST_UNSTYLED
- LOADING
- MENU
- MENU_DIVIDER
- MENU_HEADER
- MENU_ITEM
- MENU_ITEM_ICON
- MENU_ITEM_IS_SELECTABLE
- MENU_ITEM_LABEL
- MENU_ITEM_SELECTED_ICON
- MENU_SUBMENU
- MENU_SUBMENU_ICON
- MINIMAL
- MODIFIER_KEY
- MONOSPACE_TEXT
- MULTILINE
- MULTISTEP_DIALOG
- MULTISTEP_DIALOG_LEFT_PANEL
- MULTISTEP_DIALOG_NAV_RIGHT
- MULTISTEP_DIALOG_NAV_TOP
- MULTISTEP_DIALOG_PANELS
- MULTISTEP_DIALOG_RIGHT_PANEL
- NAVBAR
- NAVBAR_DIVIDER
- NAVBAR_GROUP
- NAVBAR_HEADING
- NON_IDEAL_STATE
- NON_IDEAL_STATE_TEXT
- NON_IDEAL_STATE_VISUAL
- NUMERIC_INPUT
- OUTLINED
- OVERFLOW_LIST
- OVERFLOW_LIST_SPACER
- OVERLAY
- OVERLAY_BACKDROP
- OVERLAY_CONTAINER
- OVERLAY_CONTENT
- OVERLAY_END_FOCUS_TRAP
- OVERLAY_INLINE
- OVERLAY_OPEN
- OVERLAY_SCROLL_CONTAINER
- OVERLAY_START_FOCUS_TRAP
- PADDED
- PANEL_STACK
- PANEL_STACK_HEADER
- PANEL_STACK_HEADER_BACK
- PANEL_STACK_VIEW
- PANEL_STACK2
- PANEL_STACK2_HEADER
- PANEL_STACK2_HEADER_BACK
- PANEL_STACK2_VIEW
- POPOVER
- POPOVER_ARROW
- POPOVER_BACKDROP
- POPOVER_CAPTURING_DISMISS
- POPOVER_CONTENT
- POPOVER_CONTENT_PLACEMENT
- POPOVER_CONTENT_SIZING
- POPOVER_DISMISS
- POPOVER_DISMISS_OVERRIDE
- POPOVER_MATCH_TARGET_WIDTH
- POPOVER_OPEN
- POPOVER_POPPER_ESCAPED
- POPOVER_REFERENCE_HIDDEN
- POPOVER_TARGET
- POPOVER_TRANSITION_CONTAINER
- POPOVER_WRAPPER
- PORTAL
- POSITION_BOTTOM
- POSITION_LEFT
- POSITION_RIGHT
- POSITION_TOP
- positionClass()
- PROGRESS_BAR
- PROGRESS_METER
- PROGRESS_NO_ANIMATION
- PROGRESS_NO_STRIPES
- RADIO
- RADIO_CONTROL_CARD
- RADIO_GROUP
- READ_ONLY
- RESIZABLE_INPUT_SPAN
- ROUND
- RTL
- RUNNING_TEXT
- SECTION
- SECTION_CARD
- SECTION_COLLAPSED
- SECTION_HEADER
- SECTION_HEADER_DIVIDER
- SECTION_HEADER_LEFT
- SECTION_HEADER_RIGHT
- SECTION_HEADER_SUB_TITLE
- SECTION_HEADER_TABS
- SECTION_HEADER_TITLE
- SEGMENTED_CONTROL
- SELECT
- SELECTED
- SKELETON
- SLIDER
- SLIDER_AXIS
- SLIDER_HANDLE
- SLIDER_LABEL
- SLIDER_PROGRESS
- SLIDER_TRACK
- SMALL
- SPINNER
- SPINNER_ANIMATION
- SPINNER_HEAD
- SPINNER_NO_SPIN
- SPINNER_TRACK
- START
- SWITCH
- SWITCH_CONTROL_CARD
- SWITCH_INNER_TEXT
- TAB
- TAB_ICON
- TAB_INDICATOR
- TAB_INDICATOR_WRAPPER
- TAB_LIST
- TAB_PANEL
- TAB_TAG
- TABS
- TAG
- TAG_INPUT
- TAG_INPUT_ICON
- TAG_INPUT_VALUES
- TAG_REMOVE
- TEXT_AREA
- TEXT_AREA_AUTO_RESIZE
- TEXT_DISABLED
- TEXT_LARGE
- TEXT_MUTED
- TEXT_OVERFLOW_ELLIPSIS
- TEXT_SMALL
- TOAST
- TOAST_CONTAINER
- TOAST_MESSAGE
- TOOLTIP
- TOOLTIP_INDICATOR
- TREE
- TREE_NODE
- TREE_NODE_CARET
- TREE_NODE_CARET_CLOSED
- TREE_NODE_CARET_NONE
- TREE_NODE_CARET_OPEN
- TREE_NODE_CONTENT
- TREE_NODE_EXPANDED
- TREE_NODE_ICON
- TREE_NODE_LABEL
- TREE_NODE_LIST
- TREE_NODE_SECONDARY_LABEL
- TREE_NODE_SELECTED
- TREE_ROOT
- UI_TEXT
- VERTICAL
Utils
- approxEqual()
- arrayLengthCompare()
- arraysEqual()
- clamp()
- clickElementOnKeyPress()
- countDecimalPlaces()
- deepCompareKeys()
- elementIsOrContains()
- elementIsTextInput()
- ensureElement()
- Extends
- getActiveElement()
- getArrowKeyDirection()
- getDeepUnequalKeyValues()
- getFocusableElements()
- getRef()
- isArrowKey()
- isDarkTheme()
- isElementOfType()
- isEmptyString()
- isFunction()
- isKeyboardClick()
- isNodeEnv()
- isReact18OrHigher()
- isReactElement()
- isReactNodeEmpty()
- KeyAllowlist
- KeyDenylist
- setRef()
- shallowCompareKeys()
- throttle()
- throttleEvent()
- throttleReactEventCallback()
- uniqueId()
Variables
variable Alert
const Alert: React.FC<AlertProps>;
Alert component.
See Also
https://blueprintjs.com/docs/#core/components/alert
variable Alignment
const Alignment: { CENTER: 'center'; LEFT: 'left'; RIGHT: 'right' };
Alignment along the horizontal axis.
variable AnchorButton
const AnchorButton: React.FC<any>;
AnchorButton component.
See Also
https://blueprintjs.com/docs/#core/components/button
variable Blockquote
const Blockquote: React.FC<any>;
variable Boundary
const Boundary: { START: 'start'; END: 'end' };
Boundary of a one-dimensional interval.
variable Breadcrumb
const Breadcrumb: React.FC<BreadcrumbProps>;
Breadcrumb component.
See Also
https://blueprintjs.com/docs/#core/components/breadcrumbs
variable Button
const Button: React.FC<any>;
Button component.
See Also
https://blueprintjs.com/docs/#core/components/button
variable ButtonGroup
const ButtonGroup: React.FC<ButtonGroupProps>;
Button group component.
See Also
https://blueprintjs.com/docs/#core/components/button-group
variable Callout
const Callout: React.FC<CalloutProps>;
Callout component.
See Also
https://blueprintjs.com/docs/#core/components/callout
variable Card
const Card: React.FC<CardProps>;
Card component.
See Also
https://blueprintjs.com/docs/#core/components/card
variable CardList
const CardList: React.FC<CardListProps>;
variable Checkbox
const Checkbox: React.FC<CheckboxProps>;
Checkbox component.
See Also
https://blueprintjs.com/docs/#core/components/checkbox
variable CheckboxCard
const CheckboxCard: React.FC<CheckboxCardProps>;
Checkbox Card component.
See Also
https://blueprintjs.com/docs/#core/components/control-card.checkbox-card
variable Code
const Code: React.FC<any>;
variable CompoundTag
const CompoundTag: React.FC<CompoundTagProps>;
Compound tag component.
See Also
https://blueprintjs.com/docs/#core/components/compound-tag
variable ContextMenu
const ContextMenu: React.FC<ContextMenuProps>;
Context menu component.
See Also
https://blueprintjs.com/docs/#core/components/context-menu
variable ContextMenuPopover
const ContextMenuPopover: React.NamedExoticComponent<ContextMenuPopoverProps>;
A floating popover which is positioned at a given target offset inside its parent element container. Used to display context menus. Note that this behaves differently from other popover components like Popover and Tooltip, which wrap their children with interaction handlers -- if you're looking for the whole interaction package, use ContextMenu instead.
See Also
https://blueprintjs.com/docs/#core/components/context-menu-popover
variable ControlGroup
const ControlGroup: React.FC<ControlGroupProps>;
Control group component.
See Also
https://blueprintjs.com/docs/#core/components/control-group
variable DialogBody
const DialogBody: React.FC<DialogBodyProps>;
Dialog body component.
See Also
https://blueprintjs.com/docs/#core/components/dialog.dialog-body-props
variable DialogFooter
const DialogFooter: React.FC<DialogFooterProps>;
Dialog footer component.
See Also
https://blueprintjs.com/docs/#core/components/dialog.dialog-footer-props
variable DialogStep
const DialogStep: React.FC<DialogStepProps>;
Dialog step component.
See Also
https://blueprintjs.com/docs/#core/components/dialog.dialogstep
variable DISPLAYNAME_PREFIX
const DISPLAYNAME_PREFIX: string;
variable Divider
const Divider: React.FC<DividerProps>;
Divider component.
See Also
https://blueprintjs.com/docs/#core/components/divider
variable Elevation
const Elevation: { ZERO: 0; ONE: 1; TWO: 2; THREE: 3; FOUR: 4 };
variable EntityTitle
const EntityTitle: React.FC<EntityTitleProps>;
EntityTitle component.
See Also
https://blueprintjs.com/docs/#core/components/entity-title
variable Expander
const Expander: React.FC<{}>;
Deprecated
use
TabsExpander
instead
variable FileInput
const FileInput: { (props: FileInputProps): React.JSX.Element; displayName: string };
File input component.
See Also
https://blueprintjs.com/docs/#core/components/file-input
variable FocusStyleManager
const FocusStyleManager: { alwaysShowFocus: () => boolean | void; isActive: () => boolean; onlyShowFocusOnTabs: () => boolean | void;};
variable FormGroup
const FormGroup: React.FC<FormGroupProps>;
Form group component.
See Also
https://blueprintjs.com/docs/#core/components/form-group
variable H1
const H1: React.FC<any>;
variable H2
const H2: React.FC<any>;
variable H3
const H3: React.FC<any>;
variable H4
const H4: React.FC<any>;
variable H5
const H5: React.FC<any>;
variable H6
const H6: React.FC<any>;
variable HandleInteractionKind
const HandleInteractionKind: { LOCK: 'lock'; PUSH: 'push'; NONE: 'none' };
variable HandleType
const HandleType: { FULL: 'full'; START: 'start'; END: 'end' };
variable HotkeysContext
const HotkeysContext: React.Context<HotkeysContextInstance>;
A React context used to register and deregister hotkeys as components are mounted and unmounted in an application. Users should take care to make sure that only _one_ of these is instantiated and used within an application, especially if using global hotkeys.
You will likely not be using this HotkeysContext directly, except in cases where you need to get a direct handle on an existing context instance for advanced use cases involving nested HotkeysProviders.
For more information, see the [HotkeysProvider documentation](https://blueprintjs.com/docs/#core/context/hotkeys-provider).
variable HotkeysDialog2
const HotkeysDialog2: React.FC<HotkeysDialogProps>;
variable HTMLSelect
const HTMLSelect: React.FC<HTMLSelectProps>;
HTML select component
See Also
https://blueprintjs.com/docs/#core/components/html-select
variable HTMLTable
const HTMLTable: React.FC<HTMLTableProps>;
HTML table component.
See Also
https://blueprintjs.com/docs/#core/components/html-table
variable Icon
const Icon: IconComponent;
Icon component.
See Also
https://blueprintjs.com/docs/#core/components/icon
variable Intent
const Intent: { NONE: 'none'; PRIMARY: 'primary'; SUCCESS: 'success'; WARNING: 'warning'; DANGER: 'danger';};
The four basic intents.
variable KeyComboTag
const KeyComboTag: React.ComponentType<KeyComboTagProps>;
variable Keys
const Keys: { BACKSPACE: 8; TAB: 9; ENTER: 13; SHIFT: 16; ESCAPE: 27; SPACE: 32; ARROW_LEFT: 37; ARROW_UP: 38; ARROW_RIGHT: 39; ARROW_DOWN: 40; DELETE: 46;};
Deprecated
use named keys instead of key codes
variable Label
const Label: React.FC<any>;
variable Menu
const Menu: React.FC<MenuProps>;
Menu component.
See Also
https://blueprintjs.com/docs/#core/components/menu
variable MenuDivider
const MenuDivider: React.FC<MenuDividerProps>;
Menu divider component.
See Also
https://blueprintjs.com/docs/#core/components/menu.menu-divider
variable MenuItem
const MenuItem: React.FC<MenuItemProps>;
Menu item component.
See Also
https://blueprintjs.com/docs/#core/components/menu.menu-item
variable Navbar
const Navbar: any;
Navbar component.
See Also
https://blueprintjs.com/docs/#core/components/navbar
variable NavbarDivider
const NavbarDivider: React.FC<NavbarDividerProps>;
variable NavbarGroup
const NavbarGroup: React.FC<NavbarGroupProps>;
variable NavbarHeading
const NavbarHeading: React.FC<NavbarHeadingProps>;
variable OL
const OL: React.FC<any>;
variable Overlay2
const Overlay2: React.ForwardRefExoticComponent<any>;
Overlay2 component.
See Also
https://blueprintjs.com/docs/#core/components/overlay2
variable OverlaysContext
const OverlaysContext: React.Context<OverlaysContextState>;
A React context used to interact with the overlay stack in an application. Users should take care to make sure that only _one_ of these is instantiated and used within an application.
You will likely not be using this OverlaysContext directly, it's mostly used internally by the Overlay2 component.
For more information, see the [OverlaysProvider documentation](https://blueprintjs.com/docs/#core/context/overlays-provider).
variable PanelStack2
const PanelStack2: PanelStack2Component;
Panel stack (v2) component.
See Also
https://blueprintjs.com/docs/#core/components/panel-stack2 T type union of all possible panels in this stack
variable PopoverInteractionKind
const PopoverInteractionKind: { CLICK: 'click'; CLICK_TARGET_ONLY: 'click-target'; HOVER: 'hover'; HOVER_TARGET_ONLY: 'hover-target';};
variable PopoverPosition
const PopoverPosition: { AUTO: 'auto'; AUTO_END: 'auto-end'; AUTO_START: 'auto-start'; BOTTOM: 'bottom'; BOTTOM_LEFT: 'bottom-left'; BOTTOM_RIGHT: 'bottom-right'; LEFT: 'left'; LEFT_BOTTOM: 'left-bottom'; LEFT_TOP: 'left-top'; RIGHT: 'right'; RIGHT_BOTTOM: 'right-bottom'; RIGHT_TOP: 'right-top'; TOP: 'top'; TOP_LEFT: 'top-left'; TOP_RIGHT: 'top-right';};
variable PortalContext
const PortalContext: React.Context<PortalContextOptions>;
A React context to set options for all portals in a given subtree. Do not use this PortalContext directly, instead use PortalProvider to set the options.
variable Position
const Position: { BOTTOM: 'bottom'; BOTTOM_LEFT: 'bottom-left'; BOTTOM_RIGHT: 'bottom-right'; LEFT: 'left'; LEFT_BOTTOM: 'left-bottom'; LEFT_TOP: 'left-top'; RIGHT: 'right'; RIGHT_BOTTOM: 'right-bottom'; RIGHT_TOP: 'right-top'; TOP: 'top'; TOP_LEFT: 'top-left'; TOP_RIGHT: 'top-right';};
variable Pre
const Pre: React.FC<any>;
variable ProgressBar
const ProgressBar: React.FC<ProgressBarProps>;
Progress bar component.
See Also
https://blueprintjs.com/docs/#core/components/progress-bar
variable Radio
const Radio: React.FC<ControlProps>;
Radio component.
See Also
https://blueprintjs.com/docs/#core/components/radio
variable RadioCard
const RadioCard: React.FC<RadioCardProps>;
Radio Card component.
See Also
https://blueprintjs.com/docs/#core/components/control-card.radio-card
variable RadioGroup
const RadioGroup: React.FC<RadioGroupProps>;
Radio group component.
See Also
https://blueprintjs.com/docs/#core/components/radio.radiogroup
variable Section
const Section: React.FC<SectionProps>;
Section component.
See Also
https://blueprintjs.com/docs/#core/components/section
variable SectionCard
const SectionCard: React.FC<SectionCardProps>;
Section card component.
See Also
https://blueprintjs.com/docs/#core/components/section.section-card
variable SegmentedControl
const SegmentedControl: React.FC<SegmentedControlProps>;
Segmented control component.
See Also
https://blueprintjs.com/docs/#core/components/segmented-control
variable Spinner
const Spinner: React.FC<SpinnerProps<HTMLElement>>;
Spinner component.
See Also
https://blueprintjs.com/docs/#core/components/spinner
variable Switch
const Switch: React.FC<SwitchProps>;
Switch component.
See Also
https://blueprintjs.com/docs/#core/components/switch
variable SwitchCard
const SwitchCard: React.FC<SwitchCardProps>;
Switch Card component.
See Also
https://blueprintjs.com/docs/#core/components/control-card.switch-card
variable TabsExpander
const TabsExpander: React.FC;
Component that may be inserted between any two children of
<Tabs>
to right-align all subsequent children.
variable Tag
const Tag: React.FC<TagProps>;
Tag component.
See Also
https://blueprintjs.com/docs/#core/components/tag
variable Text
const Text: React.FC<TextProps>;
Text component.
See Also
https://blueprintjs.com/docs/#core/components/text
variable Toast2
const Toast2: React.ForwardRefExoticComponent<any>;
Toast2 component.
Compared to the deprecated
Toast
component, this is a function component which forwards DOM refs and is thus compatible withOverlay2
.See Also
https://blueprintjs.com/docs/#core/components/toast2
variable Toaster
const Toaster: { create: typeof deprecatedToasterCreate };
variable ToasterInstance
const ToasterInstance: { create: typeof deprecatedToasterCreate };
variable UL
const UL: React.FC<any>;
variable useIsomorphicLayoutEffect
const useIsomorphicLayoutEffect: any;
Returns
the appropriate React layout effect hook for the current environment (server or client).
Functions
function BlueprintProvider
BlueprintProvider: ({ children, hotkeysProviderValue, ...props}: BlueprintProviderProps) => React.JSX.Element;
Composite Blueprint context provider which enables & manages various global behaviors of Blueprint applications.
See Also
https://blueprintjs.com/docs/#core/context/blueprint-provider
function comboMatches
comboMatches: (a: KeyCombo, b: KeyCombo) => boolean;
function ContextMenuTargetLegacy
ContextMenuTargetLegacy: < T extends Constructor<ContextMenuTargetLegacyComponent>>( WrappedComponent: T) => { new (...args: any[]): { render(): | React.ReactElement<any, string | React.JSXElementConstructor<any>> | null | undefined; renderContextMenu: ( e: React.MouseEvent<HTMLElement, MouseEvent> ) => React.JSX.Element | undefined; onContextMenuClose?: (() => void) | undefined; context: unknown; setState<K extends never>( state: | {} | (( prevState: Readonly<{}>, props: Readonly<{}> ) => {} | Pick<{}, K>) | Pick<{}, K>, callback?: (() => void) | undefined ): void; forceUpdate(callback?: (() => void) | undefined): void; readonly props: Readonly<{}>; state: Readonly<{}>; refs: { [key: string]: React.ReactInstance }; componentDidMount?(): void; shouldComponentUpdate?( nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any ): boolean; componentWillUnmount?(): void; componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void; getSnapshotBeforeUpdate?( prevProps: Readonly<{}>, prevState: Readonly<{}> ): any; componentDidUpdate?( prevProps: Readonly<{}>, prevState: Readonly<{}>, snapshot?: any ): void; componentWillMount?(): void; UNSAFE_componentWillMount?(): void; componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void; UNSAFE_componentWillReceiveProps?( nextProps: Readonly<{}>, nextContext: any ): void; componentWillUpdate?( nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any ): void; UNSAFE_componentWillUpdate?( nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any ): void; }; displayName: string;} & T;
ContextMenuTarget decorator.
See Also
https://blueprintjs.com/docs/#core/components/context-menu.decorator-usage
Deprecated
use ContextMenu2
function getKeyCombo
getKeyCombo: (e: KeyboardEvent) => KeyCombo;
Determines the key combo object from the given keyboard event. A key combo includes zero or more modifiers (represented by a bitmask) and one physical key. For most keys, we prefer dealing with the
code
property of the event, since this is not altered by keyboard layout or the state of modifier keys. Fall back to using thekey
property.See Also
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code
function getKeyComboString
getKeyComboString: (e: KeyboardEvent) => string;
Interprets a keyboard event as a valid KeyComboTag
combo
prop string value.Note that this function is only used in the docs example and tests; it is not used by
useHotkeys()
or any Blueprint consumers that we are currently aware of.
function getRef
getRef: <T>(ref: T | React.RefObject<T> | null) => T | null;
function hideContextMenu
hideContextMenu: (options?: DOMMountOptions<ContextMenuPopoverProps>) => void;
Hide a context menu that was created using
showContextMenu()
.Note that this API relies on global state in the @blueprintjs/core package, and should be used with caution.
See Also
https://blueprintjs.com/docs/#core/components/context-menu-popover.imperative-api
function hideHotkeysDialog
hideHotkeysDialog: () => void;
Deprecated
use HotkeysProvider
function hideHotkeysDialogAfterDelay
hideHotkeysDialogAfterDelay: () => void;
Use this function instead of
hideHotkeysDialog
if you need to ensure that all hotkey listeners have time to execute with the dialog in a consistent open state. This can avoid flickering the dialog between open and closed states as successive listeners fire.Deprecated
use HotkeysProvider
function HotkeysProvider
HotkeysProvider: ({ children, dialogProps, renderDialog, value,}: React.PropsWithChildren<HotkeysProviderProps>) => React.JSX.Element;
Hotkeys context provider, necessary for the
useHotkeys
hook.See Also
https://blueprintjs.com/docs/#core/context/hotkeys-provider
function HotkeysTarget
HotkeysTarget: <T extends Constructor<HotkeysTargetLegacyComponent>>( WrappedComponent: T) => { new (...args: any[]): { globalHotkeysEvents: HotkeysEvents; localHotkeysEvents: HotkeysEvents; componentDidMount(): void; componentWillUnmount(): void; render(): React.JSX.Element; renderHotkeys: () => React.ReactElement< HotkeysProps, string | React.JSXElementConstructor<any> >; context: unknown; setState<K extends never>( state: | {} | (( prevState: Readonly<{}>, props: Readonly<{}> ) => {} | Pick<{}, K>) | Pick<{}, K>, callback?: (() => void) | undefined ): void; forceUpdate(callback?: (() => void) | undefined): void; readonly props: Readonly<{}>; state: Readonly<{}>; refs: { [key: string]: React.ReactInstance }; shouldComponentUpdate?( nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any ): boolean; componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void; getSnapshotBeforeUpdate?( prevProps: Readonly<{}>, prevState: Readonly<{}> ): any; componentDidUpdate?( prevProps: Readonly<{}>, prevState: Readonly<{}>, snapshot?: any ): void; componentWillMount?(): void; UNSAFE_componentWillMount?(): void; componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void; UNSAFE_componentWillReceiveProps?( nextProps: Readonly<{}>, nextContext: any ): void; componentWillUpdate?( nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any ): void; UNSAFE_componentWillUpdate?( nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any ): void; }; displayName: string;} & T;
Deprecated
use
useHotkeys
hook or<HotkeysTarget2>
component
function HotkeysTarget2
HotkeysTarget2: ({ children, hotkeys, options,}: HotkeysTarget2Props) => React.JSX.Element;
Utility component which allows consumers to use the new
useHotkeys
hook inside React component classes. The implementation simply passes through to the hook.
function isHotkeysDialogShowing
isHotkeysDialogShowing: () => boolean;
Deprecated
use HotkeysProvider
function isRefCallback
isRefCallback: <T>( value: React.Ref<T> | undefined) => value is React.RefCallback<T>;
function isRefObject
isRefObject: <T>(value: React.Ref<T> | undefined) => value is React.RefObject<T>;
function mergeRefs
mergeRefs: <T>(...refs: Array<React.Ref<T> | undefined>) => React.RefCallback<T>;
Utility for merging refs into one singular callback ref. If using in a functional component, would recomend using
useMemo
to preserve function identity.
function OverlaysProvider
OverlaysProvider: ({ children }: OverlaysProviderProps) => React.JSX.Element;
Overlays context provider, necessary for the
useOverlayStack
hook.See Also
https://blueprintjs.com/docs/#core/context/overlays-provider
function parseKeyCombo
parseKeyCombo: (combo: string) => KeyCombo;
Converts a key combo string into a key combo object. Key combos include zero or more modifier keys, such as
shift
oralt
, and exactly one action key, such asA
,enter
, orleft
.For action keys that require a shift, e.g.
@
or|
, we inlude the necessaryshift
modifier and automatically convert the action key to the unshifted version. For example,@
is equivalent toshift+2
.
function Portal
Portal: typeof Portal;
Portal component.
This component detaches its contents and re-attaches them to document.body. Use it when you need to circumvent DOM z-stacking (for dialogs, popovers, etc.). Any class names passed to this element will be propagated to the new container element on document.body.
Portal supports both the newer React context API and the legacy context API. Support for the legacy context API will be removed in Blueprint v6.0.
See Also
https://blueprintjs.com/docs/#core/components/portal
function PortalProvider
PortalProvider: ({ children, portalClassName, portalContainer,}: React.PropsWithChildren<PortalContextOptions>) => React.JSX.Element;
Portal context provider.
See Also
https://blueprintjs.com/docs/#core/context/portal-provider
function refHandler
refHandler: <T extends HTMLElement, K extends string>( refTargetParent: { [k in K]: T }, refTargetKey: K, refProp?: React.Ref<T> | undefined) => React.RefCallback<T>;
Creates a ref handler which assigns the ref returned by React for a mounted component to a field on the target object. The target object is usually a component class.
If provided, it will also update the given
refProp
with the value of the ref.
function removeNonHTMLProps
removeNonHTMLProps: ( props: { [key: string]: any }, invalidProps?: string[], shouldMerge?: boolean) => { [key: string]: any };
Typically applied to HTMLElements to filter out disallowed props. When applied to a Component, can filter props from being passed down to the children. Can also filter by a combined list of supplied prop keys and the denylist (only appropriate for HTMLElements).
Parameter props
The original props object to filter down.
Parameter invalidProps
If supplied, overwrites the default denylist.
Parameter shouldMerge
If true, will merge supplied invalidProps and denylist together.
function setHotkeysDialogProps
setHotkeysDialogProps: (props: Partial<HotkeysDialogProps>) => void;
Deprecated
use HotkeysProvider
function setRef
setRef: <T>(refTarget: React.Ref<T> | undefined, ref: T | null) => void;
Assign the given ref to a target, either a React ref object or a callback which takes the ref as its first argument.
function showContextMenu
showContextMenu: ( props: Omit<ContextMenuPopoverProps, 'isOpen'>, options?: DOMMountOptions<ContextMenuPopoverProps>) => void;
Show a context menu at a particular offset from the top-left corner of the document. The menu will appear below-right of this point and will flip to below-left if there is not enough room onscreen. Additional props like
onClose
,isDarkTheme
, etc. can be forwarded to the<ContextMenuPopover>
.Context menus created with this API will automatically close when a user clicks outside the popover. You may force them to close by using
hideContextMenu()
.Note that this API relies on global state in the @blueprintjs/core package, and should be used with caution, especially if your build system allows multiple copies of Blueprint libraries to be bundled into an application at once.
Alternative APIs to consider which do not have the limitations of global state: -
<ContextMenu>
-<ContextMenuPopover>
See Also
https://blueprintjs.com/docs/#core/components/context-menu-popover.imperative-api
function showHotkeysDialog
showHotkeysDialog: (hotkeys: HotkeyProps[]) => void;
Deprecated
use HotkeysProvider
function useAsyncControllableValue
useAsyncControllableValue: <E extends HTMLInputElement | HTMLTextAreaElement>( props: UseAsyncControllableValueProps<E>) => { onChange: React.ChangeEventHandler<E>; onCompositionEnd: React.CompositionEventHandler<E>; onCompositionStart: React.CompositionEventHandler<E>; value: string | number | readonly string[] | undefined;};
A hook to workaround the following [React bug](https://github.com/facebook/react/issues/3926). This bug is reproduced when an input receives CompositionEvents (for example, through IME composition) and has its value prop updated asychronously. This might happen if a component chooses to do async validation of a value returned by the input's
onChange
callback.
function useHotkeys
useHotkeys: ( keys: readonly HotkeyConfig[], options?: UseHotkeysOptions) => UseHotkeysReturnValue;
React hook to register global and local hotkeys for a component.
Parameter keys
list of hotkeys to configure
Parameter options
hook options
See Also
https://blueprintjs.com/docs/#core/hooks/use-hotkeys
function useOverlayStack
useOverlayStack: () => UseOverlayStackReturnValue;
React hook to interact with the global overlay stack.
See Also
https://blueprintjs.com/docs/#core/hooks/use-overlay-stack
function usePrevious
usePrevious: <T>(value: T) => T | undefined;
React hook which tracks the previous state of a given value.
Classes
class AbstractComponent
abstract class AbstractComponent<P, S = {}, SS = {}> extends React.Component< P, S, SS> {}
An abstract component that Blueprint components can extend in order to add some common functionality like runtime props validation.
constructor
constructor(props: {});
property cancelAnimationFrames
cancelAnimationFrames: () => void;
Clear all known animation frame requests.
property clearTimeouts
clearTimeouts: () => void;
Clear all known timeouts.
property componentWillMount
componentWillMount: never;
property componentWillReceiveProps
componentWillReceiveProps: never;
property componentWillUpdate
componentWillUpdate: never;
property displayName
protected displayName: never;
Component displayName should be
public static
. This property exists to prevent incorrect usage.
property getDerivedStateFromProps
getDerivedStateFromProps: never;
method componentDidUpdate
componentDidUpdate: (_prevProps: P, _prevState: S, _snapshot?: SS) => void;
method componentWillUnmount
componentWillUnmount: () => void;
method requestAnimationFrame
requestAnimationFrame: (callback: () => void) => () => void;
Request an animation frame and remember its ID. All pending requests will be canceled when component unmounts.
Returns
a "cancel" function that will cancel the request when invoked.
method setTimeout
setTimeout: (callback: () => void, timeout?: number) => () => void;
Set a timeout and remember its ID. All stored timeouts will be cleared when component unmounts.
Returns
a "cancel" function that will clear timeout when invoked.
method validateProps
protected validateProps: (_props: P) => void;
Ensures that the props specified for a component are valid. Implementations should check that props are valid and usually throw an Error if they are not. Implementations should not duplicate checks that the type system already guarantees.
This method should be used instead of React's [propTypes](https://facebook.github.io/react/docs/reusable-components.html#prop-validation) feature. Like propTypes, these runtime checks run only in development mode.
class AbstractComponent2
abstract class AbstractComponent<P, S = {}, SS = {}> extends React.Component< P, S, SS> {}
An abstract component that Blueprint components can extend in order to add some common functionality like runtime props validation.
constructor
constructor(props: {});
property cancelAnimationFrames
cancelAnimationFrames: () => void;
Clear all known animation frame requests.
property clearTimeouts
clearTimeouts: () => void;
Clear all known timeouts.
property componentWillMount
componentWillMount: never;
property componentWillReceiveProps
componentWillReceiveProps: never;
property componentWillUpdate
componentWillUpdate: never;
property displayName
protected displayName: never;
Component displayName should be
public static
. This property exists to prevent incorrect usage.
property getDerivedStateFromProps
getDerivedStateFromProps: never;
method componentDidUpdate
componentDidUpdate: (_prevProps: P, _prevState: S, _snapshot?: SS) => void;
method componentWillUnmount
componentWillUnmount: () => void;
method requestAnimationFrame
requestAnimationFrame: (callback: () => void) => () => void;
Request an animation frame and remember its ID. All pending requests will be canceled when component unmounts.
Returns
a "cancel" function that will cancel the request when invoked.
method setTimeout
setTimeout: (callback: () => void, timeout?: number) => () => void;
Set a timeout and remember its ID. All stored timeouts will be cleared when component unmounts.
Returns
a "cancel" function that will clear timeout when invoked.
method validateProps
protected validateProps: (_props: P) => void;
Ensures that the props specified for a component are valid. Implementations should check that props are valid and usually throw an Error if they are not. Implementations should not duplicate checks that the type system already guarantees.
This method should be used instead of React's [propTypes](https://facebook.github.io/react/docs/reusable-components.html#prop-validation) feature. Like propTypes, these runtime checks run only in development mode.
class AbstractPureComponent
abstract class AbstractPureComponent<P, S = {}, SS = {}> extends React.PureComponent< P, S, SS> {}
An abstract component that Blueprint components can extend in order to add some common functionality like runtime props validation.
constructor
constructor(props: {});
property cancelAnimationFrames
cancelAnimationFrames: () => void;
Clear all known animation frame requests.
property clearTimeouts
clearTimeouts: () => void;
Clear all known timeouts.
property componentWillMount
componentWillMount: never;
property componentWillReceiveProps
componentWillReceiveProps: never;
property componentWillUpdate
componentWillUpdate: never;
property displayName
protected displayName: never;
Component displayName should be
public static
. This property exists to prevent incorrect usage.
property getDerivedStateFromProps
getDerivedStateFromProps: never;
method componentDidUpdate
componentDidUpdate: (_prevProps: P, _prevState: S, _snapshot?: SS) => void;
method componentWillUnmount
componentWillUnmount: () => void;
method requestAnimationFrame
requestAnimationFrame: (callback: () => void) => () => void;
Request an animation frame and remember its ID. All pending requests will be canceled when component unmounts.
Returns
a "cancel" function that will cancel the request when invoked.
method setTimeout
setTimeout: (callback: () => void, timeout?: number) => () => void;
Set a timeout and remember its ID. All pending timeouts will be cleared when component unmounts.
Returns
a "cancel" function that will clear timeout when invoked.
method validateProps
protected validateProps: (_props: P) => void;
Ensures that the props specified for a component are valid. Implementations should check that props are valid and usually throw an Error if they are not. Implementations should not duplicate checks that the type system already guarantees.
This method should be used instead of React's [propTypes](https://facebook.github.io/react/docs/reusable-components.html#prop-validation) feature. Like propTypes, these runtime checks run only in development mode.
class AbstractPureComponent2
abstract class AbstractPureComponent<P, S = {}, SS = {}> extends React.PureComponent< P, S, SS> {}
An abstract component that Blueprint components can extend in order to add some common functionality like runtime props validation.
constructor
constructor(props: {});
property cancelAnimationFrames
cancelAnimationFrames: () => void;
Clear all known animation frame requests.
property clearTimeouts
clearTimeouts: () => void;
Clear all known timeouts.
property componentWillMount
componentWillMount: never;
property componentWillReceiveProps
componentWillReceiveProps: never;
property componentWillUpdate
componentWillUpdate: never;
property displayName
protected displayName: never;
Component displayName should be
public static
. This property exists to prevent incorrect usage.
property getDerivedStateFromProps
getDerivedStateFromProps: never;
method componentDidUpdate
componentDidUpdate: (_prevProps: P, _prevState: S, _snapshot?: SS) => void;
method componentWillUnmount
componentWillUnmount: () => void;
method requestAnimationFrame
requestAnimationFrame: (callback: () => void) => () => void;
Request an animation frame and remember its ID. All pending requests will be canceled when component unmounts.
Returns
a "cancel" function that will cancel the request when invoked.
method setTimeout
setTimeout: (callback: () => void, timeout?: number) => () => void;
Set a timeout and remember its ID. All pending timeouts will be cleared when component unmounts.
Returns
a "cancel" function that will clear timeout when invoked.
method validateProps
protected validateProps: (_props: P) => void;
Ensures that the props specified for a component are valid. Implementations should check that props are valid and usually throw an Error if they are not. Implementations should not duplicate checks that the type system already guarantees.
This method should be used instead of React's [propTypes](https://facebook.github.io/react/docs/reusable-components.html#prop-validation) feature. Like propTypes, these runtime checks run only in development mode.
class Breadcrumbs
class Breadcrumbs extends AbstractPureComponent<BreadcrumbsProps> {}
Breadcrumbs component.
See Also
https://blueprintjs.com/docs/#core/components/breadcrumbs
property defaultProps
static defaultProps: Partial<BreadcrumbsProps>;
method render
render: () => React.JSX.Element;
class Collapse
class Collapse extends AbstractPureComponent<CollapseProps, CollapseState> {}
Collapse component.
See Also
https://blueprintjs.com/docs/#core/components/collapse
property defaultProps
static defaultProps: Partial<CollapseProps>;
property displayName
static displayName: string;
property state
state: CollapseState;
method componentDidMount
componentDidMount: () => void;
method componentDidUpdate
componentDidUpdate: () => void;
method getDerivedStateFromProps
static getDerivedStateFromProps: ( props: CollapseProps, state: CollapseState) => | { animationState: AnimationStates; height?: undefined } | { animationState: AnimationStates; height: string } | null;
method render
render: () => React.ReactElement<any, any>;
class Dialog
class Dialog extends AbstractPureComponent<DialogProps> {}
Dialog component.
See Also
https://blueprintjs.com/docs/#core/components/dialog
constructor
constructor(props: DialogProps);
property defaultProps
static defaultProps: DialogProps;
property displayName
static displayName: string;
method render
render: () => React.JSX.Element;
method validateProps
protected validateProps: (props: DialogProps) => void;
class Drawer
class Drawer extends AbstractPureComponent<DrawerProps> {}
property defaultProps
static defaultProps: DrawerProps;
property displayName
static displayName: string;
method render
render: () => React.JSX.Element;
method validateProps
protected validateProps: (props: DrawerProps) => void;
class EditableText
class EditableText extends AbstractPureComponent< EditableTextProps, EditableTextState> {}
EditableText component.
See Also
https://blueprintjs.com/docs/#core/components/editable-text
constructor
constructor(props: EditableTextProps);
property cancelEditing
cancelEditing: () => void;
property defaultProps
static defaultProps: EditableTextProps;
property displayName
static displayName: string;
property toggleEditing
toggleEditing: () => void;
method componentDidMount
componentDidMount: () => void;
method componentDidUpdate
componentDidUpdate: ( prevProps: EditableTextProps, prevState: EditableTextState) => void;
method render
render: () => React.JSX.Element;
class Hotkey
class Hotkey extends AbstractPureComponent<HotkeyProps> {}
Hotkey component used to display a hotkey in the HotkeysDialog. Should not be used by consumers directly.
property defaultProps
static defaultProps: { allowInInput: boolean; disabled: boolean; global: boolean; preventDefault: boolean; stopPropagation: boolean;};
property displayName
static displayName: string;
method render
render: () => React.JSX.Element;
method validateProps
protected validateProps: (props: HotkeyProps) => void;
class Hotkeys
class Hotkeys extends AbstractPureComponent<HotkeysProps> {}
Hotkeys component used to display a list of hotkeys in the HotkeysDialog. Should not be used by consumers directly.
property defaultProps
static defaultProps: { tabIndex: number };
property displayName
static displayName: string;
method render
render: () => React.JSX.Element | null;
method validateProps
protected validateProps: ( props: HotkeysProps & { children: React.ReactNode }) => void;
class InputGroup
class InputGroup extends AbstractPureComponent<InputGroupProps, InputGroupState> {}
Input group component.
See Also
https://blueprintjs.com/docs/#core/components/input-group
property displayName
static displayName: string;
property state
state: InputGroupState;
method componentDidMount
componentDidMount: () => void;
method componentDidUpdate
componentDidUpdate: (prevProps: InputGroupProps) => void;
method render
render: () => React.ReactElement<{ className: string }, any>;
method validateProps
protected validateProps: (props: InputGroupProps) => void;
class MultiSlider
class MultiSlider extends AbstractPureComponent<MultiSliderProps, SliderState> {}
Multi slider component.
See Also
https://blueprintjs.com/docs/#core/components/sliders.multi-slider
property defaultProps
static defaultProps: MultiSliderProps;
property defaultSliderProps
static defaultSliderProps: SliderBaseProps;
property displayName
static displayName: string;
property Handle
static Handle: React.FC<HandleProps>;
property state
state: SliderState;
method componentDidMount
componentDidMount: () => void;
method componentDidUpdate
componentDidUpdate: ( prevProps: MultiSliderProps, prevState: SliderState) => void;
method getDerivedStateFromProps
static getDerivedStateFromProps: (props: MultiSliderProps) => { labelPrecision: number;};
method getSnapshotBeforeUpdate
getSnapshotBeforeUpdate: (prevProps: MultiSliderProps) => null;
method render
render: () => React.JSX.Element;
method validateProps
protected validateProps: ( props: React.PropsWithChildren<MultiSliderProps>) => void;
class MultistepDialog
class MultistepDialog extends AbstractPureComponent< MultistepDialogProps, MultistepDialogState> {}
Multi-step dialog component.
See Also
https://blueprintjs.com/docs/#core/components/dialog.multistep-dialog
property defaultProps
static defaultProps: Partial<MultistepDialogProps>;
property displayName
static displayName: string;
property state
state: MultistepDialogState;
method componentDidUpdate
componentDidUpdate: (prevProps: MultistepDialogProps) => void;
method render
render: () => React.JSX.Element;
class NonIdealState
class NonIdealState extends AbstractPureComponent<NonIdealStateProps> {}
Non-ideal state component.
See Also
https://blueprintjs.com/docs/#core/components/non-ideal-state
property defaultProps
static defaultProps: Partial<NonIdealStateProps>;
property displayName
static displayName: string;
method render
render: () => React.JSX.Element;
class NumericInput
class NumericInput extends AbstractPureComponent< HTMLInputProps & NumericInputProps, NumericInputState> {}
Numeric input component.
See Also
https://blueprintjs.com/docs/#core/components/numeric-input
property defaultProps
static defaultProps: NumericInputProps;
property displayName
static displayName: string;
property inputElement
inputElement: HTMLInputElement;
property state
state: NumericInputState;
property VALUE_EMPTY
static VALUE_EMPTY: string;
property VALUE_ZERO
static VALUE_ZERO: string;
method componentDidUpdate
componentDidUpdate: ( prevProps: NumericInputProps, prevState: NumericInputState) => void;
method getDerivedStateFromProps
static getDerivedStateFromProps: ( props: NumericInputProps, state: NumericInputState) => { stepMaxPrecision: number; value: string; prevMaxProp: number | undefined; prevMinProp: number | undefined;};
method render
render: () => React.JSX.Element;
method validateProps
protected validateProps: (nextProps: HTMLInputProps & NumericInputProps) => void;
class OverflowList
class OverflowList<T> extends React.Component< OverflowListProps<T>, OverflowListState<T>> {}
Overflow list component.
See Also
https://blueprintjs.com/docs/#core/components/overflow-list
property defaultProps
static defaultProps: Partial<OverflowListProps<any>>;
property displayName
static displayName: string;
property state
state: OverflowListState<T>;
method componentDidMount
componentDidMount: () => void;
method componentDidUpdate
componentDidUpdate: ( prevProps: OverflowListProps<T>, prevState: OverflowListState<T>) => void;
method ofType
static ofType: <U>() => new (props: OverflowListProps<U>) => OverflowList<U>;
method render
render: () => React.JSX.Element;
method shouldComponentUpdate
shouldComponentUpdate: ( nextProps: OverflowListProps<T>, nextState: OverflowListState<T>) => boolean;
class Overlay
class Overlay extends AbstractPureComponent<OverlayProps, OverlayState> {}
Overlay component.
See Also
https://blueprintjs.com/docs/#core/components/overlay
Deprecated
use
Overlay2
instead
property containerElement
containerElement: React.RefObject<HTMLDivElement>;
Ref for container element, containing all children and the backdrop
property defaultProps
static defaultProps: OverlayProps;
property displayName
static displayName: string;
property state
state: OverlayState;
method componentDidMount
componentDidMount: () => void;
method componentDidUpdate
componentDidUpdate: (prevProps: OverlayProps) => void;
method componentWillUnmount
componentWillUnmount: () => void;
method getDerivedStateFromProps
static getDerivedStateFromProps: ({ isOpen: hasEverOpened,}: OverlayProps) => { hasEverOpened: true } | null;
method render
render: () => React.JSX.Element | null;
class OverlayToaster
class OverlayToaster extends AbstractPureComponent<OverlayToasterProps, OverlayToasterState> implements Toaster {}
OverlayToaster component.
See Also
https://blueprintjs.com/docs/#core/components/toast
property defaultProps
static defaultProps: OverlayToasterProps;
property displayName
static displayName: string;
property state
state: OverlayToasterState;
method clear
clear: () => void;
method create
static create: (props?: OverlayToasterProps, container?: HTMLElement) => Toaster;
Create a new
Toaster
instance that can be shared around your application. TheToaster
will be rendered into a new element appended to the given container.
method createAsync
static createAsync: ( props?: OverlayToasterProps, options?: OverlayToasterCreateOptions) => Promise<Toaster>;
Similar to OverlayToaster.create, but returns a Promise to a Toaster instance after it's rendered and mounted to the DOM.
This API will replace the synchronous OverlayToaster.create in a future major version of Blueprint to reflect React 18+'s new asynchronous rendering API.
method dismiss
dismiss: (key: string, timeoutExpired?: boolean) => void;
method getToasts
getToasts: () => ToastOptions[];
method render
render: () => React.JSX.Element;
method show
show: (props: ToastProps, key?: string) => string;
method validateProps
protected validateProps: ({ maxToasts }: OverlayToasterProps) => void;
class PanelStack
class PanelStack extends AbstractPureComponent<PanelStackProps, PanelStackState> {}
Panel stack component.
See Also
https://blueprintjs.com/docs/#core/components/panel-stack
Deprecated
use
PanelStack2<T>
property state
state: PanelStackState;
method componentDidUpdate
componentDidUpdate: ( prevProps: PanelStackProps, prevState: PanelStackState) => void;
method render
render: () => React.JSX.Element;
method validateProps
protected validateProps: (props: PanelStackProps) => void;
class Popover
class Popover< T extends DefaultPopoverTargetHTMLProps = DefaultPopoverTargetHTMLProps> extends AbstractPureComponent<PopoverProps<T>, PopoverState> {}
Popover component, used to display a floating UI next to and tethered to a target element.
T target element props interface. Consumers wishing to stay in sync with Blueprint's default target HTML props interface should use the
DefaultPopoverTargetHTMLProps
type (although this is already the default type for this type param).See Also
https://blueprintjs.com/docs/#core/components/popover
property defaultProps
static defaultProps: PopoverProps<React.HTMLProps<HTMLElement>>;
property displayName
static displayName: string;
property popoverElement
popoverElement: HTMLElement;
DOM element that contains the popover. When
usePortal={true}
, this element will be portaled outside the usual DOM flow, so this reference can be very useful for testing.for testing
Modifiers
@public
property reposition
reposition: () => Promise<Partial<PopperState> | null> | undefined;
Instance method to instruct the
Popover
to recompute its position.This method should only be used if you are updating the target in a way that does not cause it to re-render, such as changing its _position_ without changing its _size_ (since
Popover
already repositions when it detects a resize).
property state
state: PopoverState;
property targetRef
targetRef: React.RefObject<HTMLElement>;
Target DOM element ref.
N.B. this must be a ref object since we pass it to
<ResizeSensor>
, which needs to know about the target DOM element in order to observe its dimensions.for testing
Modifiers
@public
method componentDidMount
componentDidMount: () => void;
method componentDidUpdate
componentDidUpdate: (props: PopoverProps<T>, state: PopoverState) => void;
method render
render: () => React.JSX.Element | null;
method validateProps
protected validateProps: (props: PopoverProps<T>) => void;
class RangeSlider
class RangeSlider extends AbstractPureComponent<RangeSliderProps> {}
Range slider component.
See Also
https://blueprintjs.com/docs/#core/components/sliders.range-slider
property defaultProps
static defaultProps: RangeSliderProps;
property displayName
static displayName: string;
method render
render: () => React.JSX.Element;
method validateProps
protected validateProps: (props: RangeSliderProps) => void;
class ResizeSensor
class ResizeSensor extends AbstractPureComponent<ResizeSensorProps> {}
Resize sensor component.
It requires a single DOM element child and will error otherwise.
See Also
https://blueprintjs.com/docs/#core/components/resize-sensor
property displayName
static displayName: string;
method componentDidMount
componentDidMount: () => void;
method componentDidUpdate
componentDidUpdate: (prevProps: ResizeSensorProps) => void;
method componentWillUnmount
componentWillUnmount: () => void;
method render
render: () => React.ReactNode;
class Slider
class Slider extends AbstractPureComponent<SliderProps> {}
Slider component.
See Also
https://blueprintjs.com/docs/#core/components/sliders.slider
property defaultProps
static defaultProps: SliderProps;
property displayName
static displayName: string;
method render
render: () => React.JSX.Element;
class Tab
class Tab extends AbstractPureComponent<TabProps> {}
Tab component.
See Also
https://blueprintjs.com/docs/#core/components/tabs.tab
property defaultProps
static defaultProps: Partial<TabProps>;
property displayName
static displayName: string;
method render
render: () => React.JSX.Element;
class TabPanel
class TabPanel extends AbstractPureComponent<TabPanelProps> {}
Wraps the passed
panel
.
method render
render: () => React.JSX.Element | undefined;
class Tabs
class Tabs extends AbstractPureComponent<TabsProps, TabsState> {}
Tabs component.
See Also
https://blueprintjs.com/docs/#core/components/tabs
constructor
constructor(props: TabsProps);
property defaultProps
static defaultProps: Partial<TabsProps>;
property displayName
static displayName: string;
property Expander
static Expander: React.FC<{}>;
Insert a
TabsExpander
between any two children to right-align all subsequent children.Deprecated
use
TabsExpander
property Tab
static Tab: typeof Tab;
method componentDidMount
componentDidMount: () => void;
method componentDidUpdate
componentDidUpdate: (prevProps: TabsProps, prevState: TabsState) => void;
method getDerivedStateFromProps
static getDerivedStateFromProps: ({ selectedTabId,}: TabsProps) => { selectedTabId: TabId } | null;
method render
render: () => React.JSX.Element;
class TagInput
class TagInput extends AbstractPureComponent<TagInputProps, TagInputState> {}
Tag input component.
See Also
https://blueprintjs.com/docs/#core/components/tag-input
property defaultProps
static defaultProps: Partial<TagInputProps>;
property displayName
static displayName: string;
property inputElement
inputElement: HTMLInputElement;
property state
state: TagInputState;
method componentDidUpdate
componentDidUpdate: (prevProps: TagInputProps) => void;
method getDerivedStateFromProps
static getDerivedStateFromProps: ( props: Readonly<TagInputProps>, state: Readonly<TagInputState>) => Partial<TagInputState> | null;
method render
render: () => React.JSX.Element;
class TextArea
class TextArea extends AbstractPureComponent<TextAreaProps, TextAreaState> {}
Text area component.
See Also
https://blueprintjs.com/docs/#core/components/text-area
property defaultProps
static defaultProps: TextAreaProps;
property displayName
static displayName: string;
property state
state: TextAreaState;
property textareaElement
textareaElement: HTMLTextAreaElement;
method componentDidMount
componentDidMount: () => void;
method componentDidUpdate
componentDidUpdate: (prevProps: TextAreaProps) => void;
method render
render: () => React.JSX.Element;
class Toast
class Toast extends AbstractPureComponent<ToastProps> {}
Toast component.
See Also
https://blueprintjs.com/docs/#core/components/toast
Deprecated
use
Toast2
instead, which forwards DOM refs and is thus compatible withOverlay2
.
property defaultProps
static defaultProps: ToastProps;
property displayName
static displayName: string;
method componentDidMount
componentDidMount: () => void;
method componentDidUpdate
componentDidUpdate: (prevProps: ToastProps) => void;
method componentWillUnmount
componentWillUnmount: () => void;
method render
render: () => React.JSX.Element;
class Tooltip
class Tooltip< T extends DefaultPopoverTargetHTMLProps = DefaultPopoverTargetHTMLProps> extends AbstractPureComponent<TooltipProps<T>> {}
Tooltip component.
See Also
https://blueprintjs.com/docs/#core/components/tooltip
property defaultProps
static defaultProps: Partial<TooltipProps<React.HTMLProps<HTMLElement>>>;
property displayName
static displayName: string;
method render
render: () => React.JSX.Element;
method reposition
reposition: () => void;
class Tree
class Tree<T = {}> extends React.Component<TreeProps<T>> {}
Tree component.
See Also
https://blueprintjs.com/docs/#core/components/tree
property displayName
static displayName: string;
method getNodeContentElement
getNodeContentElement: (nodeId: string | number) => HTMLElement | undefined;
Returns the underlying HTML element of the
Tree
node with an id ofnodeId
. This element does not contain the children of the node, only its label and controls. If the node is not currently mounted,undefined
is returned.
method nodeFromPath
static nodeFromPath: <U>( path: readonly number[], treeNodes?: ReadonlyArray<TreeNodeInfo<U>>) => TreeNodeInfo<U>;
method ofType
static ofType: <U>() => new (props: TreeProps<U>) => Tree<U>;
method render
render: () => React.JSX.Element;
class TreeNode
class TreeNode<T = {}> extends React.Component<TreeNodeProps<T>> {}
Tree node component.
See Also
https://blueprintjs.com/docs/#core/components/tree.tree-node
property displayName
static displayName: string;
method ofType
static ofType: <U>() => new (props: TreeNodeProps<U>) => TreeNode<U>;
Deprecated
no longer necessary now that the TypeScript parser supports type arguments on JSX element tags
method render
render: () => React.JSX.Element;
Interfaces
interface ActionProps
interface ActionProps<T extends HTMLElement = HTMLElement> extends IntentProps, Props {}
Interface for a clickable action, such as a button or menu item. These props can be spready directly to a
<Button>
or<MenuItem>
element.T type of the DOM element rendered by this component
property disabled
disabled?: boolean;
Whether this action is non-interactive.
property icon
icon?: IconName | MaybeElement;
Name of a Blueprint UI icon (or an icon element) to render before the text.
property onClick
onClick?: (event: React.MouseEvent<T>) => void;
Click event handler.
property onFocus
onFocus?: (event: React.FocusEvent<T>) => void;
Focus event handler.
property text
text?: React.ReactNode;
Action text. Can be any single React renderable.
interface AlertProps
interface AlertProps extends OverlayLifecycleProps, Props {}
property cancelButtonText
cancelButtonText?: string;
The text for the cancel button. If this prop is defined, then either
onCancel
oronClose
must also be defined.
property canEscapeKeyCancel
canEscapeKeyCancel?: boolean;
Whether pressing escape when focused on the Alert should cancel the alert. If this prop is enabled, then either
onCancel
oronClose
must also be defined.false
property canOutsideClickCancel
canOutsideClickCancel?: boolean;
Whether clicking outside the Alert should cancel the alert. If this prop is enabled, then either
onCancel
oronClose
must also be defined.false
property children
children?: React.ReactNode;
Dialog contents.
property confirmButtonText
confirmButtonText?: string;
The text for the confirm (right-most) button. This button will always appear, and uses the value of the
intent
prop below."OK"
property icon
icon?: IconName | MaybeElement;
Name of a Blueprint UI icon (or an icon element) to display on the left side.
property intent
intent?: Intent;
The intent to be applied to the confirm (right-most) button and the icon (if provided).
property isOpen
isOpen: boolean;
Toggles the visibility of the alert. This prop is required because the component is controlled.
property loading
loading?: boolean;
If set to
true
, the confirm button will be set to its loading state. The cancel button, if visible, will be disabled.false
property onCancel
onCancel?: (event?: React.SyntheticEvent<HTMLElement>) => void;
Handler invoked when the alert is canceled. Alerts can be **canceled** in the following ways: - clicking the cancel button (if
cancelButtonText
is defined) - pressing the escape key (ifcanEscapeKeyCancel
is enabled) - clicking on the overlay backdrop (ifcanOutsideClickCancel
is enabled)If any of the
cancel
props are defined, then eitheronCancel
oronClose
must be defined.
property onClose
onClose?: ( confirmed: boolean, event?: React.SyntheticEvent<HTMLElement>) => void;
Handler invoked when the Alert is confirmed or canceled; see
onConfirm
andonCancel
for more details. First argument istrue
if confirmed,false
otherwise. This is an alternative to defining separateonConfirm
andonCancel
handlers.
property onConfirm
onConfirm?: (event?: React.SyntheticEvent<HTMLElement>) => void;
Handler invoked when the confirm button is clicked. Alerts can be **confirmed** in the following ways: - clicking the confirm button - focusing on the confirm button and pressing
enter
orspace
property portalContainer
portalContainer?: HTMLElement;
The container element into which the overlay renders its contents, when
usePortal
istrue
. This prop is ignored ifusePortal
isfalse
.document.body
property style
style?: React.CSSProperties;
CSS styles to apply to the alert.
property transitionDuration
transitionDuration?: number;
Indicates how long (in milliseconds) the overlay's enter/leave transition takes. This is used by React
CSSTransition
to know when a transition completes and must match the duration of the animation in CSS. Only set this prop if you override Blueprint's default transitions with new transitions of a different length.300
interface BlueprintProviderProps
interface BlueprintProviderProps extends OverlaysProviderProps, PortalContextOptions, HotkeysProviderPrefix<HotkeysProviderProps> {}
interface BreadcrumbProps
interface BreadcrumbProps extends ActionProps<HTMLAnchorElement>, LinkProps {}
interface BreadcrumbsProps
interface BreadcrumbsProps extends Props {}
property breadcrumbRenderer
breadcrumbRenderer?: (props: BreadcrumbProps) => React.JSX.Element;
Callback invoked to render visible breadcrumbs. Best practice is to render a
<Breadcrumb>
element. IfcurrentBreadcrumbRenderer
is also supplied, that callback will be used for the current breadcrumb instead.Breadcrumb
property collapseFrom
collapseFrom?: Boundary;
Which direction the breadcrumbs should collapse from: start or end.
Boundary.START
property currentBreadcrumbRenderer
currentBreadcrumbRenderer?: (props: BreadcrumbProps) => React.JSX.Element;
Callback invoked to render the current breadcrumb, which is the last element in the
items
array.If this prop is omitted,
breadcrumbRenderer
will be invoked for the current breadcrumb instead.
property items
items: readonly BreadcrumbProps[];
All breadcrumbs to display. Breadcrumbs that do not fit in the container will be rendered in an overflow menu instead.
property minVisibleItems
minVisibleItems?: number;
The minimum number of visible breadcrumbs that should never collapse into the overflow menu, regardless of DOM dimensions.
0
property overflowButtonProps
overflowButtonProps?: React.HTMLProps<HTMLSpanElement>;
Props to spread to the
OverflowList
popover target.
property overflowListProps
overflowListProps?: Partial< Omit< OverflowListProps<BreadcrumbProps>, 'items' | 'overflowRenderer' | 'visibleItemRenderer' >>;
Props to spread to
OverflowList
. Note thatitems
,overflowRenderer
, andvisibleItemRenderer
cannot be changed.
property popoverProps
popoverProps?: Partial< Omit< PopoverProps, | 'content' | 'defaultIsOpen' | 'disabled' | 'fill' | 'renderTarget' | 'targetTagName' >>;
Props to spread to the popover showing the overflow menu.
interface ButtonGroupProps
interface ButtonGroupProps extends Props, HTMLDivProps, React.RefAttributes<HTMLDivElement> {}
property alignText
alignText?: Alignment;
Text alignment within button. By default, icons and text will be centered within the button. Passing
"left"
or"right"
will align the button text to that side and pushicon
andrightIcon
to either edge. Passing"center"
will center the text and icons together.
property children
children: React.ReactNode;
Buttons in this group.
property fill
fill?: boolean;
Whether the button group should take up the full width of its container.
false
property large
large?: boolean;
Whether the child buttons should appear with large styling.
false
property minimal
minimal?: boolean;
Whether the child buttons should appear with minimal styling.
false
property outlined
outlined?: boolean;
Whether the child buttons should use outlined styles.
false
property vertical
vertical?: boolean;
Whether the button group should appear with vertical styling.
false
interface ButtonSharedProps
interface ButtonSharedProps extends ActionProps<HTMLElement> {}
property active
active?: boolean;
If set to
true
, the button will display in an active state. This is equivalent to settingclassName={Classes.ACTIVE}
.false
property alignText
alignText?: Alignment;
Text alignment within button. By default, icons and text will be centered within the button. Passing
"left"
or"right"
will align the button text to that side and pushicon
andrightIcon
to either edge. Passing"center"
will center the text and icons together.Alignment.CENTER
property children
children?: React.ReactNode;
Button contents.
property ellipsizeText
ellipsizeText?: boolean;
If set to
true
, the button text element will hide overflow text that does not fit into a single line and show a trailing ellipsis, similar to theText
component.false
property fill
fill?: boolean;
Whether this button should expand to fill its container.
property large
large?: boolean;
Whether this button should use large styles.
property loading
loading?: boolean;
If set to
true
, the button will display a centered loading spinner instead of its contents and the button will be disabled (_even if_disabled={false}
). The width of the button is not affected by the value of this prop.false
property minimal
minimal?: