React Native Spotlight Tour - API Reference

React Native Spotlight Tour - API Reference

Table of contents

Interfaces

Type Aliases

Functions

Type Aliases

BackdropPressBehavior

Ƭ BackdropPressBehavior: "continue" | "stop" | (options: SpotlightTour) => void

Defined in

package/src/lib/SpotlightTour.context.ts:68

ChildFn

Ƭ ChildFn<T>: (value: T) => ReactNode

Type parameters

Name
T

Type declaration

▸ (value): ReactNode

An alias of what a React child looks when passed as function.

Parameters
Name Type
value T
Returns

ReactNode

Defined in

package/src/helpers/common.ts:21

Motion

Ƭ Motion: "bounce" | "slide" | "fade"

Possible motion effect for the tour spotlight:

  • bounce
  • slide
  • fade

Defined in

package/src/lib/SpotlightTour.context.ts:11

Optional

Ƭ Optional<T>: T | undefined

Makes the target optional. I.e, it can be the target type or undefined.

Type parameters

Name
T

Defined in

package/src/helpers/common.ts:16

Shape

Ƭ Shape: "circle" | "rectangle"

Possible shape for the tour spotlight:

  • circle
  • rectangle

Defined in

package/src/lib/SpotlightTour.context.ts:18

Functions

AttachStep

▸ AttachStep<T>(props): ReactElement

React functional component used to attach and step to another component by only wrapping it. Use its props to customize the behavior.

Type parameters

Name
T

Parameters

Name Type Description
props AttachStepProps<T> the component props

Returns

ReactElement

an AttachStep React element

Defined in

package/src/lib/components/attach-step/AttachStep.component.tsx:54

SpotlightTourProvider

▸ SpotlightTourProvider(props): ReactNode

React provider component to get access to the SpotlightTour context.

Parameters

Name Type
props SpotlightTourProviderProps & RefAttributes<SpotlightTour>

Returns

ReactNode

Defined in

node_modules/@types/react/index.d.ts:393

TourBox

▸ TourBox(props): ReactElement

A built-in TourBox component which can be used as a tooltip containder for each step. While it’s highly customizable, it’s not required and can be replaced by your own component.

Parameters

Name Type Description
props TourBoxProps the component props

Returns

ReactElement

A TourBox React element

Defined in

package/src/lib/components/tour-box/TourBox.component.tsx:71

arrow

▸ arrow(options): Middleware

Provides data to position an inner element of the floating element so that it appears centered to the reference element.

Parameters

Name Type
options ArrowOptions | Derivable<ArrowOptions>

Returns

Middleware

See

https://floating-ui.com/docs/arrow

Defined in

node_modules/@floating-ui/core/src/middleware/arrow.d.ts:20

autoPlacement

▸ autoPlacement(options?): Middleware

Optimizes the visibility of the floating element by choosing the placement that has the most space available automatically, without needing to specify a preferred placement. Alternative to flip.

Parameters

Name Type
options? Partial<Partial<{ altBoundary: boolean ; boundary: any ; elementContext: ElementContext ; padding: Padding ; rootBoundary: RootBoundary }> & { alignment: null | Alignment ; allowedPlacements: Placement[] ; autoAlignment: boolean ; crossAxis: boolean }> | Derivable<Partial<Partial<{ altBoundary: boolean ; boundary: any ; elementContext: ElementContext ; padding: Padding ; rootBoundary: RootBoundary }> & { alignment: null | Alignment ; allowedPlacements: Placement[] ; autoAlignment: boolean ; crossAxis: boolean }>>

Returns

Middleware

See

https://floating-ui.com/docs/autoPlacement

Defined in

node_modules/@floating-ui/core/src/middleware/autoPlacement.d.ts:35

flip

▸ flip(options?): Middleware

Optimizes the visibility of the floating element by flipping the placement in order to keep it in view when the preferred placement(s) will overflow the clipping boundary. Alternative to autoPlacement.

