Skip to content
This repository was archived by the owner on Nov 5, 2024. It is now read-only.

Commit 38a3bec

Browse files
EkaanshAroraEkaanshArora
committed
add docs
1 parent 8fc65b2 commit 38a3bec

29 files changed

+4869
-1227
lines changed

‎README.md

Lines changed: 34 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,64 @@
1-
# agora-react-uikit
1+
# Agora React Web UIKit
22

3-
> A React based UIKit for the Agora Web SDK
3+
> Instantly integrate Agora video calling or streaming into your web application using a React based UIKit for the Agora Web SDK.
44
55
[![NPM](https://img.shields.io/npm/v/agora-react-uikit.svg)](https://www.npmjs.com/package/agora-react-uikit) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
66

77
## Getting started
8-
98
### Requirements
109
- [An Agora developer account](https://sso.agora.io/en/signup?utm_source=github&utm_repo=Agora-React-Web-UIKit)
1110
- A React project
12-
- A Modern Web Browser
1311

1412
You can also use the UIKit outside a React project (for example in a vanilla-js project) using web-components. Find out more in the `/web-component` directory.
13+
1514
### Installation
16-
To a react app (generated using create-react-app) add the UIKit:
15+
To a react application, add the following:
1716

1817
```bash
1918
npm i agora-react-uikit
2019
```
2120

2221
### Usage
2322

24-
This UIKit is very simple to use and contains a high level component called `AgoraUIKit`. You can check out code explanation here.
23+
This UIKit contains a high level component called `AgoraUIKit`. You can check out code explanation here.
2524

2625
**A simple sample app integrating Agora UI Kit:**
2726
```jsx
28-
import React, { useState } from 'react'
29-
import AgoraUIKit, { layout } from 'agora-react-uikit'
27+
import React, {useState} from 'react';
28+
import AgoraUIKit from 'agora-react-uikit';
3029

3130
const App = () => {
32-
const [videocall, setVideocall] = useState(true)
33-
34-
return videocall ? (
35-
<div style={{display: 'flex', flex: 1}}>
36-
<AgoraUIKit
37-
rtcProps={{
38-
appId: '<Agora App ID>',
39-
channel: 'test',
40-
token: '<Channel Token>',
41-
}}
42-
callbacks={{
43-
EndCall: () => setVideocall(false),
44-
}} />
45-
<div/>
31+
const [videoCall, setVideoCall] = useState(true);
32+
const rtcProps = {
33+
appId: '<Agora App ID>',
34+
channel: 'test',
35+
token: '<Your Agora Token>' // skip if you're using an app in testing mode
36+
};
37+
const callbacks = {
38+
EndCall: () => setVideoCall(false),
39+
};
40+
return videoCall ? (
41+
<AgoraUIKit rtcProps={rtcProps} callbacks={callbacks} />
4642
) : (
47-
<h3 onClick={() => setVideocall(true)}>Start Call</h3>
48-
)
49-
}
43+
<Text onPress={()=>setVideoCall(true)}>Start Call</Text>
44+
);
45+
};
5046

51-
export default App
47+
export default App;
5248
```
5349

54-
**Replace the `'<Agora App ID>'` with your own appID**.
55-
56-
If you're using an App ID in secured mode, you'll need to pass in a token (you can generate a temporary token using the Agora console). Otherwise for testing, you can use the insecure mode and pass in null for the token.
50+
**Insert your Agora AppID and Token**.
5751

5852
### Demo Project
59-
There's a demo available in `/example`.
53+
There's a demo project in the repo [here](https://github.com/AgoraIO-Community/Web-React-UIKit/tree/main/example).
54+
55+
### Instructions for running the demo:
56+
1. Add your Agora App ID to `/example/src/App.tsx`
57+
2. Run `npm start` to start the bundler to build the library
58+
3. Execute `cd example && npm start` to run the example app
59+
60+
## Documentation
61+
62+
For full documentation, see our [docs page](https://agoraio-community.github.io/Web-React-UIKit/).
6063

61-
- Instal Node.js LTS
62-
- Add your Agora App ID to `/example/src/App.tsx`
63-
- Run `npm start` to start the bundler
64-
- Run `cd example && npm start` to run the example app
64+
You can visit the [wiki](https://github.com/AgoraIO-Community/Web-React-UIKit/wiki) for other examples and in depth guide.

‎docs/.nojekyll

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
TypeDoc added this file to prevent GitHub Pages from using Jekyll. You can turn off this behavior by setting the `githubPages` option to false.

‎docs/assets/highlight.css

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
:root {
2+
--light-hl-0: #000000;
3+
--dark-hl-0: #D4D4D4;
4+
--light-hl-1: #AF00DB;
5+
--dark-hl-1: #C586C0;
6+
--light-hl-2: #001080;
7+
--dark-hl-2: #9CDCFE;
8+
--light-hl-3: #A31515;
9+
--dark-hl-3: #CE9178;
10+
--light-hl-4: #0000FF;
11+
--dark-hl-4: #569CD6;
12+
--light-hl-5: #795E26;
13+
--dark-hl-5: #DCDCAA;
14+
--light-hl-6: #0070C1;
15+
--dark-hl-6: #4FC1FF;
16+
--light-hl-7: #008000;
17+
--dark-hl-7: #6A9955;
18+
--light-hl-8: #800000;
19+
--dark-hl-8: #808080;
20+
--light-hl-9: #267F99;
21+
--dark-hl-9: #4EC9B0;
22+
--light-hl-10: #FF0000;
23+
--dark-hl-10: #9CDCFE;
24+
--light-hl-11: #000000FF;
25+
--dark-hl-11: #D4D4D4;
26+
--light-code-background: #FFFFFF;
27+
--dark-code-background: #1E1E1E;
28+
}
29+
30+
@media (prefers-color-scheme: light) { :root {
31+
--hl-0: var(--light-hl-0);
32+
--hl-1: var(--light-hl-1);
33+
--hl-2: var(--light-hl-2);
34+
--hl-3: var(--light-hl-3);
35+
--hl-4: var(--light-hl-4);
36+
--hl-5: var(--light-hl-5);
37+
--hl-6: var(--light-hl-6);
38+
--hl-7: var(--light-hl-7);
39+
--hl-8: var(--light-hl-8);
40+
--hl-9: var(--light-hl-9);
41+
--hl-10: var(--light-hl-10);
42+
--hl-11: var(--light-hl-11);
43+
--code-background: var(--light-code-background);
44+
} }
45+
46+
@media (prefers-color-scheme: dark) { :root {
47+
--hl-0: var(--dark-hl-0);
48+
--hl-1: var(--dark-hl-1);
49+
--hl-2: var(--dark-hl-2);
50+
--hl-3: var(--dark-hl-3);
51+
--hl-4: var(--dark-hl-4);
52+
--hl-5: var(--dark-hl-5);
53+
--hl-6: var(--dark-hl-6);
54+
--hl-7: var(--dark-hl-7);
55+
--hl-8: var(--dark-hl-8);
56+
--hl-9: var(--dark-hl-9);
57+
--hl-10: var(--dark-hl-10);
58+
--hl-11: var(--dark-hl-11);
59+
--code-background: var(--dark-code-background);
60+
} }
61+
62+
body.light {
63+
--hl-0: var(--light-hl-0);
64+
--hl-1: var(--light-hl-1);
65+
--hl-2: var(--light-hl-2);
66+
--hl-3: var(--light-hl-3);
67+
--hl-4: var(--light-hl-4);
68+
--hl-5: var(--light-hl-5);
69+
--hl-6: var(--light-hl-6);
70+
--hl-7: var(--light-hl-7);
71+
--hl-8: var(--light-hl-8);
72+
--hl-9: var(--light-hl-9);
73+
--hl-10: var(--light-hl-10);
74+
--hl-11: var(--light-hl-11);
75+
--code-background: var(--light-code-background);
76+
}
77+
78+
body.dark {
79+
--hl-0: var(--dark-hl-0);
80+
--hl-1: var(--dark-hl-1);
81+
--hl-2: var(--dark-hl-2);
82+
--hl-3: var(--dark-hl-3);
83+
--hl-4: var(--dark-hl-4);
84+
--hl-5: var(--dark-hl-5);
85+
--hl-6: var(--dark-hl-6);
86+
--hl-7: var(--dark-hl-7);
87+
--hl-8: var(--dark-hl-8);
88+
--hl-9: var(--dark-hl-9);
89+
--hl-10: var(--dark-hl-10);
90+
--hl-11: var(--dark-hl-11);
91+
--code-background: var(--dark-code-background);
92+
}
93+
94+
.hl-0 { color: var(--hl-0); }
95+
.hl-1 { color: var(--hl-1); }
96+
.hl-2 { color: var(--hl-2); }
97+
.hl-3 { color: var(--hl-3); }
98+
.hl-4 { color: var(--hl-4); }
99+
.hl-5 { color: var(--hl-5); }
100+
.hl-6 { color: var(--hl-6); }
101+
.hl-7 { color: var(--hl-7); }
102+
.hl-8 { color: var(--hl-8); }
103+
.hl-9 { color: var(--hl-9); }
104+
.hl-10 { color: var(--hl-10); }
105+
.hl-11 { color: var(--hl-11); }
106+
pre, code { background: var(--code-background); }

0 commit comments

Comments
 (0)