UI Components

Flipper has a lot of built in React components to build UIs. You can import them directly using e.g. import {Button} from 'flipper'.

AlternatingRows

Displays all children in a bordered, zebra styled vertical layout

Button

A simple button, used in many parts of the application.

PropertyTypeDescription
onMouseDown(event: React.MouseEvent) => anyonMouseUp handler.
onClick(event: React.MouseEvent) => anyonClick handler.
disabledbooleanWhether this button is disabled.
largebooleanWhether this button is large. Increases padding and line-height.
compactbooleanWhether this button is compact. Decreases padding and line-height.
type'primary' ⎮ 'success' ⎮ 'warning' ⎮ 'danger'Type of button.
childrenReactReactNodeChildren.
dropdownArray<MenuItemConstructorOptions>Dropdown menu template shown on click.
iconstringName of the icon dispalyed next to the text
iconSizeIconSizeSize of the icon in pixels.
selectedbooleanFor toggle buttons, if the button is selected
pulsebooleanButton is pulsing
hrefstringURL to open in the browser on click
depressedbooleanWhether the button should render depressed into its socket
iconVariant'filled' ⎮ 'outline'Style of the icon. filled is the default
paddedbooleanWhether the button should have additional padding left and right.
windowIsFocusedboolean

ButtonGroup

Group a series of buttons together.

<ButtonGroup>
<Button>One</Button>
<Button>Two</Button>
<Button>Three</Button>
</ButtonGroup>
PropertyTypeDescription
childrenReactReactNode

ButtonGroupChain

Groups a series of buttons together with a right-chevron icon to seperate them. Used to create a navigation heirarchy.

<ButtonGroupChain iconSize={12}>
<Button>One</Button>
<Button>Two</Button>
<Button>Three</Button>
</ButtonGroupChain>
PropertyTypeDescription
childrenReactReactNodeChildren.
iconSize8 ⎮ 10 ⎮ 12 ⎮ 16 ⎮ 18 ⎮ 20 ⎮ 24 ⎮ 32Size of the button seperator icon in pixels.
iconstringName of the icon seperating the buttons. Defaults to 'chevron-right'.

ButtonNavigationGroup

Button group to navigate back and forth.

PropertyTypeDescription
canGoBackbooleanBack button is enabled
canGoForwardbooleanForwards button is enabled
onBack() => voidCallback when back button is clicked
onForward() => voidCallback when forwards button is clicked

CenteredView

CenteredView creates a scrollable container with fixed with, centered content. Recommended to combine with RoundedSection

Checkbox

A checkbox to toggle UI state

PropertyTypeDescription
checkedbooleanWhether the checkbox is checked.
onChange(checked: boolean) => voidCalled when a state change is triggered
disabledboolean

Console

PropertyTypeDescription
clientPluginClient
getContext() => string

undefined

Native context menu that is shown on secondary click. Uses Electron's context menu API to show menu items.

Separators can be added by {type: 'separator'}

PropertyTypeDescription
itemsArray<MenuItemConstructorOptions>List of items in the context menu. Used for static menus.
buildItems() => MenuTemplateFunction to generate the menu. Called right before the menu is showed. Used for dynamic menus.
childrenReactReactNodeNodes that should have a context menu
componentReact.ComponentType<any> ⎮ stringThe component that is used to wrap the children. Defaults to FlexColumn.
onMouseDown(e: React.MouseEvent) => any

ContextMenuProvider

Flipper's root is already wrapped with this component, so plugins should not need to use this. ContextMenu is what you probably want to use.

DataDescription

PropertyTypeDescription
pathArray<string>
typestring
valueany
extraany
setValueDataInspectorSetValue ⎮ null ⎮ undefined

DataInspector

An expandable data inspector.

This component is fairly low level. It's likely you're looking for <ManagedDataInspector>.

DataPreview

PropertyTypeDescription
typestring
valueany
depthnumber
extractValue( value: any, depth: number, ) => ⎮ { mutable: boolean; type: string; value: any; extra?: any; } ⎮ undefined ⎮ null
maxPropertiesnumber

