Requires react as a peer dependency,
only dependency is react-motion, if you think this should also be a peer dependency please open an issue on github.
npm i @jessemc98/motion-menu
To see working demos navigate to the 'demo' folder and run the following command.
which downloads all dependencies and runs a development server with multiple demos, open http://localhost:3000 to view it in the browser.
// using es6 imports
import MotionMenu from '@jessemc98/motion-menu'
import { SpacedMotionMenu } from '@jessemc98/motion-menu'
// using require syntax
var motion = require('@jessemc98/motion-menu')
var MotionMenu = motion.default
var SpacedMotionMenu = motion.SpacedMotionMenu
<MotionMenu
btns={[
{iconSrc: './myIcon.svg', alt: 'icon', onClick: () => null},
{iconSrc: './myIcon.svg', alt: 'icon'}
]} />Required. An array of button types to be shown in the menu.
The Button type is an object with the following structure:
{
iconSrc: String matching the src of the icon for the button,
alt: String which is used as the alternative text for the button icon,
onClick: Function which is called when the button is clicked
}
Optional. The angle between each of the buttons in the menu in degrees.
- Default: 30
Optional. The angle to offset the buttons in degrees. The offset is counted anti-clockwise starting from a bearing of 0. E.g. if you gave angleOffset={90} the buttons center would be pointing left.
Optional. The radius of the smaller, menu buttons in px.
- Default: 25
Optional. The radius of the open/close button in px.
- Default: 35
Optional. The amount of margin/space between the main button and the small buttons in px.
- Default: 40
Optional. An Object of the following structure:
{
open: {stiffness: NUM, damping: NUM},
close: {stiffness: NUM, damping: NUM}
}
MotionMenu uses react-motion behind the scenes, the springConfig prop uses the same structure as react-motion's spring config. You can learn more about the details of this config object here
- Default:
{
open: {stiffness: 550, damping: 29},
close: {stiffness: 200, damping: 20}
}
<SpacedMotionMenu
btns={[
{iconSrc: './myIcon.svg', alt: 'icon', onClick: () => null},
{iconSrc: './myIcon.svg', alt: 'icon'}
]} />The SpacedMotionMenu component takes the same props as the MotionMenu component, the main difference is, that the SpacedMotionMenu does not take an angle prop. Instead it calculates an angle where, with the given props.btns, every button would be evenly spaced around the main button.
E.g given btns={[{},{},{},{}]} it would render a MotionMenu component with the angle prop set to 90 in order to evenly space the 4 buttons.
After installation navigate to the installation directory and run the following command to run a test suite using facebooks jest.
The following command builds a commonJs module at libs/index.js
The following command builds an es harmony module at libs/es6.js