okwasniewski / react-native-menubar-extra Goto Github PK

View Code? Open in Web Editor NEW

Add MenuBar to your React Native MacOS Application

License: MIT License

JavaScript 7.84% Ruby 8.75% Objective-C 32.51% Objective-C++ 35.77% TypeScript 15.12%

react-native-menubar-extra's Introduction

react-native-menubar-extra

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

Warning

This library supports only react-native-macos

Installation

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

cd macos && pod install

Usage

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