This component is used to do the following:
WaitObserver a certain period of time before rendering a component
Show timeout state, if the component is visible for a certain time period
A use case for this can be to show a loading state after waiting a certain period of time for data to load, and if the loading takes too long, show a timeout state.
prop
type
required
default
description
delay
number
no
-
Delay before rendering a component.
timeout
number
no
-
Timeout duration
onTimeout
Function
no
-
A callback function executed when a timeout occurs.
onRetry
Function
no
-
A callback function executed when retry method is called from the child component.
children
ReactNode | (() => ReactNode)
no
-
testID
string
no
-
Used to locate this view in end-to-end tests.
BlueBase provides observer components. They observe different aspects of application state so relevant UI state can be rendered.
There are currently four observer components:
prop
type
required
default
description
error
Error
no
-
If an error is passed as a prop, shows an error state.
checkError
(props) => Error
no
-
A function to check error based on props.
errorComponent
Component
no
-
Component to show the error state.
children
ReactNode | (() => ReactNode)
no
-
Children are rendered when there are no error.
testID
string
no
-
Used to locate this view in end-to-end tests.
prop
type
required
default
description
isLoading
(props) => boolean
no
-
A function used to check if data is loading.
isEmpty
(props) => boolean
no
-
A function used to check if data is empty.
loading
boolean
no
-
Loading flag.
data
any
no
-
Input data.
children
ReactNode | Function
no
-
Children, data is passed in the param object of the render prop function. This object is typed as DataObserverChildrenProps.
testID
string
no
-
Used to locate this view in end-to-end tests.
prop
type
required
default
description
hoverDelayInMs
number
no
0
Milliseconds to delay hover trigger.
hoverOffDelayInMs
number
no
0
Milliseconds to delay hover-off trigger.
onHoverChanged
(HoverObserverState) => void
no
-
Called with named argument isHovering when isHovering is set or unset.
onMouseEnter
Function
no
-
Defaults to set isHovering.
onMouseLeave
Function
no
-
Defaults to unsetting isHovering.
onMouseOver
Function
no
-
onMouseOut
Function
no
-
children
ReactNode | (HoverObserverState) => ReactNode
no
-
testID
string
no
-
Used to locate this view in end-to-end tests.