Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mxck/react-native-material-menu
Pure JavaScript material menu component for React Native
https://github.com/mxck/react-native-material-menu
android ios material material-design react-native react-native-component
Last synced: 5 days ago
JSON representation
Pure JavaScript material menu component for React Native
- Host: GitHub
- URL: https://github.com/mxck/react-native-material-menu
- Owner: mxck
- License: mit
- Created: 2017-10-29T09:09:49.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-07-18T21:28:02.000Z (over 1 year ago)
- Last Synced: 2024-10-30T01:03:09.275Z (about 1 month ago)
- Topics: android, ios, material, material-design, react-native, react-native-component
- Language: TypeScript
- Homepage:
- Size: 587 KB
- Stars: 522
- Watchers: 6
- Forks: 92
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-native - react-native-material-menu ★119 - Pure JavaScript material menu component for React Native. (Components / UI)
- awesome-reactnative-ui - react-native-material-menu
- awesome-react-native - react-native-material-menu ★119 - Pure JavaScript material menu component for React Native. (Components / UI)
- awesome-material-design - react-native-material-menu - Great Material Menu component for RN (React Native / Components React Native)
- awesome-reactnative-ui - react-native-material-menu
- awesome-react-native - react-native-material-menu ★119 - Pure JavaScript material menu component for React Native. (Components / UI)
- awesome-react-native - react-native-material-menu ★119 - Pure JavaScript material menu component for React Native. (Components / UI)
README
# react-native-material-menu · [](https://www.npmjs.com/package/react-native-material-menu) [](https://github.com/mxck/react-native-material-menu/blob/master/LICENSE)
Pure JavaScript [material
menu](https://material.io/guidelines/components/menus.html) component for React
Native with automatic RTL support.
## Install
Using yarn
```sh
yarn add react-native-material-menu
```
or using npm
```sh
npm install --save react-native-material-menu
```
## Usage example
```jsx
import React, { useState } from 'react';
import { View, Text } from 'react-native';
import { Menu, MenuItem, MenuDivider } from 'react-native-material-menu';
export default function App() {
const [visible, setVisible] = useState(false);
const hideMenu = () => setVisible(false);
const showMenu = () => setVisible(true);
return (
Show menu}
onRequestClose={hideMenu}
>
Menu item 1
Menu item 2
Disabled item
Menu item 4
);
}
```
## Menu
| name | description | type | default |
| :---------------- | :------------------------------------- | --------: | :------ |
| children | Components rendered in menu (required) | ReactNode | - |
| anchor | Button component (required) | ReactNode | - |
| visible | Whether the Menu is currently visible | Boolean | - |
| style | Menu style | ViewStyle | - |
| onRequestClose | Callback when menu has become hidden | Function | - |
| animationDuration | Changes show/hide animation duration | Number | 300 |
## MenuItem
| name | description | type | default |
| :---------------- | :--------------------------- | --------: | :---------- |
| children | Rendered children (required) | ReactNode | - |
| disabled | Disabled flag | Boolean | `false` |
| disabledTextColor | Disabled text color | String | `'#bdbdbd'` |
| onPress | Called function on press | Function | - |
| style | Container style | ViewStyle | - |
| textStyle | Text style | TextStyle | - |
| pressColor | Pressed color | String | `'#e0e0e0'` |
> **Children** must be based on [``][text component] component (like **text** itself, strings, [react-native-vector-icons] or [expo icons]) otherwise you may get an error on a real device.
## MenuDivider
| name | description | type | default |
| :---- | :---------- | -----: | :------------------- |
| color | Line color | String | `'rgba(0,0,0,0.12)'` |
## Pietile native kit
Also take a look at other our components for react-native - [pietile-native-kit](https://github.com/pietile/pietile-native-kit)
## License
MIT License. © Maksim Milyutin 2017-2021
[text component]: https://facebook.github.io/react-native/docs/text.html
[react-native-vector-icons]: https://github.com/oblador/react-native-vector-icons
[expo icons]: https://docs.expo.io/versions/latest/guides/icons/