0.6.0 • Published 5 days ago
@xkit-yx/call-kit-react-ui v0.6.0
网易云信
安装
npm install @xkit-yx/call-kit-react-ui
// or
yarn add @xkit-yx/call-kit-react-ui
单呼
使用示例
初始化
import React, { useState, useEffect } from 'react'
import { CallViewProvider } from '@xkit-yx/call-kit-react-ui'
import NIM from 'xxxx' // im sdk path
// ...
export default () => {
const [nim, setNim] = useState()
useEffect(() => {
const im = NIM.getInstance({
appKey: 'xxxx', // im appkey
token: 'xxxx', // im token
account: 'xxxx', // im account
debugLevel: 'debug',
lbsUrls: ['xxxx'],
linkUrl: 'xxxx',
onconnect: () => {
setNim(im)
},
})
return () => {
im.disconnect()
}
}, [])
return nim ? (
<CallViewProvider
neCallConfig={{
nim,
appKey,
currentUserInfo: { accId: 'xxx' }, // 当前用户的accId
debug: true,
}}
position={{
x: 500,
y: 10,
}}
>
<App />
</CallViewProvider>
) : null
}
其他子组件
import { useCall } from '@xkit-yx/call-kit-react-ui'
// ...
export default () => {
const { call } = useCall()
const handleClick = () => {
call({
accId: 'userId',
type: '2',
})
}
return <button onClick={handleClick}>发起呼叫</button>
}
群呼
使用示例
初始化
import React, { useState, useEffect } from 'react'
import {
GroupCallViewProvider,
GroupCallViewProviderRef,
} from '@xkit-yx/call-kit-react-ui'
import NIM from 'xxxx' // im sdk path
// ...
export default () => {
const [nim, setNim] = useState()
const groupCallViewProviderRef = useRef<GroupCallViewProviderRef>(null)
useEffect(() => {
const im = NIM.getInstance({
appKey: 'xxxx', // im appkey
token: 'xxxx', // im token
account: 'xxxx', // im account
debugLevel: 'debug',
lbsUrls: ['xxxx'],
linkUrl: 'xxxx',
onconnect: () => {
setNim(im)
},
shouldIgnoreMsg: (msg) => {
if (msg.type === 'custom') {
return groupCallViewProviderRef.current?.onMsg?.(msg.content)
} else {
return false
}
},
})
return () => {
im.disconnect()
}
}, [])
return nim ? (
<GroupCallViewProvider
neGroupCallConfig={{
nim,
currentUserInfo: { accId: 'xxx' },
appKey,
debug: true,
}}
position={{ x: 500, y: 10 }}
ref={groupCallViewProviderRef}
>
<App />
</GroupCallViewProvider>
) : null
}
其他子组件
import { useGroupCall } from '@xkit-yx/call-kit-react-ui'
// ...
export default () => {
const { groupCall } = useGroupCall()
const handleClick = () => {
groupCall({ calleeList: ['xxxxx'] })
}
return <button onClick={handleClick}>发起呼叫</button>
}
0.6.0
5 days ago
0.5.0
4 months ago
0.4.5
9 months ago
0.4.4
10 months ago
0.4.3
10 months ago
0.4.2
10 months ago
0.3.7
1 year ago
0.4.1
11 months ago
0.4.0
12 months ago
0.3.6
1 year ago
0.3.5
1 year ago
0.3.4
1 year ago
0.3.3
1 year ago
0.3.2
1 year ago
0.3.1
1 year ago
0.3.0
1 year ago
0.2.8
1 year ago
0.2.7
1 year ago
0.2.6
1 year ago
0.2.5
2 years ago
0.2.4
2 years ago
0.2.3
2 years ago
0.2.2
2 years ago
0.2.1
2 years ago
0.2.0
2 years ago
0.1.7
2 years ago
0.1.6
2 years ago
0.1.5
2 years ago
0.1.4
2 years ago
0.1.3
2 years ago
0.1.2
2 years ago
0.1.1
2 years ago