React-React motion menu v0.3.0: [DEPRECATED] A spring animation menu component for React.

icon
Latest Release: v0.3.0
  • Refactor.
  • Update dependencies.
  • Add cycle type.
  • Rewrite test.
  • Add eslint.
Source code(tar.gz)
Source code(zip)

Deprecated

Deprecated as the react-motion-menu project is no longer maintained.


react-motion-menu

Animation menu component for React.

Build Status Build Status

Demo

screenshot

See demo: http://bokuweb.github.io/react-motion-menu/

Installation

npm i react-motion-menu

Overview

Basic

import React from 'react';
import MotionMenu from '../../src';

export default () => (
  <MotionMenu
    type="circle"
    margin={120}
  >
    <div className="button">
      <i className="fa fa-bars" />
    </div>
    <div className="button">
      <i className="fa fa-cogs" />
    </div>
    <div className="button">
      <i className="fa fa-cloud" />
    </div>
    <div className="button">
      <i className="fa fa-home" />
    </div>
  </MotionMenu>
);

Properties

x: PropTypes.number

The position x of the menu button. If ommited, set 0.

y: PropTypes.number

The position y of the menu button. If ommited, set 0.

type: PropTypes.oneOf(['vertical', 'horizontal', 'circle'])

The Menu opening and closing type. Please set horizontal, vertical, circle.

margin: PropTypes.number

The margin between items or menu button.

wing: PropTypes.bool

If set true, menu opened both side, when vertical or horizontal type selected.

bumpy: PropTypes.bool

This prop controls if the menu items should open in bumpy mode or in smooth mode. Default mode is set to bumpy effect.

openSpeed: PropTypes.number

This prop controls how fast the menu items should open. Default speed is set to 60 milliseconds.

reverse: PropTypes.bool

This prop controls if the menu should open in reverse direction or not.

Test

npm t

License

The MIT License (MIT)

