简介
react-gif-picker 是一个可以在 React 应用中方便使用的小工具，它可以帮助用户从 Giphy 上选择合适的 gif 图片。
react-gif-picker 是由 NPM 提供的一个 React 组件，可以快速集成到 React 应用中，并且可以自定义选择器的尺寸、语言以及搜索展示的 GIF 图片类别。
安装
您可以通过以下命令进行安装：
npm install react-gif-picker --save
使用
为了使用 react-gif-picker，必须将其包含在您的 React 元素中。在以下示例中，我们将在主 react 元素中使用 react-gif-picker：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ --------- ---- -------------------
----- --- ------- --------- -
--------- - ---- ---- -- -
------------------- --- ----- --- -- ------ -----
-
------ -- -
------ -
-----
----------
-------------------------
--------------------------
--
------
--
-
-
------ ------- ----在上面的示例中，我们传递了一个 apiKey 属性，这个 apiKey 属性可由 Giphy Developers 颁发。
我们还为 GifPicker 组件添加了另一个属性 gifPicked，当用户选择一个 Gif 文件时将触发该属性，该属性将返回被选择 GIF 文件的 ID 以及 URL。
参数（props）说明
现在让我们来介绍一下 GifPicker 属性（props）。以下是各个属性的说明：
apiKey
- string（必传）
如果要使用 GifPicker，必须输入有效的 API 密钥。可以从 Giphy 开放平台获得。
// 在 GifPicker 实例上添加 API 密钥
<GifPicker apiKey={'<YOUR_API_KEY>'} />lang
- string（可选）
您可以将 GifPicker 配置为仅搜索特定语言的 GIF。传入几种不同的语言代码，将仅在与这些语言匹配的 GIF 中搜索。默认为 'en'。
// 设置语言
<GifPicker lang={'en, ja, ko'} />onSelect
- function（可选）
您可以将 onSelect 属性添加到 GifPicker 组件中以便在用户选择 GIF 文件时自定义一些交互。当 GIF 文件被选中时，将调用此函数。函数将传递选中的 GIF 文件的 ID 和 URL。
// 自定义选中事件
<GifPicker onSelect={(id, url) => { console.log(`GIF ${id} selected`); }} />categories
- Array[string]（可选）
您可以使用 categories 属性配置 GIF 文件的类别。当用户使用搜索栏时，将只显示指定类别中的 GIF 文件。
// 配置 GIF 文件类别
<GifPicker categories={['Cats', 'Dogs', 'Squirrels']} />结论
以上就是有关 react-gif-picker 的使用教程。如需更多帮助，请查看官方文档（GitHub）或参考它们的示例代码。如果您有任何问题或建议，请在 GitHub 上发起 issue。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005663081e8991b448e218d