https://github.com/omulet/react-native-radial-menu

https://github.com/omulet/react-native-radial-menu

Last synced: 5 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/omulet/react-native-radial-menu
• Owner: omulet
• Created: 2016-02-14T12:40:31.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2020-01-08T06:33:08.000Z (almost 5 years ago)
• Last Synced: 2024-04-25T00:52:06.115Z (8 months ago)
• Language: JavaScript
• Size: 674 KB
• Stars: 182
• Watchers: 5
• Forks: 23
• Open Issues: 5
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-react-native - react-native-radial-menu ★153 - A Radial Menu optimized for touch interfaces (Components / UI)
• awesome-react-native - react-native-radial-menu ★153 - A Radial Menu optimized for touch interfaces (Components / UI)
• awesome-react-native - react-native-radial-menu ★153 - A Radial Menu optimized for touch interfaces (Components / UI)
• awesome-react-native-ui - react-native-radial-menu ★67 - A Radial Menu optimized for touch interfaces (Components / UI)
• awesome-react-native - react-native-radial-menu ★153 - A Radial Menu optimized for touch interfaces (Components / UI)

README

        
## React Native Radial Menu



[![npm version](https://img.shields.io/npm/v/react-native-radial-menu.svg)](https://www.npmjs.com/package/react-native-radial-menu)

[![npm downloads](https://img.shields.io/npm/dm/react-native-radial-menu.svg)](https://www.npmjs.com/package/react-native-radial-menu)

### Installation

`npm install react-native-radial-menu`

### Usage

```javascript

var RadialMenu = require('react-native-radial-menu');

var Application = React.createClass({

  render: function() {

    return (

      

         {}} onClose={() => {}}>

          ROOT

           {}}>A

           {}}>B

           {}}>C

           {}}>D

        

      

    )

  }

})

```

### Examples

```js

// Examples Coming soon

```

### Props

This menu can be fully customized using props.

##### Important

- `itemRadius` (Number) `30` - Menu item radius

- `menuRadius` (Number) `100`- Distance between root and items in open state.

- `spreadAngle` (Number: 0 - 360) `360` - The angle in degrees based on which menu items are spread on a circle around our root. E.g. 360 full circle, 180 half of circle and so on.

- `startAngle` (Number) `0` - Items are distributed in clockwise direction starting from startAngle. 0 is left, 90 top, and so on.

##### Menu Callbacks

- `onOpen` (Function) - Called immediately after the menu has entered the open state.

- `onClose` (Function) - Called immediately after the menu has entered the close state.

##### Menu Item Callbacks

- `onSelect` (Function) - Called when the item is selected

##### Animations

Coming soon

### Demo

* `git clone https://github.com/omulet/react-native-radial-menu.git`

* `cd react-native-radial-menu/examples/rnRadialMenu && npm install`

* Open ``./examples/rnRadialMenu/ios/rnRadialMenu.xcodeproject` in xcode

* `command+r` (in xcode)

### Credits