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.

Property	Type	Description
onMouseDown	(event: React.MouseEvent) => any	onMouseUp handler.
onClick	(event: React.MouseEvent) => any	onClick handler.
disabled	boolean	Whether this button is disabled.
large	boolean	Whether this button is large. Increases padding and line-height.
compact	boolean	Whether this button is compact. Decreases padding and line-height.
type	'primary' ⎮ 'success' ⎮ 'warning' ⎮ 'danger'	Type of button.
children	ReactReactNode	Children.
dropdown	Array<MenuItemConstructorOptions>	Dropdown menu template shown on click.
icon	string	Name of the icon dispalyed next to the text
iconSize	IconSize	Size of the icon in pixels.
selected	boolean	For toggle buttons, if the button is selected
pulse	boolean	Button is pulsing
href	string	URL to open in the browser on click
depressed	boolean	Whether the button should render depressed into its socket
iconVariant	'filled' ⎮ 'outline'	Style of the icon. filled is the default
padded	boolean	Whether the button should have additional padding left and right.

ButtonGroup

Group a series of buttons together.

<ButtonGroup>

<Button>One</Button>

<Button>Two</Button>

<Button>Three</Button>

</ButtonGroup>

Property	Type	Description
children	ReactReactNode

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>

Property	Type	Description
children	ReactReactNode	Children.
iconSize	8 ⎮ 10 ⎮ 12 ⎮ 16 ⎮ 18 ⎮ 20 ⎮ 24 ⎮ 32	Size of the button seperator icon in pixels.
icon	string	Name of the icon seperating the buttons. Defaults to 'chevron-right'.

ButtonNavigationGroup

Button group to navigate back and forth.

Property	Type	Description
canGoBack	boolean	Back button is enabled
canGoForward	boolean	Forwards button is enabled
onBack	() => void	Callback when back button is clicked
onForward	() => void	Callback 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

Property	Type	Description
checked	boolean	Whether the checkbox is checked.
onChange	(checked: boolean) => void	Called when a state change is triggered
disabled	boolean

Console

Property	Type	Description
client	PluginClient
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'}

Property	Type	Description
items	Array<MenuItemConstructorOptions>	List of items in the context menu. Used for static menus.
buildItems	() => MenuTemplate	Function to generate the menu. Called right before the menu is showed. Used for dynamic menus.
children	ReactReactNode	Nodes that should have a context menu
component	React.ComponentType<any> ⎮ string	The 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

Property	Type	Description
path	Array<string>
type	string
value	any
extra	any
setValue	DataInspectorSetValue ⎮ null ⎮ undefined

DataInspector

An expandable data inspector.

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

DataPreview

Property	Type	Description
path	string[]
type	string
value	any
depth	number
extractValue	( value: any, depth: number, path: string[], ) => ⎮ { mutable: boolean; type: string; value: any; extra?: any; } ⎮ undefined ⎮ null
maxProperties	number

ManagedDataInspector

Wrapper around DataInspector that handles expanded state.

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

Property	Type	Description
data	any	Object to inspect.
diff	any	Object to compare with the provided data property. Differences will be styled accordingly in the UI.
expandRoot	boolean	Whether to expand the root by default.
extractValue	DataValueExtractor	An optional callback that will explode a value into its type and value. Useful for inspecting serialised data.
setValue	(path: Array<string>, val: any) => void	Callback when a value is edited.
onDelete	(path: Array<string>) => void	Callback when a delete action is invoked.
onRenderName	( path: Array<string>, name: string, highlighter: HighlightManager, ) => React.ReactElement	Render callback that can be used to customize the rendering of object keys.
onRenderDescription	(description: React.ReactElement) => React.ReactElement	Render callback that can be used to customize the rendering of object values.
collapsed	boolean	Whether all objects and arrays should be collapsed by default.
tooltips	Object	Object of all properties that will have tooltips
filter	string	Filter nodes by some search text

SearchableDataInspector