ManagedDataInspector

Wrapper around DataInspector that handles expanded state.

If you require lower level access to the state then use DataInspector directly.

PropertyTypeDescription
dataanyObject to inspect.
diffanyObject to compare with the provided data property. Differences will be styled accordingly in the UI.
expandRootbooleanWhether to expand the root by default.
extractValueDataValueExtractorAn optional callback that will explode a value into its type and value. Useful for inspecting serialised data.
setValue(path: Array<string>, val: any) => voidCallback when a value is edited.
onDelete(path: Array<string>) => voidCallback when a delete action is invoked.
collapsedbooleanWhether all objects and arrays should be collapsed by default.
tooltipsObjectObject of all properties that will have tooltips
filterstringFilter nodes by some search text

SearchableDataInspector

Elements

PropertyTypeDescription
rootElementID ⎮ undefined ⎮ null
selectedElementID ⎮ undefined ⎮ null
focusedElementID ⎮ undefined ⎮ null
searchResultsElementSearchResultSet ⎮ undefined ⎮ null
elements{[key: string]: Element}
onElementSelected(key: ElementID) => void
onElementExpanded(key: ElementID, deep: boolean) => void
onElementHovered((key: ElementID ⎮ undefined ⎮ null) => void) ⎮ undefined ⎮ null
alternateRowColorboolean
contextMenuExtensionsArray<ContextMenuExtension>
decorateRow(e: Element) => ReactElement<any> ⎮ undefined ⎮ null

ElementsInspector

PropertyTypeDescription
onElementExpanded(key: ElementID, deep: boolean) => void
onElementSelected(key: ElementID) => void
onElementHovered((key: ElementID ⎮ undefined ⎮ null) => any) ⎮ undefined ⎮ null
onValueChanged((path: Array<string>, val: any) => any) ⎮ undefined ⎮ null
selectedElementID ⎮ undefined ⎮ null
focusedElementID ⎮ undefined ⎮ null
searchResultsElementSearchResultSet ⎮ undefined ⎮ null
rootElementID ⎮ undefined ⎮ null
elements{[key: string]: Element}
useAppSidebarboolean
alternateRowColorboolean
contextMenuExtensionsArray<ContextMenuExtension>
decorateRowDecorateRow

InspectorSidebar

PropertyTypeDescription
elementElement ⎮ undefined ⎮ null
tooltipsObject
onValueChangedOnValueChanged ⎮ undefined ⎮ null
clientPluginClient
realClientClient
loggerLogger
extensionsArray<Function>

ErrorBlock

Displaying error messages in a red box.

PropertyTypeDescription
errorError ⎮ string ⎮ nullError message to display. Error object's stack or message property is used.
classNamestringAdditional className added to the container.

ErrorBoundary

Boundary catching errors and displaying an ErrorBlock instead.

PropertyTypeDescription
buildHeading(err: Error) => stringFunction to dynamically generate the heading of the ErrorBox.
headingstringHeading of the ErrorBox. Used as an alternative to buildHeading.
showStackbooleanWhether the stacktrace of the error is shown in the error box
childrenReactReactNodeCode that might throw errors that will be catched

File

Wrapper for loading file content from the file system.

PropertyTypeDescription
srcstringPath to the file in the file system
bufferstring ⎮ null ⎮ undefinedInitial content that should be shown while the file is loading
encodingstringEncoding to parse the contents of the file. Defaults to UTF-8.
onError(err: Error) => React.ReactNodeContent that should be rendered, when the file loading failed.
onLoading() => React.ReactNodeContent that should be rendered, while the file is loaded.
onData(content: string) => voidCallback when the data is successfully loaded.
onLoad(content: string) => React.ReactNodeContent that should be rendered, when the file is successfully loaded. This ususally should render the file's contents.

FileList

List the contents of a folder from the user's file system. The file system is watched for changes and this list will automatically update.

PropertyTypeDescription
srcstringPath to the folder
onError(err: Error) => React.ReactNode ⎮ null ⎮ undefinedContent to be rendered in case of an error
onLoad() => voidContent to be rendered while loading
onFiles(files: FileListFiles) => React.ReactNodeContent to be rendered when the file list is loaded

