https://github.com/cinder92/react-native-circular-menu

A Ripple menu effect for your react native application
https://github.com/cinder92/react-native-circular-menu

component react-native ripple-menu

Last synced: 3 months ago
JSON representation

A Ripple menu effect for your react native application

• Host: GitHub
• URL: https://github.com/cinder92/react-native-circular-menu
• Owner: cinder92
• Created: 2017-06-23T04:15:27.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2022-11-09T01:32:23.000Z (about 2 years ago)
• Last Synced: 2024-07-02T01:17:25.369Z (4 months ago)
• Topics: component, react-native, ripple-menu
• Language: JavaScript
• Size: 146 KB
• Stars: 132
• Watchers: 6
• Forks: 18
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-material-design - react-native-circular-menu - Amazing circular menu animation for RN (React Native / Components React Native)

README

        
# react-native-circular-menu

A Ripple menu effect for your react native application

[![npm version](https://img.shields.io/npm/v/react-native-circular-menu.svg?style=flat-square)](https://www.npmjs.com/package/react-native-circular-menu)

[![NPM downloads](https://img.shields.io/npm/dm/react-native-circular-menu.svg?style=flat-square)](https://www.npmjs.com/package/react-native-circular-menu)

[![Package Quality](http://npm.packagequality.com/shield/react-native-circular-menu.svg?style=flat-square)](http://packagequality.com/#?package=react-native-circular-menu)

[![Donate](https://img.shields.io/badge/Donate-Patreon-green.svg?style=flat-square)](http://paypal.me/dcergo)

# Example

![example](https://github.com/cinder92/react-native-circular-menu/blob/master/ezgif.com-video-to-gif.gif)

# How to install

`yarn add react-native-circular-menu`

# How to use

```

...

import CircularMenu from 'react-native-circular-menu';

const App = () => {

  const [show, setState] = useState(false);

  const renderItems = () => [Menu Item];

  const renderCloseBtn = () => (

     {

        setState(!show);

      }}>

      Close Menu

    

  );

  return (

    

      

       setState(!show)}>Open Menu

      

    

  );

```

# Props

| Name         | Description                                               | Required |

| ------------ | --------------------------------------------------------- | -------- |

| show         | Set `true` to show and `false` to hide                    | yes      |

| color        | Change color of ripple effect                             | no       |

| size         | Change the scale size of circle (default : 20)            | no       |

| items        | Menu items (array)                                        | yes      |

| position     | Change position of animation circle (default : `topLeft`) | no       |

| closeBtn     | Receives a component for close button                     | yes      |

| openDelay    | Change delay before the menu opens (default : 250)        | no       |

| closeDelay   | Change delay before the menu closes (default : 350)       | no       |

| contentStyle | Style object for the child container                      | no       |

# Positions

Circular Menu supports 7 positions, `topLeft`, `topCenter`, `topRight`, `center`, `bottomLeft`, `bottomCenter`, `bottomRight`.

# TODO

- [x] Test in iPhone

- [x] Test in Android

- [ ] Add animations

# of coooourse PR are welcome :)