KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#developer-tools #dsh #dsh-plugin #ai-agent #claude-code #codex #typescript #ai-agents #mcp #cli #rust #deepseek-harness

react-native-menubar-extra

★ 283 Open GitHub ↗

Add MenuBar to your React Native MacOS Application

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# react-native-menubar-extra

Easily add native menubar (`NSMenu`) to your React Native MacOS App.

> [!WARNING]
> This library supports only [react-native-macos](https://github.com/microsoft/react-native-macos#readme)

## Installation

```sh
yarn add react-native-menubar-extra
# or ---
npm install react-native-menubar-extra
```

```sh
cd macos && pod install
```

## Usage

```tsx
import { MenuBarExtraItem, MenubarExtraView } from 'react-native-menubar-extra';

For more advanced example check out the [example](https://github.com/okwasniewski/react-native-menubar-extra/tree/main/example) folder.

## Reference

### `MenuBarExtraView`

Container view that sets up root menu.

| Prop    | Description                                                                                                   |
| ------- | ------------------------------------------------------------------------------------------------------------- |
| `title` | Title that will appear next to icon in system status bar.                                                     |
| `icon`  | Name of [SF Symbol](https://developer.apple.com/sf-symbols/) as string that will appear in system status bar. |

**Important**: Don't pass other types of components as children as it will break the indexing in the menu.

### `MenuBarExtraItem`

| Prop                        | Description                                                                                                        |
| --------------------------- | ------------------------------------------------------------------------------------------------------------------ |
| `title`                     | The menu item's title                                                                                              |
| `icon`                      | Name of [SF Symbol](https://developer.apple.com/sf-symbols/) as string that will be rendered next to item's title. |
| `onItemClick`               | Callback that is called after clicking on menu item.                                                               |
| `keyEquivalent`             | The menu item’s unmodified key equivalent. For example: "1" or "A".                                                |
| `keyEquivalentModifierMask` | The menu item’s keyboard equivalent modifiers. Default: `COMMAND`                                                  |

### `MenuBarExtraSeparator`

Separator displayed between items. Needs to have at least one item above and below.

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT

---

Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)

react-native-menubar-extra

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README