react-native-menubar-extra - GitLite

KO | EN

gitlite — search

#react #ai #typescript #llm #go #macos #nodejs #java #windows #cli #kubernetes #pytorch #security #openai

react-native-menubar-extra

(★ 283)

Add MenuBar to your React Native MacOS Application

File Explorer

Download Latest Version (.zip)

- - ci.yml
- - config
- - .gitignore
  - .xcode.env
  - Podfile
  - Podfile.lock
- - App.tsx
- .node-version
- .watchmanconfig
- app.json
- babel.config.js
- Gemfile
- Gemfile.lock
- index.js
- metro.config.js
- package.json
- react-native.config.js
- yarn.lock
- example-usage.png
- - MenuBarExtraSeparator.mm
  - RNMenuBarExtraItem.h
  - RNMenuBarExtraItem.mm
  - RNMenuBarExtraSeparator.h
  - RNMenuBarExtraView.h
  - RNMenuBarExtraView.mm
- - project.pbxproj
- MenuBarExtra+RCTConvert.m
- MenuBarExtraItem.h
- MenuBarExtraItem.m
- MenuBarExtraItemViewManager.m
- MenuBarExtraSeparator.h
- MenuBarExtraSeparator.m
- MenuBarExtraSeparatorViewManager.m
- MenubarExtraView.h
- MenuBarExtraView.m
- MenubarExtraViewManager.m
- MenuBarItemProtocol.h
- MenuBarOnPressEvent.h
- MenuBarOnPressEvent.m
- bootstrap.js
- index.tsx
- MenuBarExtraItemNativeComponent.ts
- MenuBarExtraSeparatorNativeComponent.ts
- MenuBarExtraView.tsx
- MenubarExtraViewNativeComponent.ts
.editorconfig
.gitattributes
.gitignore
.nvmrc
.watchmanconfig
.yarnrc
babel.config.js
CODE_OF_CONDUCT.md
CONTRIBUTING.md
lefthook.yml
LICENSE
metro.config.macos.js
package.json
react-native-menubar-extra.podspec
README.md
tsconfig.build.json
tsconfig.json
turbo.json
yarn.lock

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# react-native-menubar-extra

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

<p align="center">
  <img src="img/example-usage.png" alt="ViewPager" width="450">
</p>

> [!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';

const MenuBar = () => {
  return (
    <MenubarExtraView icon="car">
      <MenuBarExtraItem
        title="Item 1"
        onItemPress={() => {
          console.log('Item pressed');
        }}
      />
    </MenubarExtraView>
  );
};
```

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)