README
cloudbase-react-hooks
安装
npm install --save @cloudbase/react-hooks
使用
初始化
const { createCloudbaseHooks } = require('@cloudbase/react-hooks')
// 初始化 Hook
const {
useCloudbase,
useLoginState,
useUpload
useCloudFile,
useDatabaseWatch
} = createCloudbaseHooks({
env: 'cloudbase-env-id',
loginType: 'custom',
fetchTicket: async function() {
// 拉取自定义登录ticket...
}
})
useCloudbase()
返回 Cloudbase 实例,如果尚未初始化完毕,那么返回 null
。
function App() {
const cloudbase = useCloudbase()
return (
cloudbase ?
<div>Hello, Cloudbase!</div> :
<div>Cloudbase正在初始化...</div>
)
}
useLoginState()
返回当前登录状态 loginState
和登录凭据 credential
function App() {
const { loginState, credential } = useLoginState()
return (
loginState ?
<div>登录成功,refreshToken:{credential.refreshToken}</div> :
<div>还没有登录哦</div>
)
}
useUpload()
文件上传
function App() {
const { upload, progressEvent, uploading, result, error } = useUpload()
async function onFileChange(e) {
const file = e.target.files[0]
await upload('file-cloud-path', file)
}
if (uploading) {
const percent = progressEvent ?
(progressEvent.loaded / progressEvent.total * 100).toFixed(2) :
0
return (
<div>正在上传中,上传进度:{percent}%</div>
)
} else if (result) {
return <div>上传成功,fileID:{result.fileID}</div>
} else if (error) {
return <div>上传失败:{error.message}</div>
} else {
return <input type="file" onChange={onFileChange} />
}
}
useCloudFile()
获取云存储中的文件URL
function App() {
const { url, loading, error } = useCloudFile('cloud://starkwang-e850e3.7374-starkwang-e850e3-1257776809/file-cloud-path')
console.log(url, loading, error)
if (loading) {
return <div>加载图片路径中...</div>
} else if (url) {
return <img src={url}/>
} else if (error) {
return <div>加载图片失败:{error.message}</div>
} else {
return <div>Hello</div>
}
}
useDatabaseWatch()
实时监听数据库
function App() {
const { snapshot, connecting } = useDatabaseWatch('messages', { roomId: '123' })
if (connecting) {
return <div>连接中...</div>
} else if (snapshot) {
return (<div>
{
snapshot.docs.map(doc => <p key={doc._id}>{doc.text}</p>)
}
</div>)
} else {
return <div></div>
}
}
TODO
- 获取数据(useQuery),处理loading、error、retry
- 更新数据(useUpdate)
- 云函数(useFunction)
- SSR