Menu Button Reactjs

Component for react that creates a ripple effect similar to Material-ui.

Properties

• color?: string
• colorHover?: string
• size?: number
• onClick?: Function
• open?: boolean
• rippleOff?: boolean
• effect?: "cross" | "wink" | "winkReverse" | "bounce" | "rotate" | "rotateReverse" | "push" | "pushReverse" | "async" | "asyncReverse" | "spin" | "spinReverse"

Use

With onClick function:

import React from "react";
import MenuButton from "reactjs-menu-button";

export default function MyComponent( props ) {
    const handleClick = ({isOpen}) => {
        console.log( "Button open", isOpen )
    }

    return (
        <>
            <div className="testDiv">
                <MenuButton onClick={handleClick} effect="wink" />
            </div>
            <style>{`
                .testDiv {
                    position: relative;
                    padding: 15px;
                    display: inline-block;
                    color: #333;
                    transition: color .5s;
                }
                .testDiv:hover {
                    color: red;
                }
            `}</style>
        </>
    )
}

Width open property

import React, { useState, useEffect } from "react";
import MenuButton from "reactjs-menu-button";

export default function MyComponent( props ) {
    const [isOpen, setIsOpen] = useState( false );

    useEffect(() => {
        setTimeout(() => {
            setIsOpen(!isOpen);
        }, 3000)

        setTimeout(() => {
            setIsOpen(!isOpen);
        }, 6000)
    });

    return (
        <>
            <div className="testDiv">
                <MenuButton open={isOpen} effect="spin" />
            </div>
            <style>{`
                .testDiv {
                    position: relative;
                    padding: 15px;
                    display: inline-block;
                    color: #333;
                    transition: color .5s;
                }
                .testDiv:hover {
                    color: red;
                }
            `}</style>
        </>
    )
}