diff --git a/docs/react/index.html b/docs/react/index.html
new file mode 100644
index 000000000..4f0862de0
--- /dev/null
+++ b/docs/react/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>WIP</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+</head>
+<body>
+    WIP
+</body>
+</html>
\ No newline at end of file
diff --git a/packages/artplayer-react/.npmignore b/packages/artplayer-react/.npmignore
new file mode 100644
index 000000000..429145126
--- /dev/null
+++ b/packages/artplayer-react/.npmignore
@@ -0,0 +1,9 @@
+node_modules
+.DS_Store
+yarn.lock
+package-lock.json
+test
+coverage
+.nyc_output
+.cache
+docs
\ No newline at end of file
diff --git a/packages/artplayer-react/.npmrc b/packages/artplayer-react/.npmrc
new file mode 100644
index 000000000..9cf949503
--- /dev/null
+++ b/packages/artplayer-react/.npmrc
@@ -0,0 +1 @@
+package-lock=false
\ No newline at end of file
diff --git a/packages/artplayer-react/README.md b/packages/artplayer-react/README.md
new file mode 100644
index 000000000..21f60a8dc
--- /dev/null
+++ b/packages/artplayer-react/README.md
@@ -0,0 +1,42 @@
+# artplayer-react
+
+Artplayer React Component, It is recommended to package itself according to actual business needs.
+
+## Demo
+
+[Checkout the demo](https://artplayer.org/react/) from Github Pages
+
+## Install
+
+Install with `npm`
+
+```
+$ npm install artplayer-react
+```
+
+Or install with `yarn`
+
+```
+$ yarn add artplayer-react
+```
+
+## Usage
+
+```js
+import Artplayer from 'artplayer-react';
+import 'artplayer/dist/artplayer.css';
+
+// ...
+<Artplayer
+    option={
+        {
+            // option, no 'container' property required
+        }
+    }
+    getInstance={ins => console.log(ins)} // get the instance
+/>;
+```
+
+## License
+
+MIT © [Harvey Zack](https://www.zhw-island.com/)
diff --git a/packages/artplayer-react/package.json b/packages/artplayer-react/package.json
new file mode 100644
index 000000000..6ad0f8065
--- /dev/null
+++ b/packages/artplayer-react/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "artplayer-react",
+  "version": "1.0.6",
+  "description": "Artplayer React Component",
+  "main": "src/index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zhw2590582/ArtPlayer.git"
+  },
+  "keywords": [
+    "video",
+    "player"
+  ],
+  "author": "Harvey Zack <laozhaochaguan@gmail.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/zhw2590582/ArtPlayer/issues"
+  },
+  "homepage": "https://github.com/zhw2590582/ArtPlayer#readme",
+  "dependencies": {
+    "artplayer": "^1.0.6",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6"
+  }
+}
diff --git a/packages/artplayer-react/src/index.js b/packages/artplayer-react/src/index.js
new file mode 100644
index 000000000..e0b1b4f0e
--- /dev/null
+++ b/packages/artplayer-react/src/index.js
@@ -0,0 +1,37 @@
+import React, { Component } from 'react';
+import Artplayer from 'artplayer';
+
+export default class ArtplayerComponent extends Component {
+    constructor(props) {
+        super(props);
+        Artplayer.utils.errorHandle(
+            props.option && typeof props.option === 'object',
+            "The prop 'option' object cannot be missing",
+        );
+        this.instance = null;
+        this.artRef = React.createRef();
+    }
+
+    componentDidMount() {
+        const { option, getInstance } = this.props;
+        this.instance = new Artplayer({
+            ...option,
+            container: this.artRef,
+        });
+
+        if (getInstance && typeof getInstance === 'function') {
+            getInstance(this.instance);
+        }
+    }
+
+    componentWillUnmount() {
+        if (this.instance && this.instance.destroy) {
+            this.instance.destroy();
+        }
+    }
+
+    render() {
+        const { option, getInstance, ...rest } = this.props;
+        return <div ref={this.artRef} {...rest} />;
+    }
+}