React Animated Menu-icon

A customizable React Menu-icon. You can choose the size, animation and color of the icon.

Install

npm install react-animated-menuicon

Imports

import { MenuIcon, useMenuIcon } from 'react-animated-menuicon'

• useMenuIcon is a hook that must be bound to MenuIcon
• MenuIcon is the component to be used in JSX. It expects all the methods given my useMenuIcon

Full example

import { MenuIcon, useMenuIcon } from 'react-animted-menuicon';

function Navbar() {
  const methods = useMenuIcon({
    size: 'md',
    color: '#008080',
    type: 'spin'
  });

  return (
    <nav>
      <MenuIcon {...methods} />
    </nav>
  );
}

How to use

Hook -

const methods = useMenuIcon({}); // you must pass in an empty {} for all base properties

Component -

<MenuIcon {...methods} />

Properties

Available Sizes
sm	1rem
md	2rem
lg	2.5rem
xl	3rem
custom	1em

  const methods = useMenuIcon({
    size: 'sm'
  })

Sizes expects a string value to be passed in. If the sm-xl sizes are a bit different than whats needed, use the custom property and wrap the MenuIcon component in a HTML tag with the correct text size property.

Custom example:

  const methods = useMenuIcon({ size: 'custom' });

  <span style={{ fontSize: '23px' }}>
    <MenuIcon {...methods} /> // will have a width/height of 23px
  </span>

Available Types
base
spin

  const methods = useMenuIcon({
    type: 'spin'
  })

Currently, only two animations are available: base and spin. If no value is passed, the component will default to base.

Available Colors
any

  const methods = useMenuIcon({
    color: 'red'
  })

Colors expects any valid color, in any form. If you're using hexcode, please make sure to include the #. If no valid color is passed in, it will default to black (#000000).