UI kit reference

code/editor/find/FindBar

import { … } from 'zidane-ui/code/editor'ui/src/code/editor/find/FindBar.tsx

Components#

The find bar over a file view or diffs; renders nothing while find is closed.

TypeScript

function FindBar(props: FindBarProps): Element | null

Parameters
Name	Type	Description
props	`FindBarProps`	`find`: the state from `useFind`; `label`: the box's placeholder and accessible name.

Element | null

FindBar props
Name	Type	Description
className?	`string`	Extra classes on the root element.
find	`{ asked: number; capped: boolean; caseSensitive: boolean; close: () => void; index: number; jumpTo: (q: string, o: FindOptions, at: Omit<LineMatch, 'end'>) => void; open: boolean; query: string; searching: boolean; setQuery: Dispatch<SetStateAction<string>>; show: () => void; step: (direction: -1 \| 1) => void; toggleCase: () => void; total: number }`	The find to drive, from `useFind`.
label	`string`	The search box's placeholder and the bar's accessible name ("Find in file").
style?	`CSSProperties`	Inline styles on the root element, merged after the component's own.

Props for FindBar.

TypeScript

interface FindBarProps

FindBarProps properties
Name	Type	Description
className?	`string`	Extra classes on the root element.
find	`{ asked: number; capped: boolean; caseSensitive: boolean; close: () => void; index: number; jumpTo: (q: string, o: FindOptions, at: Omit<LineMatch, 'end'>) => void; open: boolean; query: string; searching: boolean; setQuery: Dispatch<SetStateAction<string>>; show: () => void; step: (direction: -1 \| 1) => void; toggleCase: () => void; total: number }`	The find to drive, from `useFind`.
label	`string`	The search box's placeholder and the bar's accessible name ("Find in file").
style?	`CSSProperties`	Inline styles on the root element, merged after the component's own.