TimelineDataDescription

Property	Type	Description
canSetCurrent	boolean
timeline	{ time: TimePoint[]; current: string; }
onClick	(selected: string) => void

Elements

Property	Type	Description
root	ElementID ⎮ undefined ⎮ null
selected	ElementID ⎮ undefined ⎮ null
focused	ElementID ⎮ undefined ⎮ null
searchResults	ElementSearchResultSet ⎮ undefined ⎮ null
elements	{[key: string]: Element}
onElementSelected	(key: ElementID) => void
onElementExpanded	(key: ElementID, deep: boolean) => void
onElementHovered	((key: ElementID ⎮ undefined ⎮ null) => void) ⎮ undefined ⎮ null
alternateRowColor	boolean
contextMenuExtensions	Array<ContextMenuExtension>
decorateRow	(e: Element) => ReactElement<any> ⎮ undefined ⎮ null

ElementsInspector

Property	Type	Description
onElementExpanded	(key: ElementID, deep: boolean) => void
onElementSelected	(key: ElementID) => void
onElementHovered	((key: ElementID ⎮ undefined ⎮ null) => any) ⎮ undefined ⎮ null
selected	ElementID ⎮ undefined ⎮ null
focused	ElementID ⎮ undefined ⎮ null
searchResults	ElementSearchResultSet ⎮ undefined ⎮ null
root	ElementID ⎮ undefined ⎮ null
elements	{[key: string]: Element}
useAppSidebar	boolean
alternateRowColor	boolean
contextMenuExtensions	Array<ContextMenuExtension>
decorateRow	DecorateRow

InspectorSidebar

Property	Type	Description
element	Element ⎮ undefined ⎮ null
tooltips	Object
onValueChanged	OnValueChanged ⎮ undefined ⎮ null
client	PluginClient
realClient	Client
logger	Logger
extensions	Array<Function>

ErrorBlock

Displaying error messages in a red box.

Property	Type	Description
error	Error ⎮ string ⎮ null	Error message to display. Error object's stack or message property is used.
className	string	Additional className added to the container.

ErrorBoundary

Boundary catching errors and displaying an ErrorBlock instead.

Property	Type	Description
buildHeading	(err: Error) => string	Function to dynamically generate the heading of the ErrorBox.
heading	string	Heading of the ErrorBox. Used as an alternative to buildHeading.
showStack	boolean	Whether the stacktrace of the error is shown in the error box
children	ReactReactNode	Code that might throw errors that will be catched

File

Wrapper for loading file content from the file system.

Property	Type	Description
src	string	Path to the file in the file system
buffer	string ⎮ null ⎮ undefined	Initial content that should be shown while the file is loading
encoding	string	Encoding to parse the contents of the file. Defaults to UTF-8.
onError	(err: Error) => React.ReactNode	Content that should be rendered, when the file loading failed.
onLoading	() => React.ReactNode	Content that should be rendered, while the file is loaded.
onData	(content: string) => void	Callback when the data is successfully loaded.
onLoad	(content: string) => React.ReactNode	Content 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.

Property	Type	Description
src	string	Path to the folder
onError	(err: Error) => React.ReactNode ⎮ null ⎮ undefined	Content to be rendered in case of an error
onLoad	() => void	Content to be rendered while loading
onFiles	(files: FileListFiles) => React.ReactNode	Content to be rendered when the file list is loaded

FileSelector

Property	Type	Description
onPathChanged	(evtArgs: {path: string; isValid: boolean}) => void
placeholderText	string
defaultPath	string
showHiddenFiles	boolean

FilterRow

Property	Type	Description
children	ReactReactNode
addFilter	(filter: Filter) => void
filterKey	string

FocusableBox

Property	Type	Description
onBlur	(e: React.FocusEvent) => void
onFocus	(e: React.FocusEvent) => void
focusable	boolean

Glyph

