@blueprintjs/core
- Version 5.3.0
- Published
- 5.76 MB
- 8 dependencies
- Apache-2.0 license
Install
npm i @blueprintjs/core
yarn add @blueprintjs/core
pnpm add @blueprintjs/core
Overview
Core styles & components
Index
Variables
- Alignment
- AnchorButton
- Blockquote
- Boundary
- Breadcrumb
- Button
- ButtonGroup
- Card
- CardList
- Checkbox
- Code
- ContextMenu
- ContextMenuPopover
- ControlGroup
- DISPLAYNAME_PREFIX
- Elevation
- Expander
- FocusStyleManager
- H1
- H2
- H3
- H4
- H5
- H6
- HandleInteractionKind
- HandleType
- HotkeysContext
- HotkeysDialog2
- HTMLSelect
- HTMLTable
- Icon
- Intent
- Keys
- Label
- MenuItem
- OL
- PanelStack2
- PopoverInteractionKind
- PopoverPosition
- PortalContext
- Position
- Pre
- Radio
- Section
- SectionCard
- Switch
- TabsExpander
- Tag
- Text
- Toaster
- ToasterInstance
- UL
Functions
- comboMatches()
- ContextMenuTargetLegacy()
- getKeyCombo()
- getKeyComboString()
- getRef()
- hideContextMenu()
- hideHotkeysDialog()
- hideHotkeysDialogAfterDelay()
- HotkeysProvider()
- HotkeysTarget()
- HotkeysTarget2()
- isHotkeysDialogShowing()
- isRefCallback()
- isRefObject()
- mergeRefs()
- parseKeyCombo()
- Portal()
- PortalProvider()
- refHandler()
- removeNonHTMLProps()
- setHotkeysDialogProps()
- setRef()
- showContextMenu()
- showHotkeysDialog()
- useAsyncControllableValue()
- useHotkeys()
Classes
Interfaces
Enums
Type Aliases
- Alignment
- AnchorButtonProps
- Boundary
- ButtonProps
- ButtonSharedPropsAndAttributes
- DefaultPopoverTargetHTMLProps
- DialogStepButtonProps
- DialogStepId
- Elevation
- HandleHtmlProps
- HandleInteractionKind
- HandleType
- HotkeyProps
- HotkeysContextInstance
- HTMLDivProps
- HTMLInputProps
- HTMLSelectIconName
- IconProps
- Intent
- MaybeElement
- MultistepDialogNavPosition
- NumberRange
- PanelProps
- PopoverClickTargetHandlers
- PopoverHoverTargetHandlers
- PopoverInteractionKind
- PopoverPosition
- PopperCustomModifier
- PopperModifierOverrides
- Position
- RadioProps
- ResizeEntry
- SectionElevation
- StrictModifierNames
- 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
- CODE
- CODE_BLOCK
- COLLAPSE
- COLLAPSE_BODY
- COMPACT
- CONTEXT_MENU
- CONTEXT_MENU_BACKDROP
- CONTEXT_MENU_POPOVER
- CONTEXT_MENU_VIRTUAL_TARGET
- CONTROL
- 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
- 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_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
- 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
- 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_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()
- getDeepUnequalKeyValues()
- getRef()
- isArrowKey()
- isDarkTheme()
- isElementOfType()
- isFunction()
- isKeyboardClick()
- isNodeEnv()
- isReactNodeEmpty()
- KeyAllowlist
- KeyDenylist
- setRef()
- shallowCompareKeys()
- throttle()
- throttleEvent()
- throttleReactEventCallback()
- uniqueId()
Variables
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 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 Code
const Code: React.FC<any>;
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 DISPLAYNAME_PREFIX
const DISPLAYNAME_PREFIX: string;
variable Elevation
const Elevation: { ZERO: 0; ONE: 1; TWO: 2; THREE: 3; FOUR: 4 };
variable Expander
const Expander: React.FC<{}>;
Deprecated
use
TabsExpander
instead
variable FocusStyleManager
const FocusStyleManager: { alwaysShowFocus: () => boolean | void; isActive: () => boolean; onlyShowFocusOnTabs: () => boolean | void;};
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 Keys
const Keys: { BACKSPACE: number; TAB: number; ENTER: number; SHIFT: number; ESCAPE: number; SPACE: number; ARROW_LEFT: number; ARROW_UP: number; ARROW_RIGHT: number; ARROW_DOWN: number; DELETE: number;};
Deprecated
use named keys instead of key codes
variable Label
const Label: React.FC<any>;
variable MenuItem
const MenuItem: React.FC<MenuItemProps>;
Menu item component.
See Also
https://blueprintjs.com/docs/#core/components/menu.menu-item
variable OL
const OL: React.FC<any>;
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 Radio
const Radio: React.FC<ControlProps>;
Radio component.
See Also
https://blueprintjs.com/docs/#core/components/radio
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 Switch
const Switch: React.FC<SwitchProps>;
Switch component.
See Also
https://blueprintjs.com/docs/#core/components/switch
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 Toaster
const Toaster: { create: typeof deprecatedToasterCreate };
variable ToasterInstance
const ToasterInstance: { create: typeof deprecatedToasterCreate };
variable UL
const UL: React.FC<any>;
Functions
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> ) => JSX.Element | undefined; onContextMenuClose?: (() => void) | undefined; context: any; 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<{}> & Readonly<{ children?: React.ReactNode }>; 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: () => 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,}: HotkeysProviderProps) => 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(): JSX.Element; renderHotkeys: () => React.ReactElement< HotkeysProps, string | React.JSXElementConstructor<any> >; context: any; 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<{}> & Readonly<{ children?: React.ReactNode }>; 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) => 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>>) => 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 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>) => 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'>) => 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;};
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
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 Alert
class Alert extends AbstractPureComponent<AlertProps> {}
Alert component.
See Also
https://blueprintjs.com/docs/#core/components/alert
property defaultProps
static defaultProps: AlertProps;
property displayName
static displayName: string;
method render
render: () => JSX.Element;
method validateProps
protected validateProps: (props: AlertProps) => void;
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: () => JSX.Element;
class Callout
class Callout extends AbstractPureComponent<CalloutProps> {}
Callout component.
See Also
https://blueprintjs.com/docs/#core/components/callout
property displayName
static displayName: string;
method render
render: () => 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: () => JSX.Element;
method validateProps
protected validateProps: (props: DialogProps) => void;
class DialogBody
class DialogBody extends AbstractPureComponent<DialogBodyProps> {}
Dialog body component.
See Also
https://blueprintjs.com/docs/#core/components/dialog.dialog-body-props
property defaultProps
static defaultProps: DialogBodyProps;
method render
render: () => JSX.Element;
class DialogFooter
class DialogFooter extends AbstractPureComponent<DialogFooterProps> {}
Dialog footer component.
See Also
https://blueprintjs.com/docs/#core/components/dialog.dialog-footer-props
property defaultProps
static defaultProps: DialogFooterProps;
method render
render: () => JSX.Element;
class DialogStep
class DialogStep extends AbstractPureComponent<DialogStepProps> {}
Dialog step component.
See Also
https://blueprintjs.com/docs/#core/components/dialog.dialogstep
property displayName
static displayName: string;
method render
render: () => JSX.Element;
class Divider
class Divider extends AbstractPureComponent<DividerProps> {}
Divider component.
See Also
https://blueprintjs.com/docs/#core/components/divider
property displayName
static displayName: string;
method render
render: () => JSX.Element;
class Drawer
class Drawer extends AbstractPureComponent<DrawerProps> {}
property defaultProps
static defaultProps: DrawerProps;
property displayName
static displayName: string;
method render
render: () => 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: () => JSX.Element;
class FileInput
class FileInput extends AbstractPureComponent<FileInputProps> {}
File input component.
See Also
https://blueprintjs.com/docs/#core/components/file-input
property defaultProps
static defaultProps: FileInputProps;
property displayName
static displayName: string;
method render
render: () => JSX.Element;
class FormGroup
class FormGroup extends AbstractPureComponent<FormGroupProps> {}
Form group component.
See Also
https://blueprintjs.com/docs/#core/components/form-group
property displayName
static displayName: string;
method render
render: () => 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: () => 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: () => 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 KeyComboTag
class KeyComboTag extends AbstractPureComponent<KeyComboTagProps> {}
property displayName
static displayName: string;
method render
render: () => JSX.Element;
class Menu
class Menu extends AbstractPureComponent<MenuProps> {}
Menu component.
See Also
https://blueprintjs.com/docs/#core/components/menu
property displayName
static displayName: string;
method render
render: () => JSX.Element;
class MenuDivider
class MenuDivider extends React.Component<MenuDividerProps> {}
Menu divider component.
See Also
https://blueprintjs.com/docs/#core/components/menu.menu-divider
property displayName
static displayName: string;
method render
render: () => JSX.Element;
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: () => 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: () => JSX.Element;
class Navbar
class Navbar extends AbstractPureComponent<NavbarProps> {}
Navbar component.
See Also
https://blueprintjs.com/docs/#core/components/navbar
property displayName
static displayName: string;
property Divider
static Divider: typeof NavbarDivider;
property Group
static Group: typeof NavbarGroup;
property Heading
static Heading: typeof NavbarHeading;
method render
render: () => JSX.Element;
class NavbarDivider
class NavbarDivider extends AbstractPureComponent<NavbarDividerProps> {}
property displayName
static displayName: string;
method render
render: () => JSX.Element;
class NavbarGroup
class NavbarGroup extends AbstractPureComponent<NavbarGroupProps> {}
property defaultProps
static defaultProps: NavbarGroupProps;
property displayName
static displayName: string;
method render
render: () => JSX.Element;
class NavbarHeading
class NavbarHeading extends AbstractPureComponent<NavbarHeadingProps> {}
property displayName
static displayName: string;
method render
render: () => 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: () => 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: () => 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: () => 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
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: () => 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 dismiss
dismiss: (key: string, timeoutExpired?: boolean) => void;
method getToasts
getToasts: () => ToastOptions[];
method render
render: () => 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: () => 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.
for testing
Modifiers
@public
method componentDidMount
componentDidMount: () => void;
method componentDidUpdate
componentDidUpdate: (props: PopoverProps<T>, state: PopoverState) => void;
method render
render: () => JSX.Element | null;
method validateProps
protected validateProps: ( props: PopoverProps<T> & { children?: React.ReactNode }) => void;
class ProgressBar
class ProgressBar extends AbstractPureComponent<ProgressBarProps> {}
Progress bar component.
See Also
https://blueprintjs.com/docs/#core/components/progress-bar
property displayName
static displayName: string;
method render
render: () => JSX.Element;
class RadioGroup
class RadioGroup extends AbstractPureComponent<RadioGroupProps> {}
Radio group component.
See Also
https://blueprintjs.com/docs/#core/components/radio.radiogroup
property displayName
static displayName: string;
method render
render: () => JSX.Element;
method validateProps
protected validateProps: () => 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: () => 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: () => JSX.Element;
class Spinner
class Spinner extends AbstractPureComponent<SpinnerProps> {}
Spinner component.
See Also
https://blueprintjs.com/docs/#core/components/spinner
property displayName
static displayName: string;
method componentDidUpdate
componentDidUpdate: (prevProps: SpinnerProps) => void;
method render
render: () => React.DOMElement< { size?: number | undefined; defaultChecked?: boolean | undefined; defaultValue?: string | number | readonly string[] | undefined; suppressContentEditableWarning?: boolean | undefined; suppressHydrationWarning?: boolean | undefined; accessKey?: string | undefined; contentEditable?: 'inherit' | (boolean | 'true' | 'false') | undefined; contextMenu?: string | undefined; dir?: string | undefined; draggable?: (boolean | 'true' | 'false') | undefined; hidden?: boolean | undefined; id?: string | undefined; lang?: string | undefined; placeholder?: string | undefined; slot?: string | undefined; spellCheck?: (boolean | 'true' | 'false') | undefined; style?: React.CSSProperties | undefined; tabIndex?: number | undefined; title?: string | undefined; translate?: 'yes' | 'no' | undefined; radioGroup?: string | undefined; role: string; about?: string | undefined; datatype?: string | undefined; inlist?: any; prefix?: string | undefined; property?: string | undefined; resource?: string | undefined; typeof?: string | undefined; vocab?: string | undefined; autoCapitalize?: string | undefined; autoCorrect?: string | undefined; autoSave?: string | undefined; color?: string | undefined; itemProp?: string | undefined; itemScope?: boolean | undefined; itemType?: string | undefined; itemID?: string | undefined; itemRef?: string | undefined; results?: number | undefined; security?: string | undefined; unselectable?: 'on' | 'off' | undefined; inputMode?: | 'search' | 'text' | 'none' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | undefined; is?: string | undefined; 'aria-activedescendant'?: string | undefined; 'aria-atomic'?: boolean | 'true' | 'false' | undefined; 'aria-autocomplete'?: 'list' | 'none' | 'inline' | 'both' | undefined; 'aria-busy'?: boolean | 'true' | 'false' | undefined; 'aria-checked'?: boolean | 'true' | 'false' | 'mixed' | undefined; 'aria-colcount'?: number | undefined; 'aria-colindex'?: number | undefined; 'aria-colspan'?: number | undefined; 'aria-controls'?: string | undefined; 'aria-current'?: | boolean | 'time' | 'location' | 'true' | 'false' | 'page' | 'step' | 'date' | undefined; 'aria-describedby'?: string | undefined; 'aria-details'?: string | undefined; 'aria-disabled'?: boolean | 'true' | 'false' | undefined; 'aria-dropeffect'?: | 'link' | 'copy' | 'move' | 'none' | 'execute' | 'popup' | undefined; 'aria-errormessage'?: string | undefined; 'aria-expanded'?: boolean | 'true' | 'false' | undefined; 'aria-flowto'?: string | undefined; 'aria-grabbed'?: boolean | 'true' | 'false' | undefined; 'aria-haspopup'?: | boolean | 'dialog' | 'menu' | 'grid' | 'tree' | 'true' | 'false' | 'listbox' | undefined; 'aria-hidden'?: boolean | 'true' | 'false' | undefined; 'aria-invalid'?: | boolean | 'true' | 'false' | 'grammar' | 'spelling' | undefined; 'aria-keyshortcuts'?: string | undefined; 'aria-label': string; 'aria-labelledby'?: string | undefined; 'aria-level'?: number | undefined; 'aria-live'?: 'off' | 'assertive' | 'polite' | undefined; 'aria-modal'?: boolean | 'true' | 'false' | undefined; 'aria-multiline'?: boolean | 'true' | 'false' | undefined; 'aria-multiselectable'?: boolean | 'true' | 'false' | undefined; 'aria-orientation'?: 'horizontal' | 'vertical' | undefined; 'aria-owns'?: string | undefined; 'aria-placeholder'?: string | undefined; 'aria-posinset'?: number | undefined; 'aria-pressed'?: boolean | 'true' | 'false' | 'mixed' | undefined; 'aria-readonly'?: boolean | 'true' | 'false' | undefined; 'aria-relevant'?: | 'text' | 'additions' | 'additions removals' | 'additions text' | 'all' | 'removals' | 'removals additions' | 'removals text' | 'text additions' | 'text removals' | undefined; 'aria-required'?: boolean | 'true' | 'false' | undefined; 'aria-roledescription'?: string | undefined; 'aria-rowcount'?: number | undefined; 'aria-rowindex'?: number | undefined; 'aria-rowspan'?: number | undefined; 'aria-selected'?: boolean | 'true' | 'false' | undefined; 'aria-setsize'?: number | undefined; 'aria-sort'?: 'none' | 'ascending' | 'descending' | 'other' | undefined; 'aria-valuemax': number; 'aria-valuemin': number; 'aria-valuenow': number | undefined; 'aria-valuetext'?: string | undefined; children?: React.ReactNode; dangerouslySetInnerHTML?: { __html: string } | undefined; onCopy?: React.ClipboardEventHandler<HTMLElement> | undefined; onCopyCapture?: React.ClipboardEventHandler<HTMLElement> | undefined; onCut?: React.ClipboardEventHandler<HTMLElement> | undefined; onCutCapture?: React.ClipboardEventHandler<HTMLElement> | undefined; onPaste?: React.ClipboardEventHandler<HTMLElement> | undefined; onPasteCapture?: React.ClipboardEventHandler<HTMLElement> | undefined; onCompositionEnd?: | React.CompositionEventHandler<HTMLElement> | undefined; onCompositionEndCapture?: | React.CompositionEventHandler<HTMLElement> | undefined; onCompositionStart?: | React.CompositionEventHandler<HTMLElement> | undefined; onCompositionStartCapture?: | React.CompositionEventHandler<HTMLElement> | undefined; onCompositionUpdate?: | React.CompositionEventHandler<HTMLElement> | undefined; onCompositionUpdateCapture?: | React.CompositionEventHandler<HTMLElement> | undefined; onFocus?: React.FocusEventHandler<HTMLElement> | undefined; onFocusCapture?: React.FocusEventHandler<HTMLElement> | undefined; onBlur?: React.FocusEventHandler<HTMLElement> | undefined; onBlurCapture?: React.FocusEventHandler<HTMLElement> | undefined; onChange?: React.FormEventHandler<HTMLElement> | undefined; onChangeCapture?: React.FormEventHandler<HTMLElement> | undefined; onBeforeInput?: React.FormEventHandler<HTMLElement> | undefined; onBeforeInputCapture?: React.FormEventHandler<HTMLElement> | undefined; onInput?: React.FormEventHandler<HTMLElement> | undefined; onInputCapture?: React.FormEventHandler<HTMLElement> | undefined; onReset?: React.FormEventHandler<HTMLElement> | undefined; onResetCapture?: React.FormEventHandler<HTMLElement> | undefined; onSubmit?: React.FormEventHandler<HTMLElement> | undefined; onSubmitCapture?: React.FormEventHandler<HTMLElement> | undefined; onInvalid?: React.FormEventHandler<HTMLElement> | undefined; onInvalidCapture?: React.FormEventHandler<HTMLElement> | undefined; onLoad?: React.ReactEventHandler<HTMLElement> | undefined; onLoadCapture?: React.ReactEventHandler<HTMLElement> | undefined; onError?: React.ReactEventHandler<HTMLElement> | undefined; onErrorCapture?: React.ReactEventHandler<HTMLElement> | undefined; onKeyDown?: React.KeyboardEventHandler<HTMLElement> | undefined; onKeyDownCapture?: React.KeyboardEventHandler<HTMLElement> | undefined; onKeyPress?: React.KeyboardEventHandler<HTMLElement> | undefined; onKeyPressCapture?: React.KeyboardEventHandler<HTMLElement> | undefined; onKeyUp?: React.KeyboardEventHandler<HTMLElement> | undefined; onKeyUpCapture?: React.KeyboardEventHandler<HTMLElement> | undefined; onAbort?: React.ReactEventHandler<HTMLElement> | undefined; onAbortCapture?: React.ReactEventHandler<HTMLElement> | undefined; onCanPlay?: React.ReactEventHandler<HTMLElement> | undefined; onCanPlayCapture?: React.ReactEventHandler<HTMLElement> | undefined; onCanPlayThrough?: React.ReactEventHandler<HTMLElement> | undefined; onCanPlayThroughCapture?: | React.ReactEventHandler<HTMLElement> | undefined; onDurationChange?: React.ReactEventHandler<HTMLElement> | undefined; onDurationChangeCapture?: | React.ReactEventHandler<HTMLElement> | undefined; onEmptied?: React.ReactEventHandler<HTMLElement> | undefined; onEmptiedCapture?: React.ReactEventHandler<HTMLElement> | undefined; onEncrypted?: React.ReactEventHandler<HTMLElement> | undefined; onEncryptedCapture?: React.ReactEventHandler<HTMLElement> | undefined; onEnded?: React.ReactEventHandler<HTMLElement> | undefined; onEndedCapture?: React.ReactEventHandler<HTMLElement> | undefined; onLoadedData?: React.ReactEventHandler<HTMLElement> | undefined; onLoadedDataCapture?: React.ReactEventHandler<HTMLElement> | undefined; onLoadedMetadata?: React.ReactEventHandler<HTMLElement> | undefined; onLoadedMetadataCapture?: | React.ReactEventHandler<HTMLElement> | undefined; onLoadStart?: React.ReactEventHandler<HTMLElement> | undefined; onLoadStartCapture?: React.ReactEventHandler<HTMLElement> | undefined; onPause?: React.ReactEventHandler<HTMLElement> | undefined; onPauseCapture?: React.ReactEventHandler<HTMLElement> | undefined; onPlay?: React.ReactEventHandler<HTMLElement> | undefined; onPlayCapture?: React.ReactEventHandler<HTMLElement> | undefined; onPlaying?: React.ReactEventHandler<HTMLElement> | undefined; onPlayingCapture?: React.ReactEventHandler<HTMLElement> | undefined; onProgress?: React.ReactEventHandler<HTMLElement> | undefined; onProgressCapture?: React.ReactEventHandler<HTMLElement> | undefined; onRateChange?: React.ReactEventHandler<HTMLElement> | undefined; onRateChangeCapture?: React.ReactEventHandler<HTMLElement> | undefined; onSeeked?: React.ReactEventHandler<HTMLElement> | undefined; onSeekedCapture?: React.ReactEventHandler<HTMLElement> | undefined; onSeeking?: React.ReactEventHandler<HTMLElement> | undefined; onSeekingCapture?: React.ReactEventHandler<HTMLElement> | undefined; onStalled?: React.ReactEventHandler<HTMLElement> | undefined; onStalledCapture?: React.ReactEventHandler<HTMLElement> | undefined; onSuspend?: React.ReactEventHandler<HTMLElement> | undefined; onSuspendCapture?: React.ReactEventHandler<HTMLElement> | undefined; onTimeUpdate?: React.ReactEventHandler<HTMLElement> | undefined; onTimeUpdateCapture?: React.ReactEventHandler<HTMLElement> | undefined; onVolumeChange?: React.ReactEventHandler<HTMLElement> | undefined; onVolumeChangeCapture?: React.ReactEventHandler<HTMLElement> | undefined; onWaiting?: React.ReactEventHandler<HTMLElement> | undefined; onWaitingCapture?: React.ReactEventHandler<HTMLElement> | undefined; onAuxClick?: React.MouseEventHandler<HTMLElement> | undefined; onAuxClickCapture?: React.MouseEventHandler<HTMLElement> | undefined; onClick?: React.MouseEventHandler<HTMLElement> | undefined; onClickCapture?: React.MouseEventHandler<HTMLElement> | undefined; onContextMenu?: React.MouseEventHandler<HTMLElement> | undefined; onContextMenuCapture?: React.MouseEventHandler<HTMLElement> | undefined; onDoubleClick?: React.MouseEventHandler<HTMLElement> | undefined; onDoubleClickCapture?: React.MouseEventHandler<HTMLElement> | undefined; onDrag?: React.DragEventHandler<HTMLElement> | undefined; onDragCapture?: React.DragEventHandler<HTMLElement> | undefined; onDragEnd?: React.DragEventHandler<HTMLElement> | undefined; onDragEndCapture?: React.DragEventHandler<HTMLElement> | undefined; onDragEnter?: React.DragEventHandler<HTMLElement> | undefined; onDragEnterCapture?: React.DragEventHandler<HTMLElement> | undefined; onDragExit?: React.DragEventHandler<HTMLElement> | undefined; onDragExitCapture?: React.DragEventHandler<HTMLElement> | undefined; onDragLeave?: React.DragEventHandler<HTMLElement> | undefined; onDragLeaveCapture?: React.DragEventHandler<HTMLElement> | undefined; onDragOver?: React.DragEventHandler<HTMLElement> | undefined; onDragOverCapture?: React.DragEventHandler<HTMLElement> | undefined; onDragStart?: React.DragEventHandler<HTMLElement> | undefined; onDragStartCapture?: React.DragEventHandler<HTMLElement> | undefined; onDrop?: React.DragEventHandler<HTMLElement> | undefined; onDropCapture?: React.DragEventHandler<HTMLElement> | undefined; onMouseDown?: React.MouseEventHandler<HTMLElement> | undefined; onMouseDownCapture?: React.MouseEventHandler<HTMLElement> | undefined; onMouseEnter?: React.MouseEventHandler<HTMLElement> | undefined; onMouseLeave?: React.MouseEventHandler<HTMLElement> | undefined; onMouseMove?: React.MouseEventHandler<HTMLElement> | undefined; onMouseMoveCapture?: React.MouseEventHandler<HTMLElement> | undefined; onMouseOut?: React.MouseEventHandler<HTMLElement> | undefined; onMouseOutCapture?: React.MouseEventHandler<HTMLElement> | undefined; onMouseOver?: React.MouseEventHandler<HTMLElement> | undefined; onMouseOverCapture?: React.MouseEventHandler<HTMLElement> | undefined; onMouseUp?: React.MouseEventHandler<HTMLElement> | undefined; onMouseUpCapture?: React.MouseEventHandler<HTMLElement> | undefined; onSelect?: React.ReactEventHandler<HTMLElement> | undefined; onSelectCapture?: React.ReactEventHandler<HTMLElement> | undefined; onTouchCancel?: React.TouchEventHandler<HTMLElement> | undefined; onTouchCancelCapture?: React.TouchEventHandler<HTMLElement> | undefined; onTouchEnd?: React.TouchEventHandler<HTMLElement> | undefined; onTouchEndCapture?: React.TouchEventHandler<HTMLElement> | undefined; onTouchMove?: React.TouchEventHandler<HTMLElement> | undefined; onTouchMoveCapture?: React.TouchEventHandler<HTMLElement> | undefined; onTouchStart?: React.TouchEventHandler<HTMLElement> | undefined; onTouchStartCapture?: React.TouchEventHandler<HTMLElement> | undefined; onPointerDown?: React.PointerEventHandler<HTMLElement> | undefined; onPointerDownCapture?: | React.PointerEventHandler<HTMLElement> | undefined; onPointerMove?: React.PointerEventHandler<HTMLElement> | undefined; onPointerMoveCapture?: | React.PointerEventHandler<HTMLElement> | undefined; onPointerUp?: React.PointerEventHandler<HTMLElement> | undefined; onPointerUpCapture?: React.PointerEventHandler<HTMLElement> | undefined; onPointerCancel?: React.PointerEventHandler<HTMLElement> | undefined; onPointerCancelCapture?: | React.PointerEventHandler<HTMLElement