Skip to content

Commit

Permalink
initialize new project
Browse files Browse the repository at this point in the history
  • Loading branch information
EkaanshArora committed Dec 9, 2021
0 parents commit 8fc65b2
Show file tree
Hide file tree
Showing 73 changed files with 87,392 additions and 0 deletions.
9 changes: 9 additions & 0 deletions .editorconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
5 changes: 5 additions & 0 deletions .eslintignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
build/
dist/
node_modules/
.snapshots/
*.min.js
35 changes: 35 additions & 0 deletions .eslintrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
{
"parser": "@typescript-eslint/parser",
"extends": [
"standard",
"standard-react",
"plugin:prettier/recommended",
"prettier/standard",
"prettier/react",
"plugin:@typescript-eslint/eslint-recommended"
],
"env": {
"node": true
},
"parserOptions": {
"ecmaVersion": 2020,
"ecmaFeatures": {
"legacyDecorators": true,
"jsx": true
}
},
"settings": {
"react": {
"version": "16"
}
},
"rules": {
"space-before-function-paren": 0,
"react/prop-types": 0,
"react/jsx-handler-names": 0,
"react/jsx-fragments": 0,
"react/no-unused-prop-types": 0,
"import/export": 0,
"no-unused-vars": "off"
}
}
23 changes: 23 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@

# See https://help.github.com/ignore-files/ for more about ignoring files.

# dependencies
node_modules

# builds
build
dist
.rpt2_cache

# misc
.DS_Store
.env
.env.local
.env.development.local
.env.test.local
.env.production.local
.vscode

npm-debug.log*
yarn-debug.log*
yarn-error.log*
10 changes: 10 additions & 0 deletions .prettierrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"singleQuote": true,
"jsxSingleQuote": true,
"semi": false,
"tabWidth": 2,
"bracketSpacing": true,
"jsxBracketSameLine": false,
"arrowParens": "always",
"trailingComma": "none"
}
4 changes: 4 additions & 0 deletions .travis.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
language: node_js
node_js:
- 12
- 10
64 changes: 64 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
# agora-react-uikit

> 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:

```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.

**A simple sample app integrating Agora UI Kit:**
```jsx
import React, { useState } from 'react'
import AgoraUIKit, { layout } 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/>
) : (
<h3 onClick={() => setVideocall(true)}>Start Call</h3>
)
}

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.

### Demo Project
There's a demo available in `/example`.

- 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
5 changes: 5 additions & 0 deletions example/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
This example was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

It is linked to the agora-react-uikit package in the parent directory for development purposes.

You can run `npm install` and then `npm start` to test your package.
Loading

0 comments on commit 8fc65b2

Please sign in to comment.