# NotebookListBar

Source: https://developers.inkdrop.app/components/notebook-list-bar

A built-in React [component](https://developers.inkdrop.app/modules/component-manager) of Inkdrop that renders a searchable list of
notebooks, letting the user pick one.

To get the class of the `NotebookListBar` component:

```tsx
import type { NotebookListBarProps } from '@inkdropapp/types'

const NotebookListBar =
  env.components.getComponentClass<NotebookListBarProps>('NotebookListBar')
```

## Props

```typescript
type NotebookListBarProps = {
  // Placeholder text for the search input. Defaults to 'Search'.
  placeholder?: string
  // Icon name for the search input. Defaults to 'book-close-2'.
  icon?: string
  // Whether to show a "(Root)" option at the top.
  showRoot?: boolean
  // Book IDs to hide from the list.
  hiddenBooks?: string[]
  // Called when a notebook is selected. `bookId` is null if "(Root)" was selected.
  onItemSelect: (bookId: string | null) => any
}
```

## Example

```tsx
import React, { useCallback } from 'react'
import { logger } from 'inkdrop'
import type { NotebookListBarProps } from '@inkdropapp/types'

import { getEnv } from './env'

const NotebookPicker: React.FC = () => {
  const NotebookListBar =
    getEnv().components.getComponentClass<NotebookListBarProps>('NotebookListBar')

  const onItemSelect = useCallback((bookId: string | null) => {
    logger.debug('Selected notebook:', bookId)
  }, [])

  return (
    <NotebookListBar
      placeholder="Move to notebook"
      showRoot
      onItemSelect={onItemSelect}
    />
  )
}

export default NotebookPicker
```

`getEnv()` is the small helper — shown in the [Word Count plugin walkthrough](https://developers.inkdrop.app/guides/plugin-word-count#understanding-the-generated-code) — that captures the [Environment](https://developers.inkdrop.app/modules/environment) handed to `activate()` so components can reach it too.