FileSelector

PropertyTypeDescription
onPathChanged(evtArgs: {path: string; isValid: boolean}) => void
placeholderTextstring
defaultPathstring
showHiddenFilesboolean

FilterRow

PropertyTypeDescription
childrenReactReactNode
addFilter(filter: Filter) => void
filterKeystring

FocusableBox

PropertyTypeDescription
onBlur(e: React.FocusEvent) => void
onFocus(e: React.FocusEvent) => void
focusableboolean

Glyph

PropertyTypeDescription
namestring
size8 ⎮ 10 ⎮ 12 ⎮ 16 ⎮ 18 ⎮ 20 ⎮ 24 ⎮ 32
variant'filled' ⎮ 'outline'
classNamestring
colorstring
styleReactCSSProperties
titlestring

HBox

PropertyTypeDescription
grow``
childWidth``
verticalAlign``

Heading

A heading component.

PropertyTypeDescription
levelnumberLevel of the heading. A number from 1-6. Where 1 is the largest heading.
childrenReactReactNodeChildren.

HighlightProvider

PropertyTypeDescription
textstring ⎮ undefined
childrenReactReactElement

Info

Shows an info box with some text and a symbol. Supported types: info | spinning | warning | error

PropertyTypeDescription
childrenReactReactNode
type'info' ⎮ 'spinning' ⎮ 'warning' ⎮ 'error'
smallboolean

Interactive

PropertyTypeDescription
isMovableAnchor(event: React.MouseEvent) => boolean
onMoveStart() => void
onMoveEnd() => void
onMove(top: number, left: number, event: MouseEvent) => void
idstring
movableboolean
hiddenboolean
movingboolean
growboolean
siblingsPartial
updateCursor(cursor?: string ⎮ null ⎮ undefined) => void
zIndexnumber
topnumber
leftnumber
minTopnumber
minLeftnumber
widthnumber ⎮ string
heightnumber ⎮ string
minWidthnumber
minHeightnumber
maxWidthnumber
maxHeightnumber
onCanResize(sides: ResizingSides) => void
onResizeStart() => void
onResizeEnd() => void
onResize(width: number, height: number) => void
resizingboolean
resizableboolean ⎮ ResizingSides
innerRef(elem: HTMLElement ⎮ null) => void
styleObject
classNamestring
childrenReactReactNode

Labeled

Vertically arranged section that starts with a label and includes standard margins

Link

PropertyTypeDescription
hrefstring
childrenReactReactNode
styleReactCSSProperties

Markdown

PropertyTypeDescription
sourcestring
styleCSSProperties

MarkerTimeline

PropertyTypeDescription
onClick(keys: Array<string>) => void
selectedstring ⎮ null ⎮ undefined
pointsDataPoint[]
lineHeightnumber
maxGapnumber

ModalOverlay

PropertyTypeDescription
onClose() => void
childrenReactReactNode

Orderable

PropertyTypeDescription
items{[key: string]: React.ReactNode}
orientation'horizontal' ⎮ 'vertical'
onChange(order: OrderableOrder, key: string) => void
orderOrderableOrder ⎮ null ⎮ undefined
classNamestring
reverseboolean
altKeyboolean
moveDelaynumber
dragOpacitynumber
ignoreChildEventsboolean

Panel

A Panel component.

PropertyTypeDescription
classNamestringClass name to customise styling.
floatingbooleanWhether this panel is floating from the rest of the UI. ie. if it has margin and a border.
growbooleanWhether the panel takes up all the space it can. Equivalent to the following CSS: height: 100%; width: 100%;
headingReactReactNodeHeading for this panel. If this is anything other than a string then no padding is applied to the heading.
childrenReactReactNodeContents of the panel.
paddedbooleanWhether the panel header and body have padding.
collapsablebooleanWhether the panel can be collapsed. Defaults to true
collapsedbooleanInitial state for panel if it is collapsable
accessoryReactReactNodeHeading for this panel. If this is anything other than a string then no padding is applied to the heading.

