-
Notifications
You must be signed in to change notification settings - Fork 45
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
8fc65b2
commit 38a3bec
Showing
29 changed files
with
4,869 additions
and
1,227 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,64 +1,64 @@ | ||
# agora-react-uikit | ||
# Agora React Web UIKit | ||
|
||
> A React based UIKit for the Agora Web SDK | ||
> Instantly integrate Agora video calling or streaming into your web application using a React based UIKit for the Agora Web SDK. | ||
[![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) | ||
|
||
## Getting started | ||
|
||
### Requirements | ||
- [An Agora developer account](https://sso.agora.io/en/signup?utm_source=github&utm_repo=Agora-React-Web-UIKit) | ||
- A React project | ||
- A Modern Web Browser | ||
|
||
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. | ||
|
||
### Installation | ||
To a react app (generated using create-react-app) add the UIKit: | ||
To a react application, add the following: | ||
|
||
```bash | ||
npm i agora-react-uikit | ||
``` | ||
|
||
### Usage | ||
|
||
This UIKit is very simple to use and contains a high level component called `AgoraUIKit`. You can check out code explanation here. | ||
This UIKit contains a high level component called `AgoraUIKit`. You can check out code explanation here. | ||
|
||
**A simple sample app integrating Agora UI Kit:** | ||
```jsx | ||
import React, { useState } from 'react' | ||
import AgoraUIKit, { layout } from 'agora-react-uikit' | ||
import React, {useState} from 'react'; | ||
import AgoraUIKit from 'agora-react-uikit'; | ||
|
||
const App = () => { | ||
const [videocall, setVideocall] = useState(true) | ||
|
||
return videocall ? ( | ||
<div style={{display: 'flex', flex: 1}}> | ||
<AgoraUIKit | ||
rtcProps={{ | ||
appId: '<Agora App ID>', | ||
channel: 'test', | ||
token: '<Channel Token>', | ||
}} | ||
callbacks={{ | ||
EndCall: () => setVideocall(false), | ||
}} /> | ||
<div/> | ||
const [videoCall, setVideoCall] = useState(true); | ||
const rtcProps = { | ||
appId: '<Agora App ID>', | ||
channel: 'test', | ||
token: '<Your Agora Token>' // skip if you're using an app in testing mode | ||
}; | ||
const callbacks = { | ||
EndCall: () => setVideoCall(false), | ||
}; | ||
return videoCall ? ( | ||
<AgoraUIKit rtcProps={rtcProps} callbacks={callbacks} /> | ||
) : ( | ||
<h3 onClick={() => setVideocall(true)}>Start Call</h3> | ||
) | ||
} | ||
<Text onPress={()=>setVideoCall(true)}>Start Call</Text> | ||
); | ||
}; | ||
|
||
export default App | ||
export default App; | ||
``` | ||
|
||
**Replace the `'<Agora App ID>'` with your own appID**. | ||
|
||
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. | ||
**Insert your Agora AppID and Token**. | ||
|
||
### Demo Project | ||
There's a demo available in `/example`. | ||
There's a demo project in the repo [here](https://github.com/AgoraIO-Community/Web-React-UIKit/tree/main/example). | ||
|
||
### Instructions for running the demo: | ||
1. Add your Agora App ID to `/example/src/App.tsx` | ||
2. Run `npm start` to start the bundler to build the library | ||
3. Execute `cd example && npm start` to run the example app | ||
|
||
## Documentation | ||
|
||
For full documentation, see our [docs page](https://agoraio-community.github.io/Web-React-UIKit/). | ||
|
||
- Instal Node.js LTS | ||
- Add your Agora App ID to `/example/src/App.tsx` | ||
- Run `npm start` to start the bundler | ||
- Run `cd example && npm start` to run the example app | ||
You can visit the [wiki](https://github.com/AgoraIO-Community/Web-React-UIKit/wiki) for other examples and in depth guide. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,106 @@ | ||
:root { | ||
--light-hl-0: #000000; | ||
--dark-hl-0: #D4D4D4; | ||
--light-hl-1: #AF00DB; | ||
--dark-hl-1: #C586C0; | ||
--light-hl-2: #001080; | ||
--dark-hl-2: #9CDCFE; | ||
--light-hl-3: #A31515; | ||
--dark-hl-3: #CE9178; | ||
--light-hl-4: #0000FF; | ||
--dark-hl-4: #569CD6; | ||
--light-hl-5: #795E26; | ||
--dark-hl-5: #DCDCAA; | ||
--light-hl-6: #0070C1; | ||
--dark-hl-6: #4FC1FF; | ||
--light-hl-7: #008000; | ||
--dark-hl-7: #6A9955; | ||
--light-hl-8: #800000; | ||
--dark-hl-8: #808080; | ||
--light-hl-9: #267F99; | ||
--dark-hl-9: #4EC9B0; | ||
--light-hl-10: #FF0000; | ||
--dark-hl-10: #9CDCFE; | ||
--light-hl-11: #000000FF; | ||
--dark-hl-11: #D4D4D4; | ||
--light-code-background: #FFFFFF; | ||
--dark-code-background: #1E1E1E; | ||
} | ||
|
||
@media (prefers-color-scheme: light) { :root { | ||
--hl-0: var(--light-hl-0); | ||
--hl-1: var(--light-hl-1); | ||
--hl-2: var(--light-hl-2); | ||
--hl-3: var(--light-hl-3); | ||
--hl-4: var(--light-hl-4); | ||
--hl-5: var(--light-hl-5); | ||
--hl-6: var(--light-hl-6); | ||
--hl-7: var(--light-hl-7); | ||
--hl-8: var(--light-hl-8); | ||
--hl-9: var(--light-hl-9); | ||
--hl-10: var(--light-hl-10); | ||
--hl-11: var(--light-hl-11); | ||
--code-background: var(--light-code-background); | ||
} } | ||
|
||
@media (prefers-color-scheme: dark) { :root { | ||
--hl-0: var(--dark-hl-0); | ||
--hl-1: var(--dark-hl-1); | ||
--hl-2: var(--dark-hl-2); | ||
--hl-3: var(--dark-hl-3); | ||
--hl-4: var(--dark-hl-4); | ||
--hl-5: var(--dark-hl-5); | ||
--hl-6: var(--dark-hl-6); | ||
--hl-7: var(--dark-hl-7); | ||
--hl-8: var(--dark-hl-8); | ||
--hl-9: var(--dark-hl-9); | ||
--hl-10: var(--dark-hl-10); | ||
--hl-11: var(--dark-hl-11); | ||
--code-background: var(--dark-code-background); | ||
} } | ||
|
||
body.light { | ||
--hl-0: var(--light-hl-0); | ||
--hl-1: var(--light-hl-1); | ||
--hl-2: var(--light-hl-2); | ||
--hl-3: var(--light-hl-3); | ||
--hl-4: var(--light-hl-4); | ||
--hl-5: var(--light-hl-5); | ||
--hl-6: var(--light-hl-6); | ||
--hl-7: var(--light-hl-7); | ||
--hl-8: var(--light-hl-8); | ||
--hl-9: var(--light-hl-9); | ||
--hl-10: var(--light-hl-10); | ||
--hl-11: var(--light-hl-11); | ||
--code-background: var(--light-code-background); | ||
} | ||
|
||
body.dark { | ||
--hl-0: var(--dark-hl-0); | ||
--hl-1: var(--dark-hl-1); | ||
--hl-2: var(--dark-hl-2); | ||
--hl-3: var(--dark-hl-3); | ||
--hl-4: var(--dark-hl-4); | ||
--hl-5: var(--dark-hl-5); | ||
--hl-6: var(--dark-hl-6); | ||
--hl-7: var(--dark-hl-7); | ||
--hl-8: var(--dark-hl-8); | ||
--hl-9: var(--dark-hl-9); | ||
--hl-10: var(--dark-hl-10); | ||
--hl-11: var(--dark-hl-11); | ||
--code-background: var(--dark-code-background); | ||
} | ||
|
||
.hl-0 { color: var(--hl-0); } | ||
.hl-1 { color: var(--hl-1); } | ||
.hl-2 { color: var(--hl-2); } | ||
.hl-3 { color: var(--hl-3); } | ||
.hl-4 { color: var(--hl-4); } | ||
.hl-5 { color: var(--hl-5); } | ||
.hl-6 { color: var(--hl-6); } | ||
.hl-7 { color: var(--hl-7); } | ||
.hl-8 { color: var(--hl-8); } | ||
.hl-9 { color: var(--hl-9); } | ||
.hl-10 { color: var(--hl-10); } | ||
.hl-11 { color: var(--hl-11); } | ||
pre, code { background: var(--code-background); } |
Oops, something went wrong.