Property	Type	Description
name	string
size	8 ⎮ 10 ⎮ 12 ⎮ 16 ⎮ 18 ⎮ 20 ⎮ 24 ⎮ 32
variant	'filled' ⎮ 'outline'
className	string
color	string
style	ReactCSSProperties
title	string

HBox

@deprecated use Layout.Left / Layout.Right or Layout.Horizonta from flipper-plugin instead

Property	Type	Description
grow	``
childWidth	``
verticalAlign	``

Heading

A heading component.

Property	Type	Description
level	number	Level of the heading. A number from 1-6. Where 1 is the largest heading.
children	ReactReactNode	Children.

HighlightProvider

Property	Type	Description
text	string ⎮ undefined
children	ReactReactElement

Info

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

Property	Type	Description
children	ReactReactNode
type	'info' ⎮ 'spinning' ⎮ 'warning' ⎮ 'error'
small	boolean

Interactive

Property	Type	Description
isMovableAnchor	(event: React.MouseEvent) => boolean
onMoveStart	() => void
onMoveEnd	() => void
onMove	(top: number, left: number, event: MouseEvent) => void
id	string
movable	boolean
hidden	boolean
moving	boolean
grow	boolean
siblings	Partial
updateCursor	(cursor?: string ⎮ null ⎮ undefined) => void
zIndex	number
top	number
left	number
minTop	number
minLeft	number
width	number ⎮ string
height	number ⎮ string
minWidth	number
minHeight	number
maxWidth	number
maxHeight	number
onCanResize	(sides: ResizingSides) => void
onResizeStart	() => void
onResizeEnd	() => void
onResize	(width: number, height: number) => void
resizing	boolean
resizable	boolean ⎮ ResizingSides
innerRef	(elem: HTMLElement ⎮ null) => void
style	Object
className	string
children	ReactReactNode
gutterWidth	number

Labeled

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

Link

Property	Type	Description
href	string
children	ReactReactNode
style	ReactCSSProperties
onClick	((event: React.MouseEvent<any>) => void) ⎮ undefined

Markdown

Property	Type	Description
source	string
style	CSSProperties

MarkerTimeline

Property	Type	Description
onClick	(keys: Array<string>) => void
selected	string ⎮ null ⎮ undefined
points	DataPoint[]
lineHeight	number
maxGap	number

ModalOverlay

Property	Type	Description
onClose	() => void
children	ReactReactNode

Orderable

Property	Type	Description
items	{[key: string]: React.ReactNode}
orientation	'horizontal' ⎮ 'vertical'
onChange	(order: OrderableOrder, key: string) => void
order	OrderableOrder ⎮ null ⎮ undefined
className	string
reverse	boolean
altKey	boolean
moveDelay	number
dragOpacity	number
ignoreChildEvents	boolean

Panel

A Panel component.

Property	Type	Description
className	string	Class name to customise styling.
floating	boolean	Whether this panel is floating from the rest of the UI. ie. if it has margin and a border.
grow	boolean	Whether the panel takes up all the space it can. Equivalent to the following CSS: height: 100%; width: 100%;
heading	ReactReactNode	Heading for this panel. If this is anything other than a string then no padding is applied to the heading.
children	ReactReactNode	Contents of the panel.
padded	boolean	Whether the panel header and body have padding.
collapsable	boolean	Whether the panel can be collapsed. Defaults to true
collapsed	boolean	Initial state for panel if it is collapsable
accessory	ReactReactNode	Heading for this panel. If this is anything other than a string then no padding is applied to the heading.
style	CSSProperties

PathBreadcrumbs

Property	Type	Description
path	string
isFile	boolean
onClick	(path: string) => void

Popover

Property	Type	Description
children	ReactReactNode
onDismiss	Function
forceOpts	{ minWidth?: number; skewLeft?: boolean; }

Popover2.tsx

Popover element to be used as a stopgap until we adopt a UI framework. I don't recommend using this, as it will likely be removed in future. Must be nested under a PopoverProvider at some level, usually it is at the top level app so you shouldn't need to add it.