PathBreadcrumbs

PropertyTypeDescription
pathstring
isFileboolean
onClick(path: string) => void

Popover

PropertyTypeDescription
childrenReactReactNode
onDismissFunction
forceOpts{ minWidth?: number; skewLeft?: boolean; }

Radio

A radio button to toggle UI state

PropertyTypeDescription
checkedbooleanWhether the radio button is checked.
onChange(selected: boolean) => voidCalled when a state change is triggered
disabledboolean

ResizeSensor

Listener for resize events.

PropertyTypeDescription
onResize(e: UIEvent) => voidCallback when resize happened

RoundedSection

Section with a title, dropshadow, rounded border and white backgorund.

Recommended to be used inside a CenteredView

FilterToken

PropertyTypeDescription
filterFilter
focusedboolean
indexnumber
onFocus(focusedToken: number) => void
onBlur() => void
onDelete(deletedToken: number) => void
onReplace(index: number, filter: Filter) => void

SearchableManagedTable_immutable

PropertyTypeDescription
innerRef(ref: React.RefObject<any>) => voidReference to the table
defaultFiltersArray<Filter>Filters that are added to the filterbar by default

SearchableManagedTable

PropertyTypeDescription
innerRef(ref: React.RefObject<any>) => voidReference to the table
defaultFiltersArray<Filter>Filters that are added to the filterbar by default

Select

Dropdown to select from a list of options

PropertyTypeDescription
classNamestringAdditional className added to the element
options{ [key: string]: string; }The list of options to display
onChange(value: string) => voidDEPRECATED: Callback when the selected value changes. The callback is called with the displayed value.
onChangeWithKey(key: string) => voidCallback when the selected value changes. The callback is called with the key for the displayed value
selectedstring ⎮ null ⎮ undefinedSelected key
labelstringLabel shown next to the dropdown
growbooleanSelect box should take all available space
disabledbooleanWhether the user can interact with the select and change the selcted option

Sheet

Usage: <Sheet>{onHide => <YourSheetContent onHide={onHide} />}</Sheet>

PropertyTypeDescription
children(onHide: () => void) => React.ReactNode ⎮ undefinedFunction as child component (FaCC) to render the contents of the sheet. A onHide function is passed as argument, that can be called to remove the sheet.
onHideSheet() => void
setActiveSheet(sheet: ActiveSheet) => any
activeSheetActiveSheetFunction that is called when the sheet becomes hidden.

Sidebar

A resizable sidebar.

PropertyTypeDescription
position'left' ⎮ 'top' ⎮ 'right' ⎮ 'bottom'Position of the sidebar.
widthnumberDefault width of the sidebar. Only used for left/right sidebars.
minWidthnumberMinimum sidebar width. Only used for left/right sidebars.
maxWidthnumberMaximum sidebar width. Only used for left/right sidebars.
heightnumberDefault height of the sidebar.
minHeightnumberMinimum sidebar height. Only used for top/bottom sidebars.
maxHeightnumberMaximum sidebar height. Only used for top/bottom sidebars.
backgroundColorBackgroundColorPropertyBackground color.
onResize(width: number, height: number) => voidCallback when the sidebar size ahs changed.
childrenReactReactNodeContents of the sidebar.
classNamestringClass name to customise styling.

StackTrace

Display a stack trace

PropertyTypeDescription
childrenChild[]
reasonstringReason for the crash, displayed above the trace
isCrashbooleanDoes the trace show a crash
paddedbooleanDisplay the stack trace in a padded container
backgroundColorstringBackground color of the stack trace

StarButton

PropertyTypeDescription
starredboolean
onStar() => void

ManagedTable

