├── .eslintignore ├── .prettierrc ├── .eslintrc ├── .github └── FUNDING.yml ├── package.json ├── .gitignore ├── README.md ├── src └── index.js └── yarn.lock /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | dist/ -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 80, 3 | "tabWidth": 2, 4 | "useTabs": false, 5 | "semi": false, 6 | "singleQuote": true, 7 | "jsxSingleQuote": false, 8 | "trailingComma": "none", 9 | "bracketSpacing": true, 10 | "jsxBracketSameLine": false, 11 | "arrowParens": "avoid", 12 | "requirePragma": false, 13 | "insertPragma": false, 14 | "endOfLine": "lf" 15 | } 16 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["prettier"], 3 | "extends": ["eslint:recommended", "plugin:react/recommended", "prettier"], 4 | "parser": "babel-eslint", 5 | "parserOptions": { 6 | "ecmaVersion": 6, 7 | "sourceType": "module", 8 | "ecmaFeatures": { 9 | "jsx": true, 10 | "modules": true 11 | } 12 | }, 13 | "settings": { 14 | "react": { 15 | "version": "detect" 16 | } 17 | }, 18 | "env": { 19 | "browser": true, 20 | "node": true 21 | }, 22 | "rules": { 23 | // Allow Prettier to throw errors via ESLint 24 | "prettier/prettier": "error" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: [ryancharris] 4 | patreon: # Replace with a single Patreon username 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 13 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-livestream", 3 | "version": "2.0.0", 4 | "author": "Ryan Harris (https://ryanharris.dev)", 5 | "description": "Automatically embed your livestream in your React app whenever you go live!", 6 | "source": "src/index.js", 7 | "main": "dist/index.js", 8 | "module": "dist/index.es.js", 9 | "umd:main": "dist/index.umd.js", 10 | "files": [ 11 | "dist", 12 | "src", 13 | ".eslintrc", 14 | ".eslintignore", 15 | ".prettierrc" 16 | ], 17 | "license": "MIT", 18 | "repository": { 19 | "type": "git", 20 | "url": "https://github.com/ryancharris/react-livestream" 21 | }, 22 | "keywords": [ 23 | "react", 24 | "javascript", 25 | "twitch", 26 | "mixer", 27 | "youtube" 28 | ], 29 | "scripts": { 30 | "build": "microbundle --external react,react-dom,styled-components --globals styled-components=styled --jsx React.createElement", 31 | "dev": "yarn build watch", 32 | "lint": "eslint --config .eslintrc --ext .js,.jsx src/" 33 | }, 34 | "dependencies": { 35 | "styled-components": "^5.0.1" 36 | }, 37 | "devDependencies": { 38 | "babel-eslint": "^10.1.0", 39 | "eslint": "^6.8.0", 40 | "eslint-config-prettier": "^6.10.1", 41 | "eslint-plugin-prettier": "^3.1.2", 42 | "eslint-plugin-react": "^7.19.0", 43 | "microbundle": "^0.12.0-next.8", 44 | "prettier": "^2.0.2", 45 | "prop-types": "^15.7.2", 46 | "react": "^16.13.1", 47 | "react-dom": "^16.13.1" 48 | }, 49 | "peerDependencies": { 50 | "react": "^16.13.1", 51 | "react-dom": "^16.13.1" 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # Snowpack dependency directory (https://snowpack.dev/) 45 | web_modules/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | 84 | # Gatsby files 85 | .cache/ 86 | # Comment in the public line in if your project uses Gatsby and not Next.js 87 | # https://nextjs.org/blog/next-9-1#public-directory-support 88 | # public 89 | 90 | # vuepress build output 91 | .vuepress/dist 92 | 93 | # Serverless directories 94 | .serverless/ 95 | 96 | # FuseBox cache 97 | .fusebox/ 98 | 99 | # DynamoDB Local files 100 | .dynamodb/ 101 | 102 | # TernJS port file 103 | .tern-port 104 | 105 | # Stores VSCode versions used for testing VSCode extensions 106 | .vscode-test 107 | .vscode 108 | 109 | dist 110 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-livestream 2 | 3 | Automatically embed your livestream in your React app whenever you go live! 4 | 5 | This package currently works with the following streaming platforms: 6 | 7 | 1. [Twitch](https://www.twitch.tv/) 8 | 2. [Mixer](https://www.mixer.com/) 9 | 3. [YouTube](https://www.youtube.com/) 10 | 11 | ### Instructions 12 | 13 | `react-livestream` allows you to use a React component called ``, which will embed a responsive `