https://github.com/thegreatercurve/react-native-radial-context-menu
⚛️ React Native menu component.
https://github.com/thegreatercurve/react-native-radial-context-menu
context-menu context-menu-react menus react-native-menu
Last synced: about 1 year ago
JSON representation
⚛️ React Native menu component.
- Host: GitHub
- URL: https://github.com/thegreatercurve/react-native-radial-context-menu
- Owner: thegreatercurve
- License: mit
- Created: 2018-10-22T22:38:59.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2023-07-02T00:22:42.000Z (about 3 years ago)
- Last Synced: 2025-06-25T00:12:27.622Z (about 1 year ago)
- Topics: context-menu, context-menu-react, menus, react-native-menu
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-native-radial-context-menu
- Size: 1 MB
- Stars: 21
- Watchers: 1
- Forks: 2
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Native Radial Context Menu
An easy to use context menu component for React Native, inspired by [The Guardian's radial context menu](https://github.com/guardian/android-radialactionmenu) in their Android app.
A live demo of the component can he found as an Expo Snack [here](https://snack.expo.io/@thegreatercurve/react-native-radial-context-menu-example), or in the `example` folder.
## Installation
```bash
npm i --save react-native-radial-context-menu
```
## Usage
A simple example is shown below.
```js
import { withRadialActionMenu } from 'react-native-radial-context-menu'
// Wrap any component with the provided Higher Order Component.
const ListItemWithMenu = withRadialActionMenu(() => )
// Instantiate the wrapped component, passing in the buttons as props.
const App = () => (
1, value: 1 },
{ component: () => 2, value: 2 },
{ component: () => 3, value: 3 },
{ component: () => 4, value: 4 },
]}
/>
)
```
For something more complex, have a look at the [Expo Snack](https://snack.expo.io/@thegreatercurve/react-native-radial-context-menu-example) demo.
### Props
| Prop | Type | Required | Default | Description |
| ----------------- | ---------- | -------- | --------- | ----------------------------------------------------------------------------------------------- |
| `backgroundColor` | _String_ | Optional | `#fa8072` | Background color for both the menu and buttons. |
| `buttons` | _Array_ | Required | `[]` | Array of button objects. Each button requires a `component` and `value`. |
| `buttonDiameter` | _Number_ | Optional | `60` | Width of each button. |
| `menuDiameter` | _Number_ | Optional | `90` | Width of the menu at the touch origin. |
| `onClose` | _Function_ | Optional | `void` | Callback fired when the menu is closed, with either the `value` of the chosen button or `null`. |
| `onOpen` | _Function_ | Optional | `void` | Callback fired when the menu is opened. |
| `openDelay` | _Number_ | Optional | `0` | Number of milliseconds on press in before the menu opens. |
| `spreadAngle` | _Number_ | Optional | `170` | Angle between the first and last button from the touch origin. |
| `spreadRadius` | _Number_ | Optional | `100` | Distance the buttons move out from the touch origin. |
| `vibrate` | _Boolean_ | Optional | `true` | Vibrate on move over a button. |
| `vibrateDuration` | _Number_ | Optional | `50` | Number of milliseconds of the vibration. |
### Contribute
We warmly welcome any contributions! You can open a Pull Request [here](https://github.com/thegreatercurve/react-native-radial-context-menu/pulls).