rnr
react-native-radial-context-menu
npm i react-native-radial-context-menu
rnr

react-native-radial-context-menu

⚛️ React Native menu component.

by John Flockton

0.0.2 (see all)License:MITTypeScript:Built-In
npm i react-native-radial-context-menu
Readme

React Native Radial Context Menu

An easy to use context menu component for React Native, inspired by The Guardian's radial context menu in their Android app.

A live demo of the component can he found as an Expo Snack here, or in the example folder.

Demo

Installation

npm i --save react-native-radial-context-menu

Usage

A simple example is shown below.

import { withRadialActionMenu } from 'react-native-radial-context-menu'

// Wrap any component with the provided Higher Order Component.
const ListItemWithMenu = withRadialActionMenu(() => <View />)

// Instantiate the wrapped component, passing in the buttons as props.
const App = () => (
    <ListItemWithMenu
      buttons={[
        { component: () => <Text>1</Text>, value: 1 },
        { component: () => <Text>2</Text>, value: 2 },
        { component: () => <Text>3</Text>, value: 3 },
        { component: () => <Text>4</Text>, value: 4 },
      ]}
    />
)

For something more complex, have a look at the Expo Snack demo.

Props

PropTypeRequiredDefaultDescription
backgroundColorStringOptional#fa8072Background color for both the menu and buttons.
buttonsArrayRequired[]Array of button objects. Each button requires a component and value.
buttonDiameterNumberOptional60Width of each button.
menuDiameterNumberOptional90Width of the menu at the touch origin.
onCloseFunctionOptionalvoidCallback fired when the menu is closed, with either the value of the chosen button or null.
onOpenFunctionOptionalvoidCallback fired when the menu is opened.
openDelayNumberOptional0Number of milliseconds on press in before the menu opens.
spreadAngleNumberOptional170Angle between the first and last button from the touch origin.
spreadRadiusNumberOptional100Distance the buttons move out from the touch origin.
vibrateBooleanOptionaltrueVibrate on move over a button.
vibrateDurationNumberOptional50Number of milliseconds of the vibration.

Contribute

We warmly welcome any contributions! You can open a Pull Request here.

Downloads/wk

5

GitHub Stars

16

LAST COMMIT

3yrs ago

MAINTAINERS

1

CONTRIBUTORS

3

OPEN ISSUES

0

OPEN PRs

11
VersionTagPublished
0.0.2
latest
4yrs ago
No alternatives found
No tutorials found
Add a tutorial

Rate & Review

100
No reviews found
Be the first to rate