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