在前端开发中，Hamburger 插件是非常常见的一种交互组件。他的英文名字来源于汉堡包，因为它的三条线条与汉堡相似。这种组件通常用于移动端的导航汉堡菜单。现在市面上也有许多优秀的 hamburger 开源库，其中就包含了今天我们要介绍的npm包：hamburger-button。
hamburger-button 是一个轻量级的 hamburger 按钮库，它提供了一个 React/Hard DOM 按钮组件，可以轻松地将汉堡按钮添加到页面上。接下来我们将详细介绍怎样使用这个库。
安装
hamburger-button 可以通过npm安装使用。在你的项目路径下打开命令行窗口，输入以下命令安装 hamburger-button：
npm install hamburger-button
组件介绍
hamburger-button 是一个简单的可定制按钮组件，其包含三种状态：打开状态（Open state）、关闭状态（Close state）和悬停状态（Hover state）。这个组件可以用来创建一个给用户提供导航选项的按钮。
组件默认有三个属性：isActive、toggleButton 和 width，下面逐一介绍：
isActive：一个布尔类型的属性，表示按钮是处于打开状态还是关闭状态。默认值为 false。toggleButton：一个无参函数，用于在组件渲染时来表示 toggle 按钮的点击事件。默认值是空函数。width：一个数字类型的属性，表示按钮的宽度。默认值是 36。
示例
下面是一个使用 hamburger-button 的示例代码：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ --------------- ---- -------------------
-------- ----- -
----- -------- ---------- - ----------------
----- ------------ - -- -- -------------------
------ -
-----
----------------
-----------------
---------------------------
----------
--
------
--
-在上面的代码中，我们使用了 React 的 useState() 钩子函数。它用于将初始值 false 赋给状态值 active，然后定义了一个名为 toggleButton 的函数，它用于在组件渲染时来表示 toggle 按钮的点击事件。接下来的代码中，我们将创建一个 HamburgerButton 组件，其中传递了上述的 active、toggleButton 和 width 属性。
总结
本文介绍了 hamburger-button 的使用教程。hamburger-button 是一个简单并且易上手的库，可以用于创建移动端汉堡菜单。它的三种状态使得它适用于各种类型的场景。如有任何问题，欢迎留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600567e581e8991b448e4133