PopoverProvider

Property	Type	Description
children	ReactReactNode

Radio

A radio button to toggle UI state

Property	Type	Description
checked	boolean	Whether the radio button is checked.
onChange	(selected: boolean) => void	Called when a state change is triggered
disabled	boolean

RequireLogin

ResizeSensor

Listener for resize events.

Property	Type	Description
onResize	(e: UIEvent) => void	Callback when resize happened

RoundedSection

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

Recommended to be used inside a CenteredView

FilterToken

Property	Type	Description
filter	Filter
focused	boolean
index	number
onFocus	(focusedToken: number) => void
onBlur	() => void
onDelete	(deletedToken: number) => void
onReplace	(index: number, filter: Filter) => void

SearchableManagedTable_immutable

Property	Type	Description
innerRef	(ref: React.RefObject<any>) => void	Reference to the table
defaultFilters	Array<Filter>	Filters that are added to the filterbar by default

SearchableManagedTable

Property	Type	Description
innerRef	(ref: React.RefObject<any>) => void	Reference to the table
defaultFilters	Array<Filter>	Filters that are added to the filterbar by default

Select

Dropdown to select from a list of options

Property	Type	Description
className	string	Additional className added to the element
options	{ [key: string]: string; }	The list of options to display
onChange	(value: string) => void	DEPRECATED: Callback when the selected value changes. The callback is called with the displayed value.
onChangeWithKey	(key: string) => void	Callback when the selected value changes. The callback is called with the key for the displayed value
selected	string ⎮ null ⎮ undefined	Selected key
label	string	Label shown next to the dropdown
grow	boolean	Select box should take all available space
disabled	boolean	Whether the user can interact with the select and change the selcted option
style	CSSProperties

Sheet

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

Property	Type	Description
children	(onHide: () => void) => React.ReactNode ⎮ undefined	Function 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
activeSheet	ActiveSheet	Function that is called when the sheet becomes hidden.

Sidebar

A resizable sidebar.

Property	Type	Description
position	'left' ⎮ 'top' ⎮ 'right' ⎮ 'bottom'	Position of the sidebar.
width	number	Default width of the sidebar. Only used for left/right sidebars.
minWidth	number	Minimum sidebar width. Only used for left/right sidebars.
maxWidth	number	Maximum sidebar width. Only used for left/right sidebars.
height	number	Default height of the sidebar.
minHeight	number	Minimum sidebar height. Only used for top/bottom sidebars.
maxHeight	number	Maximum sidebar height. Only used for top/bottom sidebars.
backgroundColor	Property.BackgroundColor	Background color.
onResize	(width: number, height: number) => void	Callback when the sidebar size ahs changed.
children	ReactReactNode	Contents of the sidebar.
className	string	Class name to customise styling.
gutter	boolean	use a Sandy themed large gutter

StackTrace

Display a stack trace

Property	Type	Description
children	Child[]
reason	string	Reason for the crash, displayed above the trace
isCrash	boolean	Does the trace show a crash
padded	boolean	Display the stack trace in a padded container
backgroundColor	string	Background color of the stack trace

StarButton

Property	Type	Description
starred	boolean
onStar	() => void

ManagedTable

