@cloudflare/realtimekit-react-native 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +42 -23
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
<!-- PROJECT LOGO -->
|
|
2
2
|
<p align="center">
|
|
3
|
-
<a href="https://
|
|
4
|
-
<img src="https://assets.
|
|
3
|
+
<a href="https://cloudflare.com">
|
|
4
|
+
<img src="https://cf-assets.www.cloudflare.com/slt3lc6tev37/6EYsdkdfBcHtgPmgp3YtkD/0b203affd2053988264b9253b13de6b3/logo-thumbnail.png" alt="Logo" width="180">
|
|
5
5
|
</a>
|
|
6
6
|
|
|
7
|
-
<h2 align="center">React Native
|
|
7
|
+
<h2 align="center">RealtimeKit React Native</h3>
|
|
8
8
|
|
|
9
9
|
<p align="center">
|
|
10
|
-
React Native SDK that provides
|
|
10
|
+
React Native SDK that provides RealtimeKit's core functionality in mobile.
|
|
11
11
|
<br />
|
|
12
|
-
<a href="https://
|
|
12
|
+
<a href="https://docs.realtime.cloudflare.com/rn-core"><strong>Explore the docs »</strong></a>
|
|
13
13
|
<br />
|
|
14
14
|
<br />
|
|
15
15
|
·
|
|
16
|
-
<a href="https://
|
|
16
|
+
<a href="https://community.cloudflare.com/">Report Bug</a>
|
|
17
17
|
·
|
|
18
|
-
<a href="https://
|
|
18
|
+
<a href="https://community.cloudflare.com/">Request Feature</a>
|
|
19
19
|
</p>
|
|
20
20
|
</p>
|
|
21
21
|
|
|
@@ -32,11 +32,11 @@
|
|
|
32
32
|
<!-- ABOUT THE PROJECT -->
|
|
33
33
|
## About The Project
|
|
34
34
|
|
|
35
|
-
The core SDK provides
|
|
35
|
+
The core SDK provides RealtimeKit's core functionality, while letting a developer build a custom UI over it.
|
|
36
36
|
|
|
37
37
|
### Built With
|
|
38
38
|
|
|
39
|
-
- [
|
|
39
|
+
- [Cloudflare](https://cloudflare.com/)
|
|
40
40
|
- [Typescript](https://www.typescriptlang.org/)
|
|
41
41
|
- [Java](https://dev.java/learn/)
|
|
42
42
|
- [Objective C](https://developer.apple.com/library/archive/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html#//apple_ref/doc/uid/TP40011210)
|
|
@@ -47,37 +47,56 @@ The core SDK provides Dyte's core functionality, while letting a developer build
|
|
|
47
47
|
1. Install NPM packages
|
|
48
48
|
|
|
49
49
|
```sh
|
|
50
|
-
npm install @
|
|
50
|
+
npm install @cloudflare/realtimekit-react-native @cloudflare/react-native-webrtc
|
|
51
51
|
```
|
|
52
52
|
|
|
53
|
-
_Note: For platform specific installation instructions, please refer to the [Documentation](https://docs.
|
|
53
|
+
_Note: For platform specific installation instructions, please refer to the [Documentation](https://docs.realtime.cloudflare.com/rn-core)._
|
|
54
54
|
<!-- USAGE EXAMPLES -->
|
|
55
55
|
## Usage
|
|
56
56
|
|
|
57
|
-
A `meeting` object can be created using the `
|
|
57
|
+
A `meeting` object can be created using the `useRealtimeKitClient()` hook.
|
|
58
58
|
|
|
59
59
|
```ts
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
60
|
+
import React from 'react';
|
|
61
|
+
import { useRealtimeKitClient, RealtimeKitProvider } from '@cloudflare/realtimekit-react-native';
|
|
62
|
+
|
|
63
|
+
export default function App() {
|
|
64
|
+
const [meeting, initMeeting] = useRealtimeKitClient();
|
|
65
|
+
React.useEffect(() => {
|
|
66
|
+
const init = async () => {
|
|
67
|
+
const meetingOptions = {
|
|
63
68
|
audio: true,
|
|
64
69
|
video: true,
|
|
65
|
-
|
|
66
|
-
|
|
70
|
+
};
|
|
71
|
+
await initMeeting({
|
|
72
|
+
authToken: 'YourAuthToken',
|
|
73
|
+
defaults: meetingOptions,
|
|
74
|
+
});
|
|
75
|
+
};
|
|
76
|
+
init();
|
|
77
|
+
if (meeting) meeting.joinRoom();
|
|
78
|
+
}, []);
|
|
79
|
+
|
|
80
|
+
if (meeting)
|
|
81
|
+
return (
|
|
82
|
+
<RealtimeKitProvider value={meeting}>
|
|
83
|
+
{/* Render you Components here*/}
|
|
84
|
+
{/* Components rendered inside RealtimeKitProvider can access RealtimeKitClient object using useRealtimeKitMeeting() hook */}
|
|
85
|
+
</RealtimeKitProvider>
|
|
86
|
+
);
|
|
87
|
+
}
|
|
67
88
|
```
|
|
68
89
|
|
|
69
|
-
The `meeting` object is used for all interaction with
|
|
90
|
+
The `meeting` object is used for all interaction with Cloudflare's servers. For example, the following code snippet is used for a user to join a room.
|
|
70
91
|
|
|
71
92
|
```ts
|
|
72
93
|
await meeting.joinRoom();
|
|
73
94
|
```
|
|
74
95
|
|
|
75
|
-
_For more examples, please refer to the [Documentation](https://docs.
|
|
96
|
+
_For more examples, please refer to the [Documentation](https://docs.realtime.cloudflare.com/rn-core)._
|
|
76
97
|
|
|
77
98
|
## About
|
|
78
99
|
|
|
79
|
-
`@
|
|
100
|
+
`@cloudflare/realtimekit-react-native` is created & maintained by Cloudflare, Inc.
|
|
80
101
|
|
|
81
|
-
The names and logos for
|
|
82
|
-
|
|
83
|
-
We love open source software! See [our other projects](https://github.com/dyte-in) and [our products](https://dyte.io).
|
|
102
|
+
The names and logos for Cloudflare are trademarks of Cloudflare, Inc.
|
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cloudflare/realtimekit-react-native",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "Cloudflare RealtimeKit SDK for react native",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
|
-
"author": "
|
|
7
|
-
"homepage": "https://
|
|
6
|
+
"author": "Cloudflare",
|
|
7
|
+
"homepage": "https://realtime.cloudflare.com",
|
|
8
8
|
"types": "lib/index.d.ts",
|
|
9
9
|
"files": [
|
|
10
10
|
"lib",
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"!**/__mocks__"
|
|
22
22
|
],
|
|
23
23
|
"bugs": {
|
|
24
|
-
"url": "https://
|
|
24
|
+
"url": "https://realtime.cloudflare.com/issues"
|
|
25
25
|
},
|
|
26
26
|
"private": false,
|
|
27
27
|
"dependencies": {
|