Parameters

Name Type
options? Partial<Partial<{ altBoundary: boolean ; boundary: any ; elementContext: ElementContext ; padding: Padding ; rootBoundary: RootBoundary }> & { crossAxis: boolean ; fallbackAxisSideDirection: "start" | "end" | "none" ; fallbackPlacements: Placement[] ; fallbackStrategy: "bestFit" | "initialPlacement" ; flipAlignment: boolean ; mainAxis: boolean }> | Derivable<Partial<Partial<{ altBoundary: boolean ; boundary: any ; elementContext: ElementContext ; padding: Padding ; rootBoundary: RootBoundary }> & { crossAxis: boolean ; fallbackAxisSideDirection: "start" | "end" | "none" ; fallbackPlacements: Placement[] ; fallbackStrategy: "bestFit" | "initialPlacement" ; flipAlignment: boolean ; mainAxis: boolean }>>

Returns

Middleware

See

https://floating-ui.com/docs/flip

Defined in

node_modules/@floating-ui/core/src/middleware/flip.d.ts:44

hide

▸ hide(options?): Middleware

Provides data to hide the floating element in applicable situations, such as when it is not in the same clipping context as the reference element.

Parameters

Name Type
options? Partial<Partial<{ altBoundary: boolean ; boundary: any ; elementContext: ElementContext ; padding: Padding ; rootBoundary: RootBoundary }> & { strategy: "referenceHidden" | "escaped" }> | Derivable<Partial<Partial<{ altBoundary: boolean ; boundary: any ; elementContext: ElementContext ; padding: Padding ; rootBoundary: RootBoundary }> & { strategy: "referenceHidden" | "escaped" }>>

Returns

Middleware

See

https://floating-ui.com/docs/hide

Defined in

node_modules/@floating-ui/core/src/middleware/hide.d.ts:14

inline

▸ inline(options?): Middleware

Provides improved positioning for inline reference elements that can span over multiple lines, such as hyperlinks or range selections.

Parameters

Name Type
options? Partial<{ padding: Padding ; x: number ; y: number }> | Derivable<Partial<{ padding: Padding ; x: number ; y: number }>>

Returns

Middleware

See

https://floating-ui.com/docs/inline

Defined in

node_modules/@floating-ui/core/src/middleware/inline.d.ts:25

offset

▸ offset(options?): Middleware

Modifies the placement by translating the floating element along the specified axes. A number (shorthand for mainAxis or distance), or an axes configuration object may be passed.

Parameters

Name Type
options? OffsetOptions

Returns

Middleware

See

https://floating-ui.com/docs/offset

Defined in

node_modules/@floating-ui/core/src/middleware/offset.d.ts:37

shift

▸ shift(options?): Middleware

Optimizes the visibility of the floating element by shifting it in order to keep it in view when it will overflow the clipping boundary.

Parameters

Name Type
options? Partial<Partial<{ altBoundary: boolean ; boundary: any ; elementContext: ElementContext ; padding: Padding ; rootBoundary: RootBoundary }> & { crossAxis: boolean ; limiter: { fn: (state: MiddlewareState) => Coords ; options?: any } ; mainAxis: boolean }> | Derivable<Partial<Partial<{ altBoundary: boolean ; boundary: any ; elementContext: ElementContext ; padding: Padding ; rootBoundary: RootBoundary }> & { crossAxis: boolean ; limiter: { fn: (state: MiddlewareState) => Coords ; options?: any } ; mainAxis: boolean }>>

Returns

Middleware

See

https://floating-ui.com/docs/shift

Defined in

node_modules/@floating-ui/core/src/middleware/shift.d.ts:30

useSpotlightTour

▸ useSpotlightTour(): SpotlightTour

React hook to access the SpotlightTour context.

Returns

SpotlightTour

the SpotlightTour context

Defined in

package/src/lib/SpotlightTour.context.ts:225