Property	Type	Description
columns	TableColumns	Column definitions.
rows	TableRows_immutable	Row definitions.
tableKey	string
floating	boolean	Whether the table has a border.
multiline	boolean	Whether a row can span over multiple lines. Otherwise lines cannot wrap and are truncated.
autoHeight	boolean	Whether the body is scrollable. When this is set to true then the table is not scrollable.
columnOrder	TableColumnOrder	Order of columns.
columnSizes	TableColumnSizes	Initial size of the columns.
filterValue	string	Value to filter rows on. Alternative to the filter prop.
filter	(row: TableBodyRow) => boolean	Callback to filter rows.
onRowHighlighted	(keys: TableHighlightedRows) => void	Callback when the highlighted rows change.
highlightableRows	boolean	Whether rows can be highlighted or not.
multiHighlight	boolean	Whether multiple rows can be highlighted or not.
rowLineHeight	number	Height of each row.
stickyBottom	boolean	This makes it so the scroll position sticks to the bottom of the window. Useful for streaming data like requests, logs etc.
onAddFilter	TableOnAddFilter	Used by SearchableTable to add filters for rows.
zebra	boolean	Enable or disable zebra striping.
hideHeader	boolean	Whether to hide the column names at the top of the table.
highlightedRows	Set	Rows that are highlighted initially.
buildContextMenuItems	() => MenuTemplate	Allows to create context menu items for rows.
onSort	(order: TableRowSortOrder) => void	Callback when sorting changes.
initialSortOrder	TableRowSortOrder	Initial sort order of the table.
horizontallyScrollable	boolean	Table scroll horizontally, if needed

TableHead

Property	Type	Description
columnOrder	TableColumnOrder
onColumnOrder	(order: TableColumnOrder) => void
columns	TableColumns
sortOrder	TableRowSortOrder
onSort	TableOnSort
columnSizes	TableColumnSizes
onColumnResize	TableOnColumnResize
horizontallyScrollable	boolean

TableRow

Property	Type	Description
columnSizes	TableColumnSizes
columnKeys	TableColumnKeys
onMouseDown	(e: React.MouseEvent, row: TableBodyRow, index: number) => void
onMouseEnter	( e: React.MouseEvent, row: TableBodyRow, index: number, ) => void
multiline	boolean
rowLineHeight	number
highlighted	boolean
row	TableBodyRow
index	number
style	React.CSSProperties ⎮ undefined
onAddFilter	TableOnAddFilter
zebra	boolean

renderValue

Tabs

A Tabs component.

Property	Type	Description
onActive	(key: string ⎮ null ⎮ undefined) => void	Callback for when the active tab has changed.
defaultActive	string	The key of the default active tab.
active	string ⎮ null ⎮ undefined	The key of the currently active tab.
children	React.ReactElement<TabProps>[] ⎮ React.ReactElement<TabProps>	Tab elements.
orderable	boolean	Whether the tabs can be reordered by the user.
onOrder	(order: Array<string>) => void	Callback when the tab order changes.
order	Array<string>	Order of tabs.
persist	boolean	Whether to include the contents of every tab in the DOM and just toggle its visibility.
newable	boolean	Whether to include a button to create additional items.
onNew	() => void	Callback for when the new button is clicked.
before	Array<React.ReactNode>	Elements to insert before all tabs in the tab list.
after	Array<React.ReactNode>	Elements to insert after all tabs in the tab list.
classic	boolean	By default tabs are rendered in mac-style tabs, with a negative offset. By setting classic mode the classic style is rendered.

TabsContainer

Property	Type	Description
children	any

ToggleButton

Toggle Button.

Usage

import {ToggleButton} from '../ui';

<ToggleButton onClick={handler} toggled={boolean}/>

Property	Type	Description
onClick	(event: React.MouseEvent) => void	onClick handler.
toggled	boolean	whether the button is toggled
className	string
label	string
tooltip	string
large	boolean

Toolbar

Property	Type	Description
children	ReactReactNode
position	'bottom' ⎮ 'top'
compact	boolean
style	ReactCSSProperties

ToolbarIcon

Property	Type	Description
active	boolean
icon	string
title	string
onClick	() => void

Tooltip

Property	Type	Description
title	ReactReactNode	Content shown in the tooltip
children	ReactReactNode	Component that will show the tooltip
options	TooltipOptions

TooltipProvider

ViewWithSize

Property	Type	Description
onSize	(width: number, height: number) => any

VirtualList

Property	Type	Description
data	Array<any>
renderRow	(data: any, i: number) => any
rowHeight	number
overscanCount	number
sync	boolean
wrapInner	(data: any) => any