在前端开发中，经常会用到一些 JavaScript 库或框架来优化代码和提高开发效率。其中一个非常实用的工具就是 npm 包。在这篇文章中，我们将介绍一款优秀的 npm 包 react-toggled，帮助你更好地了解它的使用和优势。
什么是 react-toggled
react-toggled 是一个为 React 应用程序提供 simple 和 accessible 的状态切换 UI 组件的库。它作为一个高阶组件 (HOC)，使得在应用程序中使用切换器变得很容易。
这款库主要包含两个组件：
useToggle：自定义 hook，它可以视情况更改状态，并通过回调函数传递状态变化。Toggle：一个 React 组件，它为你的应用程序提供了一个简单易懂的 UI 操作。
如何使用 react-toggled
安装 react-toggled
在开始使用 react-toggled 之前，我们需要先进行安装。在命令行中输入以下命令：
npm install react-toggled
引入 react-toggled
在你的 react 项目中，需要引入 react-toggled 包。可以在文件开头加入以下语句:
import { useToggle, Toggle } from 'react-toggled';接着，我们可以在 JSX 中使用 Toggle 组件。通过在 Toggle 组件上设置一些属性，我们就可以实现绑定状态、设置初始值（“打开”或“关闭”）以及定义状态更改时的回调函数。
使用 Toggle 组件
下面我们将展示如何使用 Toggle 组件来实现一个简单的开关按钮：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------- ------ - ---- ----------------
-------- --------------- -
----- ---- ------- - -----------------
------ -
-----
------- ----- --- ------ ---
-------------------------
---------------------------
-------------- --
---------
------
--
-在上述代码中，我们首先调用 useToggle hook 来定义“on”和“toggle”变量。其中，“on”变量指示当前开关按钮状态是否打开，“toggle”变量用于切换状态。
接下来，在 Toggle 组件中，我们定义了开启和关闭的标签信息，并将其绑定到状态切换按钮中。最后，我们将开关按钮渲染到 HTML 中。
现在，运行代码，我们将看到一个开关按钮。默认情况下，按钮是关闭状态，但是当我们点击它时，它将切换到打开状态。
其他属性
Toggle 组件还有些其他的属性。我们可以通过设置 “className”属性来自定义按钮的样式。我们还可以使用 “aria-label”属性来定义按钮的 Accessibility 信息，提高网站的可访问性。
除此之外，Toggle 组件还有一些子组件，如：Toggle.On、Toggle.Off、Toggle.Button。这些子组件最大的作用是为了帮助我们更好地定义文本内容和按钮的样式。
总结
通过本文的介绍，我们已经了解到了 npm 包 react-toggled 的相关内容，以及如何安装和使用它。 我们可以看到，使用 react-toggled 包可以快速地创建一个开关按钮，并在用户点击按钮时更改状态。
react-toggled 包的美妙之处在于它可定制性强，支持的 Accessibility 功能多，而且易于使用。它能让我们轻松快速地构建良好的交互体验，同时提高我们的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/react-toggled