(WIP)
The React Revolver Menu is an arbitrarily deep menu React Component Items are arranged in a circle and all subsequent items will replace previous items in the circle. A 'back' button appears in the center of the menu if there are previous items in the hierarchy;
See it in action here
items : PropTypes.arrayOf(PropTypes.shape({
type : PropTypes.oneOf(['img', 'icon', 'text']).isRequired,
text : PropTypes.string,
src : PropTypes.string,
icon : PropTypes.string,
className : PropTypes.string,
popover : PropTypes.string,
popoverPosition : PropTypes.oneOf(['bottom', 'top', 'right', 'left']),
items : PropTypes.arrayOf(PropTypes.object),
onClick : PropTypes.func,
})).isRequired,
diameter : PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
animateDelay : PropTypes.number,
animateStyle : PropTypes.oneOf(['radiate', 'swing']),
border : PropTypes.oneOf(['dashed', 'solid', 'none'])
Array of objects that signify the items in the menu Each item has can have an optional array of items that are the next level of the menu when the item is clicked.
string
- either img
, icon
, text
string
- Text to display as menu item. Required if type = text
.
string
- Url of image. Required if type = img
.
string
- font-awesome icon className. Required if type = icon
.
string
- optional className for the item
string
- optional popover text on item hover
string
- optional popover position - either top
, bottom
, right
, or left
array
- array of item objects - sub-items when item is clicked
function
- callback called when item is clicked
diameter of the menu, can me a number (in pixels) or a string (eg. 300px
)
the delay between each item in menu showing during transitions
either 'radiate' or 'swing' - type of transition between menu sub-items
either 'dashed', 'solid', 'none', or none - type of border around the menu
npm install react-revolver-menu
Get the AMD module located at react-revolver-menu.js
and include it in your project.
Here is a sample integration:
require.config({
paths: {
'react': 'vendor/bower_components/react/react',
'ReactRevolverMenu': 'react-revolver-menu'
}
});
require(['react', 'ReactRevolverMenu'], function(React, ReactRevolverMenu) {
React.render(React.createElement(ReactRevolverMenu), document.getElementById('widget-container'));
});
- clone repo &&
npm install
- Development server
npm start
. - Continuously run tests on file changes
npm run watch-test
; - Run tests:
npm test
; - Build
npm run build
;