Copyright (c) 2016 @bokuweb

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Comments

  • Update dependencies to enable Greenkeeper 🌴
    Update dependencies to enable Greenkeeper 🌴

    Aug 5, 2017

    Let’s get started with automated dependency management for react-motion-menu :muscle:

    This pull request updates all your dependencies to their latest version. Having them all up to date really is the best starting point. I will look out for further dependency updates and make sure to handle them in isolation and in real-time, as soon as you merge this pull request.

    I won’t start sending you further updates, unless you have merged this very pull request.


    💥 This branch failed. How to proceed

    I suggest you find out what dependency update is causing the problem. Adapt your code so things are working nicely together again. next-update is a really handy tool to help you with this.

    Push the changes to this branch and merge it.

    🏷 How to check the status of this repository

    There is a badge added to your README, indicating the status of this repository.

    This is how your badge looks like :point_right: Greenkeeper badge

    🙈 How to ignore certain dependencies

    In case you can not, or do not want to update a certain dependency right now, you can of course just change the package.json file back to your liking.

    Add a greenkeeper.ignore field to your package.json, containing a list of dependencies you don’t want to update right now.

    // package.json
    {
      …
      "greenkeeper": {
        "ignore": [
          "package-names",
          "you-want-me-to-ignore"
        ]
      }
    }
    
    👩‍💻 How to update this pull request
      # change into your repository’s directory
      git fetch
      git checkout greenkeeper/initial
      npm install-test
      # adapt your code, so it’s working again
      git commit -m 'chore: adapt code to updated dependencies'
      git push origin greenkeeper/initial
    
    ✨ How the updates will look like

    As soon as you merge this pull request I’ll create a branch for every dependency update, with the new version applied. The branch creation should trigger your testing services to check the new version. Using the results of these tests I’ll try to open meaningful and helpful pull requests and issues, so your dependencies remain working and up-to-date.

    -  "underscore": "^1.6.0"
    +  "underscore": "^1.7.0"
    

    In the above example you can see an in-range update. 1.7.0 is included in the old ^1.6.0 range, because of the caret ^ character. When the test services report success I’ll delete the branch again, because no action needs to be taken – everything is fine. When there is a failure however, I’ll create an issue so you know about the problem immediately.

    This way every single version update of your dependencies will either continue to work with your project, or you’ll get to know of potential problems immediately.

    -  "lodash": "^3.0.0"
    +  "lodash": "^4.0.0"
    

    In this example the new version 4.0.0 is not included in the old ^3.0.0 range. For version updates like these – let’s call them “out of range” updates – you’ll receive a pull request.

    Now you no longer need to check for exciting new versions by hand – I’ll just let you know automatically. And the pull request will not only serve as a reminder to update. In case it passes your decent test suite that’s a strong reason to merge right away :shipit:

    💁‍♂️ Not sure how things are going to work exactly?

    There is a collection of frequently asked questions and of course you may always ask my humans.


    Good luck with your project and see you soon :sparkles:

    Your Greenkeeper Bot :palm_tree:

    greenkeeper 
    Reply
  • How to use two motion menus in single file.
    How to use two motion menus in single file.

    Oct 10, 2017

    I am trying to have two motion menus in a single file. when i tried two, whenever i press the motion menu buttons, only data from the second motion menu is taken and it is appearing near the first motion menu,

    Reply
  • How to set the item position with respect to the menu button?
    How to set the item position with respect to the menu button?

    Oct 10, 2017

    If i click on the second menu button the items with respect to second menu is displayed in the first menu button. Please suggest how to change it.

    Reply
  • Cannot read property 'number' of undefined Error
    Cannot read property 'number' of undefined Error

    Nov 13, 2017

    I'm trying to add motionmenu to a new react project. When I add the following I get the following error. I've tried the both versions 0.3.0 and the latest but both give the same error. Am I doing something wrong?

    <MotionMenu type="circle" margin={120} y={0} x={0} > <div className="button"><i className="fa fa-bars" /></div> <div className="button"><i className="fa fa-cogs" /></div> <div className="button"><i className="fa fa-cloud" /></div> <div className="button"><i className="fa fa-home" /></div> <div className="button"><i className="fa fa-flash" /></div> <div className="button"><i className="fa fa-heart" /></div> <div className="button"><i className="fa fa-globe" /></div> <div className="button"><i className="fa fa-plug" /></div> </MotionMenu>

    ERROR: × TypeError: Cannot read property 'number' of undefined ./node_modules/react-motion-menu/lib/item.js C:/Users/Kristen/Desktop/Temp Pull From External Drive/Projects/WebApplication_SS/WebApplication_SS/react-app/node_modules/react-motion-menu/lib/item.js:165 162 | 163 | 164 | MenuItem.propTypes = {

    165 | x: _react.PropTypes.number.isRequired, 166 | y: _react.PropTypes.number.isRequired, 167 | direction: _react.PropTypes.oneOf(['vertical', 'horizontal']).isRequired, 168 | distance: _react.PropTypes.number.isRequired, View compiled webpack_require http://localhost:3000/static/js/bundle.js:679:30 676 | /******/ }; 677 | /******/ 678 | /******/ // Execute the module function 679 | /******/ modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); | ^ 680 | /******/ 681 | /******/ // Flag the module as loaded 682 | /******/ module.l = true; View source fn C:/Users/Kristen/Desktop/Temp Pull From External Drive/Projects/WebApplication_SS/WebApplication_SS/react-app/webpack/bootstrap c756a603d86a7ec04051:88 85 | console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId); 86 | hotCurrentParents = []; 87 | } 88 | return webpack_require(request); 89 | }; 90 | var ObjectFactory = function ObjectFactory(name) { 91 | return { View compiled ./node_modules/react-motion-menu/lib/index.js C:/Users/Kristen/Desktop/Temp Pull From External Drive/Projects/WebApplication_SS/WebApplication_SS/react-app/node_modules/react-motion-menu/lib/index.js:15 12 | 13 | var _reactMotion = require('react-motion'); 14 | 15 | var _item = require('./item'); 16 | 17 | var _item2 = _interopRequireDefault(_item); 18 | View compiled webpack_require C:/Users/Kristen/Desktop/Temp Pull From External Drive/Projects/WebApplication_SS/WebApplication_SS/react-app/webpack/bootstrap c756a603d86a7ec04051:678 675 | }; 676 | 677 | // Execute the module function 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); 679 | 680 | // Flag the module as loaded 681 | module.l = true; View compiled fn C:/Users/Kristen/Desktop/Temp Pull From External Drive/Projects/WebApplication_SS/WebApplication_SS/react-app/webpack/bootstrap c756a603d86a7ec04051:88 85 | console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId); 86 | hotCurrentParents = []; 87 | } 88 | return webpack_require(request); 89 | }; 90 | var ObjectFactory = function ObjectFactory(name) { 91 | return { View compiled ./src/containers/app/index.js http://localhost:3000/static/js/bundle.js:65989:76 webpack_require C:/Users/Kristen/Desktop/Temp Pull From External Drive/Projects/WebApplication_SS/WebApplication_SS/react-app/webpack/bootstrap c756a603d86a7ec04051:678 675 | }; 676 | 677 | // Execute the module function 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); 679 | 680 | // Flag the module as loaded 681 | module.l = true; View compiled fn C:/Users/Kristen/Desktop/Temp Pull From External Drive/Projects/WebApplication_SS/WebApplication_SS/react-app/webpack/bootstrap c756a603d86a7ec04051:88 85 | console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId); 86 | hotCurrentParents = []; 87 | } 88 | return webpack_require(request); 89 | }; 90 | var ObjectFactory = function ObjectFactory(name) { 91 | return { View compiled ./src/index.js http://localhost:3000/static/js/bundle.js:66514:74 webpack_require C:/Users/Kristen/Desktop/Temp Pull From External Drive/Projects/WebApplication_SS/WebApplication_SS/react-app/webpack/bootstrap c756a603d86a7ec04051:678 675 | }; 676 | 677 | // Execute the module function 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); 679 | 680 | // Flag the module as loaded 681 | module.l = true; View compiled fn C:/Users/Kristen/Desktop/Temp Pull From External Drive/Projects/WebApplication_SS/WebApplication_SS/react-app/webpack/bootstrap c756a603d86a7ec04051:88 85 | console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId); 86 | hotCurrentParents = []; 87 | } 88 | return webpack_require(request); 89 | }; 90 | var ObjectFactory = function ObjectFactory(name) { 91 | return { View compiled 0 http://localhost:3000/static/js/bundle.js:66776:18 webpack_require C:/Users/Kristen/Desktop/Temp Pull From External Drive/Projects/WebApplication_SS/WebApplication_SS/react-app/webpack/bootstrap c756a603d86a7ec04051:678 675 | }; 676 | 677 | // Execute the module function 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); 679 | 680 | // Flag the module as loaded 681 | module.l = true; View compiled ./node_modules/ansi-regex/index.js.module.exports C:/Users/Kristen/Desktop/Temp Pull From External Drive/Projects/WebApplication_SS/WebApplication_SS/react-app/webpack/bootstrap c756a603d86a7ec04051:724 721 | webpack_require.h = function() { return hotCurrentHash; }; 722 | 723 | // Load entry module and return exports 724 | return hotCreateRequire(0)(webpack_require.s = 0); 725 | 726 | 727 | View compiled (anonymous function) http://localhost:3000/static/js/bundle.js:728:10 This screen is visible only in development. It will not appear if the app crashes in production. Open your browser’s developer console to further inspect this error.

    Reply
  • it doesn't work with react app now!!
    it doesn't work with react app now!!

    Feb 12, 2018

    I try everything to make the react-motion-menu work but I got nothing at the end

    Reply
  • fix #16
    fix #16

    Dec 21, 2015

                                                                                                                                                                                                           
    Reply
  • [install error] ➜  react-motion-menu git:(zzz-dev) ✗ npm run-script watch:example  > react-motion-menu@0.1.4 watch:example /Users/zhengzhongzhao/Develop/reacts/react-motion-menu > watchify --extension=js -o example/dist/bundle.js example/src/index.js  Error: Cannot find module '../../lib' from '/Users/zhengzhongzhao/Develop/reacts/react-motion-menu/example/src' Error: Cannot find module '../../lib' from '/Users/zhengzhongzhao/Develop/reacts/react-motion-menu/example/src'
    [install error] ➜ react-motion-menu git:(zzz-dev) ✗ npm run-script watch:example > [email protected] watch:example /Users/zhengzhongzhao/Develop/reacts/react-motion-menu > watchify --extension=js -o example/dist/bundle.js example/src/index.js Error: Cannot find module '../../lib' from '/Users/zhengzhongzhao/Develop/reacts/react-motion-menu/example/src' Error: Cannot find module '../../lib' from '/Users/zhengzhongzhao/Develop/reacts/react-motion-menu/example/src'

    Dec 17, 2015

    ➜ react-motion-menu git:(zzz-dev) ✗ npm run-script watch:example

    [email protected] watch:example /Users/zhengzhongzhao/Develop/reacts/react-motion-menu watchify --extension=js -o example/dist/bundle.js example/src/index.js

    Error: Cannot find module '../../lib' from '/Users/zhengzhongzhao/Develop/reacts/react-motion-menu/example/src' Error: Cannot find module '../../lib' from '/Users/zhengzhongzhao/Develop/reacts/react-motion-menu/example/src'

    :beer:

    Reply
  • onClose event is not invoked
    onClose event is not invoked

    Feb 8, 2017

    I have set the onOpen and onClose events as follows but only the onOpen event is invoked the onClose is ignored

    ....
    <MotionMenu
           margin={64}
           type="horizontal"
           openSpeed={20}
           bumpy={true}
           wing={false}
           reverse={true}
           onOpen={this._onMenuOpen}
           onClose={this._onMenuClose}>
    ....
    

    Thanks

    Reply
  • fix(className): added passing classname to component + missing dev de…
    fix(className): added passing classname to component + missing dev de…

    Jul 7, 2016

    customClass property was missing (and therefore not working) also added missing dev dependancies

    Reply
  • How to change animations and to make the appearance of the top buttons?
    How to change animations and to make the appearance of the top buttons?

    Jan 22, 2017

                                                                                                                                                                                                           
    Reply
  • Fix Proptypes (#35)
    Fix Proptypes (#35)

    May 29, 2017

                                                                                                                                                                                                           
    Reply
  • Menu is not defined
    Menu is not defined

    Jan 22, 2017

    Error: index.js:174 Uncaught ReferenceError: Menu is not defined

    After rename Menu to MotionMenu index.js:133 Uncaught TypeError: Cannot read property 'props' of undefined

    Reply
  • Extended React motion Menu
    Extended React motion Menu

    Jan 31, 2017

    We liked the React-motion-menu, because it is very easy to use and understandable. To give user more control over the menu, we have introduced some extra props for the MotionMenu component.

    New Props

    1. bumpy: (bool): This prop controls if the menu Items should bump or open smoothly.
    2. openSpeed: (number): (miliseconds) This controls the speed of the menu while opening.
    3. reverse: (bool) : This controls if the menu should open in reverse order.
    Reply
  • [bug] when you click it too fast
    [bug] when you click it too fast

    Dec 17, 2015

    :beer:

                                                                                                                                                                                                           
    Reply
  • spreading the menu items both side of the menu button
    spreading the menu items both side of the menu button

    Nov 13, 2016

    Hi, first thanks for your awesome library. I was playing with your library and forked it and made a feature.

    -> spreading the menu items both side of the menu button.

    I have passed a parameter orientation="both" to specify the feature and done some coding on the source file.

    Please accept the pull request if you think it can be mergeable. So that it would help others :)

    Thanks, Rafi.

    Reply