Skip to main content

Scoutbar Features

See all props and how they work with scoutbar



Scoutbar has created a seamless use of general classes to override scoutbar theme, currently you can customize the experience for the following.

tutorial

Type -> Boolean

Default -> true

Allows you the ability to disable / hide scoutbar tutorial hints. i'e the section that tells users to navigate with the arrows or tabs. e.g

<ScoutBar tutorial={false} ... />

acknowledgement

Type -> Boolean

Default -> true

Show the scoutbar acknowledgement logo on the top right of the input bar.

<ScoutBar acknowledgement={true} ... />

bodyScroll

Type -> Boolean

Default -> false

Enable double scrolling and allow users to scroll on body

<ScoutBar bodyScroll={true} ... />

disableFocusTrap

Type -> Boolean

Default -> false

Allow users to tab out of the scoutbar

<ScoutBar disableFocusTrap ... />

barWidth

Type -> String

Default -> 650px

Set the scoutbar width

<ScoutBar barWidth="650px" ... />

showRecentSearch

Type -> boolean

Default -> true

Tells Scoutbar to hide or show the recent search section.

<ScoutBar showRecentSearch={true} ... />

revealScoutbar

Type -> boolean

Default -> false

Reveal the scoutbar with an external action. PS forcefully opens the scoutbar

<ScoutBar revealScoutbar={// your state hook here } ... />

autocomplete

Type -> string

Default -> 'off'

Specifies whether or not the scoutbar field should have autocomplete enabled.

<ScoutBar autocomplete="off" ... />

noResultsOnEmptySearch

Type -> boolean

Default -> false

Hides all scoutbar actions by default and you get this


<ScoutBar noResultsOnEmptySearch ... />

noResultsOnEmptySearch

Type -> boolean

Default -> false

Keep data in input even after scoutbar is closed

<ScoutBar persistInput ... />

disableClickOutside

Type -> boolean

Default -> false

Disable click outside to close scoutbar

<ScoutBar disableClickOutside ... />

disableSnackbar

Type -> boolean

Default -> false

Disable the scoutbar snackbar

<ScoutBar disableSnackbar ... />

UI Documentation

See more about customizing the UI Here