# hooks/useDisplayPath (zidane-ui)

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

## Components

### `PathDisplayProvider`

Component.

Gives the components below each host's home folder.

```ts
function PathDisplayProvider(props: PathDisplayProviderProps): Element
```

**Parameters**

- `props` (`PathDisplayProviderProps`): The `homes` and the `children`.

**Returns** `Element`

**Props**

- `children?` (`ReactNode`): The components that show paths.
- `homes` (`Readonly<Record<string, string | undefined>>`): Each host's home folder, by host id (`'local'`: this computer).

Source: [ui/src/hooks/useDisplayPath.tsx:54](https://github.com/Tahul/zidane/blob/main/ui/src/hooks/useDisplayPath.tsx#L54)

### `PathDisplayScope`

Component.

Names the host of the paths below that don't name one: a server session's
transcript shows its paths with the server's home folder.

```ts
function PathDisplayScope(props: PathDisplayScopeProps): Element
```

**Parameters**

- `props` (`PathDisplayScopeProps`): The `hostId` and the `children`.

**Returns** `Element`

**Props**

- `children?` (`ReactNode`): The components that show paths.
- `hostId?` (`string | null`): The host the paths below are on (`HostView.id`). Absent or `null`: this computer.

Source: [ui/src/hooks/useDisplayPath.tsx:79](https://github.com/Tahul/zidane/blob/main/ui/src/hooks/useDisplayPath.tsx#L79)

## Functions

### `useDisplayPath`

Function.

The nearest [`PathDisplayProvider`](https://zidane.si/docs/reference/ui-hooks-use-display-path.md#PathDisplayProvider)'s display; without one, paths show in full.

```ts
function useDisplayPath(): PathDisplay
```

**Returns** `PathDisplay`

Source: [ui/src/hooks/useDisplayPath.tsx:87](https://github.com/Tahul/zidane/blob/main/ui/src/hooks/useDisplayPath.tsx#L87)

## Interfaces

### `PathDisplay`

Interface.

Shows paths with their machine's home folder as `~`.

```ts
interface PathDisplay
```

**Properties**

- `path` (`(path: string, hostId?: string | null) => string`): A path: a leading home folder becomes `~`. `hostId` absent or `null`: the scope's host, else this computer.
- `text` (`(text: string, hostId?: string | null) => string`): A line holding paths (`in /Users/ada/x`): each home folder that starts a path becomes `~`.

Source: [ui/src/hooks/useDisplayPath.tsx:26](https://github.com/Tahul/zidane/blob/main/ui/src/hooks/useDisplayPath.tsx#L26)

### `PathDisplayProviderProps`

Interface.

Props for [`PathDisplayProvider`](https://zidane.si/docs/reference/ui-hooks-use-display-path.md#PathDisplayProvider).

```ts
interface PathDisplayProviderProps
```

**Properties**

- `children?` (`ReactNode`): The components that show paths.
- `homes` (`Readonly<Record<string, string | undefined>>`): Each host's home folder, by host id (`'local'`: this computer).

Source: [ui/src/hooks/useDisplayPath.tsx:42](https://github.com/Tahul/zidane/blob/main/ui/src/hooks/useDisplayPath.tsx#L42)

### `PathDisplayScopeProps`

Interface.

Props for [`PathDisplayScope`](https://zidane.si/docs/reference/ui-hooks-use-display-path.md#PathDisplayScope).

```ts
interface PathDisplayScopeProps
```

**Properties**

- `children?` (`ReactNode`): The components that show paths.
- `hostId?` (`string | null`): The host the paths below are on (`HostView.id`). Absent or `null`: this computer.

Source: [ui/src/hooks/useDisplayPath.tsx:66](https://github.com/Tahul/zidane/blob/main/ui/src/hooks/useDisplayPath.tsx#L66)