使用 Permission 钩
usePermission 是一种反应钩子,旨在查询并监测各种浏览器API的用户权限状况,例如地理定位、通知、麦克风和相机.
特征
- 权限查询:查询指定权限的状况.
- 实时更新:如果更改,则实时监视并更新许可状态.
- 处理错误: 如果权限 API 不支持,或在查询过程中发生错误,则提供错误消息.
- SSR 兼容性:在服务器侧渲染环境中执行安全,在SSY期间避免直接浏览器API调用.
安装
只安装当前钩
npm install @custom-react-hooks/use-permission
或者说
yarn add @custom-react-hooks/use-permission
安装全部钩
npm install @custom-react-hooks/all
或者说
yarn add @custom-react-hooks/all
导入虎克
这个 usePermission 钩必须使用下列命名的导入方式导入:
已命名的导入 :
import { usePermission } from '@custom-react-hooks/use-permission';
这种方法确保了钩子无缝地融入到您的项目中,在您如何使用我们的包时保持一致性和可预测性.
使用量
import React, { useState } from 'react';
import { usePermission } from '@custom-react-hooks/all';
const PermissionComponent = () => {
const [selectedPermission, setSelectedPermission] = useState('geolocation');
const { state, isLoading, error } = usePermission(selectedPermission);
return (
<div>
<h2>Check Browser Permission Status</h2>
<label htmlFor="permission-select">Choose a permission: </label>
<select
id="permission-select"
value={selectedPermission}
onChange={(e) => setSelectedPermission(e.target.value)}
>
<option value="geolocation">Geolocation</option>
<option value="notifications">Notifications</option>
<option value="microphone">Microphone</option>
<option value="camera">Camera</option>
<option value="local-network-access">Local Network Access</option>
</select>
<div>
{isLoading ? (
<p>Loading...</p>
) : (
<p>
Permission status for {selectedPermission}:
<span> {state}</span>
</p>
)}
{error && <p>Error: {error}</p>}
</div>
</div>
);
};
export default PermissionComponent;
API 参考
参数
permissionName: 代表查询权限的字符串。 它必须是由权限 API 定义的支持权限名称之一 .
支持的权限
geolocation- 用户的地理位置notifications- 显示通知push- 推动通知microphone- 音频输入访问camera- 视频输入访问speaker- 音频输出访问device-info- 设备信息background-sync- 背景同步bluetooth- 蓝牙设备接入persistent-storage- 长期储存ambient-light-sensor- 环境光传感器accelerometer- 加速计传感器gyroscope- 陀螺仪传感器magnetometer- 磁强计传感器clipboard-read- 从剪贴板读取clipboard-write- 写入剪贴板payment-handler- 付款管理人local-network-access- 本地网络接入(Chrome 142+)
回返
state: 代表权限状态的字符串 ('prompt', (中文(简体) ),'granted',或'denied') (中文(简体) ).isLoading: 布尔表示权限查询是否在进行中 .error: 如果查询失败或权限 API 不支持, 包含错误消息的字符串 .
使用大小写
- 特性检查: 检查用户是否对地理定位,通知,或相机访问等特性给予许可.
- 有条件的特性访问: 根据许可状态启用或禁用特性.
- 用户权限管理: 提示用户获得必要的许可或提供对其状态的反馈.
- 隐私遵守:通过在访问敏感特性之前检查权限,确保遵守隐私做法.
捐款
我们欢迎各方对 usePermission。请通过问题报告错误或建议加强功能,或将请求拉入项目存储库.