简介
react-selected-text-menu 是一个 React 组件库，它可以让用户选中文本后呼出一个指定的菜单。这个菜单可以提供一些针对选中文本的操作，比如复制、分享、查找等。它适用于任何需要用户对文本进行操作的场景，可以有效地提升用户的操作体验。
安装
在使用 react-selected-text-menu 前，首先需要使用 npm 安装它：
npm install react-selected-text-menu
安装完成后，即可在 React 项目中使用它。
用法
在项目中引入 react-selected-text-menu：
import SelectedTextMenu from 'react-selected-text-menu';
然后，可以在需要使用的地方使用该组件，例如：
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------------- ---- ---------------------------
----- ------- ------- --------------- -
-------- -
------ -
---- --------------
---------------------
----------------- ------------------ ----- ------- ----- -- -- ------------------------------------------------------------------- ------ ------ ------ ------ ------ ---------
------
--
-
-在组件的 menuItems 属性中，可以设置需要显示的菜单项。每个菜单项是一个对象，其中 text 属性表示菜单项的文本内容，action 属性表示菜单项的点击事件。在上面的示例中，第一个菜单项设置了复制功能，当用户选择该菜单项时，组件通过使用 navigator.clipboard 接口将选中的文本内容写入剪贴板。
指导意义
使用 react-selected-text-menu 可以为用户提供一个便捷的操作方式，使得用户可以更加方便地对文本进行操作。通过自定义菜单项，可以根据不同的场景提供不同的操作，如复制、分享、查找等，可以满足不同用户的需求，提高用户的操作体验。
在上面的示例中，我们利用 navigator.clipboard 在用户点击“复制”菜单项时自动将选中的文本内容复制到剪贴板中。这种方式避免了用户手动进行复制的操作，使得用户体验更加流畅。
示例代码
完整的示例代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------------- ---- ---------------------------
----- ------- ------- --------------- -
-------- -
------ -
---- --------------
---------------------
----------------- ------------------ ----- ------- ----- -- -- ------------------------------------------------------------------- ------ ------ ------ ------ ------ ---------
------
--
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d2e81e8991b448daeab