PropertyTypeDescription
columnsTableColumnsColumn definitions.
rowsTableRows_immutableRow definitions.
tableKeystring
floatingbooleanWhether the table has a border.
multilinebooleanWhether a row can span over multiple lines. Otherwise lines cannot wrap and are truncated.
autoHeightbooleanWhether the body is scrollable. When this is set to true then the table is not scrollable.
columnOrderTableColumnOrderOrder of columns.
columnSizesTableColumnSizesInitial size of the columns.
filterValuestringValue to filter rows on. Alternative to the filter prop.
filter(row: TableBodyRow) => booleanCallback to filter rows.
onRowHighlighted(keys: TableHighlightedRows) => voidCallback when the highlighted rows change.
highlightableRowsbooleanWhether rows can be highlighted or not.
multiHighlightbooleanWhether multiple rows can be highlighted or not.
rowLineHeightnumberHeight of each row.
stickyBottombooleanThis makes it so the scroll position sticks to the bottom of the window. Useful for streaming data like requests, logs etc.
onAddFilterTableOnAddFilterUsed by SearchableTable to add filters for rows.
zebrabooleanEnable or disable zebra striping.
hideHeaderbooleanWhether to hide the column names at the top of the table.
highlightedRowsSetRows that are highlighted initially.
buildContextMenuItems() => MenuTemplateAllows to create context menu items for rows.
onSort(order: TableRowSortOrder) => voidCallback when sorting changes.
initialSortOrderTableRowSortOrderInitial sort order of the table.
horizontallyScrollablebooleanTable scroll horizontally, if needed

TableHead

PropertyTypeDescription
columnOrderTableColumnOrder
onColumnOrder(order: TableColumnOrder) => void
columnsTableColumns
sortOrderTableRowSortOrder
onSortTableOnSort
columnSizesTableColumnSizes
onColumnResizeTableOnColumnResize
horizontallyScrollableboolean

TableRow

PropertyTypeDescription
columnSizesTableColumnSizes
columnKeysTableColumnKeys
onMouseDown(e: React.MouseEvent, row: TableBodyRow, index: number) => void
onMouseEnter( e: React.MouseEvent, row: TableBodyRow, index: number, ) => void
multilineboolean
rowLineHeightnumber
highlightedboolean
rowTableBodyRow
indexnumber
styleReact.CSSProperties ⎮ undefined
onAddFilterTableOnAddFilter
zebraboolean

renderValue

Tabs

A Tabs component.

PropertyTypeDescription
onActive(key: string ⎮ null ⎮ undefined) => voidCallback for when the active tab has changed.
defaultActivestringThe key of the default active tab.
activestring ⎮ null ⎮ undefinedThe key of the currently active tab.
childrenReact.ReactElement<TabProps>[] ⎮ React.ReactElement<TabProps>Tab elements.
orderablebooleanWhether the tabs can be reordered by the user.
onOrder(order: Array<string>) => voidCallback when the tab order changes.
orderArray<string>Order of tabs.
persistbooleanWhether to include the contents of every tab in the DOM and just toggle its visibility.
newablebooleanWhether to include a button to create additional items.
onNew() => voidCallback for when the new button is clicked.
beforeArray<React.ReactNode>Elements to insert before all tabs in the tab list.
afterArray<React.ReactNode>Elements to insert after all tabs in the tab list.
classicbooleanBy default tabs are rendered in mac-style tabs, with a negative offset. By setting classic mode the classic style is rendered.

TabsContainer

PropertyTypeDescription
childrenany

ToggleButton

Toggle Button.

Usage

import {ToggleButton} from 'flipper';
<ToggleButton onClick={handler} toggled={boolean}/>
PropertyTypeDescription
onClick(event: React.MouseEvent) => voidonClick handler.
toggledbooleanwhether the button is toggled
classNamestring
labelstring
tooltipstring
largeboolean

ToolbarIcon

PropertyTypeDescription
activeboolean
iconstring
titlestring
onClick() => void

Tooltip

PropertyTypeDescription
titleReactReactNodeContent shown in the tooltip
childrenReactReactNodeComponent that will show the tooltip
optionsTooltipOptions

TooltipProvider

ViewWithSize

PropertyTypeDescription
onSize(width: number, height: number) => any

VirtualList

PropertyTypeDescription
dataArray<any>
renderRow(data: any, i: number) => any
rowHeightnumber
overscanCountnumber
syncboolean
wrapInner(data: any) => any