@pasmac/react-hamburger-button/index.js

A very Simple Animated React Hamburger Button

import { useState } from "react"
import { Button, ButtonSVG } from "./StyledComponent"

export const HamburgerButton = ({color, big}) => {
  const [state, setState] = useState(false)

  return (
    <Button 
          onClick={()=>setState((s)=>!s)} 
          state={state}
          color={color}
          big={big}
          >
      <span></span>
    </Button>
  )
}
export const HamburgerButtonSVG = ({color, big}) => {
  const [state, setState] = useState(false)

  return (
    <ButtonSVG 
          onClick={()=>{setState((s)=>!s)}} 
          state={state}
          color={color}
          big={big}
          >
      <svg className="__hamburger">
        <line x1="5%" x2="95%" y1="20%" y2="20%" />
        <line x1="5%" x2="95%" y1="50%" y2="50%" />
        <line x1="5%" x2="95%" y1="80%" y2="80%" />
      </svg>
      <svg className="__exit">
        <line x1="10%" x2="90%" y1="10%" y2="90%" />
        <line x1="10%" x2="90%" y1="90%" y2="10%" />
      </svg>
    </ButtonSVG>
  )
}