# code/editor/find/FindBar (zidane-ui/code/editor)

Import: `import { … } from 'zidane-ui/code/editor'`. Source: [ui/src/code/editor/find/FindBar.tsx](https://github.com/Tahul/zidane/blob/main/ui/src/code/editor/find/FindBar.tsx).

## Components

### `FindBar`

Component.

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

```ts
function FindBar(props: FindBarProps): Element | null
```

**Parameters**

- `props` (`FindBarProps`): `find`: the state from `useFind`; `label`: the box's placeholder and accessible name.

**Returns** `Element | null`

**Props**

- `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.

Source: [ui/src/code/editor/find/FindBar.tsx:30](https://github.com/Tahul/zidane/blob/main/ui/src/code/editor/find/FindBar.tsx#L30)

## Interfaces

### `FindBarProps`

Interface.

Props for [`FindBar`](https://zidane.si/docs/reference/ui-code-editor-find-find-bar.md#FindBar).

```ts
interface FindBarProps
```

**Properties**

- `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.

Source: [ui/src/code/editor/find/FindBar.tsx:14](https://github.com/Tahul/zidane/blob/main/ui/src/code/editor/find/FindBar.tsx#L14)