# react-awesome-menus

> ![Slider](/asset/slide.gif) [Checkout the demo](https://ronal2do.github.io/MenuShapeOverlays)

Latest version **0.1.0** (published 2017-12-03) · 0 weekly downloads

## Install

```sh
npm install react-awesome-menus
pnpm add react-awesome-menus
yarn add react-awesome-menus
bun add react-awesome-menus
```

## Health

**Score 10/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2017-12-03 |
| First published | 2017-12-03 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | gabrielrubens |

## Links

- npm: https://www.npmjs.com/package/react-awesome-menus
- npm.io page: https://npm.io/package/react-awesome-menus

## Dependencies (3)

- [classnames](https://npm.io/package/classnames.md) ^2.2.5
- [glsl-easings](https://npm.io/package/glsl-easings.md) ^1.0.0
- [query-selector](https://npm.io/package/query-selector.md) ^1.0.9

## Recent versions

- 0.1.0 (latest) — 2017-12-03

## README

# Animated Menu ShapeOverlays

![Slider](/asset/slide.gif)
[Checkout the demo](https://ronal2do.github.io/MenuShapeOverlays)

### Acknowledgments
Based in the awesome work https://tympanus.net/Development/ShapeOverlays/index3.html

## Install

```
yarn add react-awesome-menu react-dom
```

## Usage
```js
import withMenu from 'react-awesome-menu'
const MENU_ITEMS = [
  {
    id: 0,
    label: 'Home',
    // Props received by the HOC are forwarded here
    action: (props) => console.log('Any routing trigger you use'),
  },
  {
    id: 2,
    label: 'News',
    action: (props) => console.log('Any routing trigger you use'),
  },
  {
    id: 3,
    label: 'About',
    action: (props) => console.log('Any routing trigger you use'),
  },
  {
    id: 4,
    label: 'Contact',
    action: (props) => console.log('Any routing trigger you use'),
  },
]

// The HOC will also provide a `toggleMenu` to its child, so you can
// Manipulate the visibility as you wish
const App = withMenu({ items: MENU_ITEMS })(({ toggleMenu }) => (
  <div>
    <p>Hi there</p>
  </div>
))
```

## Contributors

Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore -->
| [<img src="https://avatars3.githubusercontent.com/u/4389565?v=4" width="100px;"/><br /><sub><b>Ronaldo Lima</b></sub>](http://stqpublicidade.com.br/)<br />[💻](https://github.com/ronal2do/react-awesome-menus/commits?author=ronal2do "Code") | [<img src="https://avatars0.githubusercontent.com/u/1283200?v=4" width="100px;"/><br /><sub><b>Gabriel Rubens</b></sub>](https://medium.com/@_gabrielrubens)<br />[💻](https://github.com/ronal2do/react-awesome-menus/commits?author=grsabreu "Code") |
| :---: | :---: |
<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!

---
_Source: https://npm.io/package/react-awesome-menus · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._