重写为Typescript项目并更新React版本至18.2.0

.eslintrc.js

@@ -1,5 +1,31 @@
 module.exports = {
-  extends: ['prettier'],
+  env: {
+    browser: true,
+    es2021: true
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react/recommended',
+    'prettier'
+  ],
+  overrides: [
+    {
+      env: {
+        node: true
+      },
+      files: ['.eslintrc.{js,cjs}'],
+      parserOptions: {
+        sourceType: 'script'
+      }
+    }
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module'
+  },
+  plugins: ['@typescript-eslint', 'react'],
   rules: {
     'prettier/prettier': 'error'
   }

.gitignore

@@ -1,4 +1,3 @@
 .idea
 node_modules/
-build/
-yarn-error.log
+build/

README.md

@@ -22,61 +22,54 @@ npm install react-aplayer --save
 ```
 
 ### Example
-Check `src/app.js` to get more example;
+Check `src/App.tsx` to get more example;
 
 ```javascript
 import React from 'react';
-import ReactAplayer from 'react-aplayer';
+import ReactAplayer from 'ReactAplayer';
 
-export default class App extends React.Component {
-  // event binding example
-  onPlay = () => {
-    console.log('on play');
-  };
-
-  onPause = () => {
-    console.log('on pause');
-  };
-
-  // example of access aplayer instance
-  onInit = ap => {
-    this.ap = ap;
-  };
-
-  render() {
+export default function () {
+    let [ap, setAp] = React.useState(null);
+    const onPause = () => {
+        console.log('onPause');
+    };
+    const onInit = ap => {
+        setAp(ap);
+        ap.on('play', () => {
+            console.log('on play');
+        });
+    };
     const props = {
-      theme: '#F57F17',
-      lrcType: 3,
-      audio: [
-        {
-          name: '光るなら',
-          artist: 'Goose house',
-          url: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.mp3',
-          cover: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.jpg',
-          lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.lrc',
-          theme: '#ebd0c2'
-        }
-      ]
+        theme: '#F57F17',
+        lrcType: 3,
+        audio: [
+            {
+                name: '光るなら',
+                artist: 'Goose house',
+                url: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.mp3',
+                cover: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.jpg',
+                lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.lrc',
+                theme: '#ebd0c2'
+            }
+        ]
     };
 
     return (
-      <div>
-        <ReactAplayer
-          {...props}
-          onInit={this.onInit}
-          onPlay={this.onPlay}
-          onPause={this.onPause}
-        />
-        {/* example of access aplayer instance API */}
-        <button onClick={() => this.ap.toggle()}>toggle</button>
-      </div>
+        <div>
+            <ReactAplayer
+                {...props}
+                onInit={onInit}
+                onPause={onPause}
+            />
+            {/* example of access aplayer instance API */}
+            <button onClick={() => ap.toggle()}>toggle</button>
+        </div>
     );
-  }
 }
 ```
 
 ### Props
-**`onInit`** as a callback function will be invoked when aplayer instance get initialized and with the instance as parameter, through which you can get the full control of aplayer API. *see `onInit` in above example*
+**`onInit`** as a callback function will be invoked when aplayer instance get initialized and with the instance as parameter, through which you can get the full control of aplayer API. *see `onInit` in above example*.
 
 Other props are exactly the same with original APlayer, please check the [docs](https://aplayer.js.org/#/home) for more details.
 
@@ -85,10 +78,15 @@ Event handlers are triggered when corresponding event happens, it takes a callba
 
 All the event handlers in `react-aplayer` are in a format of captalized event name prefixed with `on`, e.g. in aplayer, event `play` will be `onPlay` in react-aplayer,
 
+If you need to add event handlers, you don't have to get the aplayer instance through `onInit`, you can just use the event handlers in props, e.g. `onPlay`, `onPause` etc. *see `onPause` in above example*.
+
 Please check the [docs](https://aplayer.js.org/#/home?id=event-binding) for more events.
 
 ### APlayer Instance
-APlayer Instance can be accessed through `onInit`
+
+Use `onInit` to get the instance and then use it to call the API. `onInit` must be a function whose parameter is the aplayer instance.
+
+> tips: use `setState` to ensure the API isn't `null` like the example above.
 
 ## LICENSE
 [MIT License](https://github.com/sabrinaluo/react-aplayer/blob/master/LICENSE)

dist/App.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './app.css';
+declare const App: React.FC;
+export default App;

dist/ReactAplayer.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import 'aplayer/dist/APlayer.min.css';
+import { APlayerOptions } from './react-aplayer';
+declare const ReactAplayer: React.FC<APlayerOptions>;
+export default ReactAplayer;

dist/data.d.ts

@@ -0,0 +1,28 @@
+declare const _default: {
+    apLrcList: {
+        theme: string;
+        lrcType: number;
+        audio: {
+            name: string;
+            artist: string;
+            url: string;
+            cover: string;
+            lrc: string;
+            theme: string;
+        }[];
+    };
+    apFixedLrcList: {
+        fixed: boolean;
+        mini: boolean;
+        lrcType: number;
+        audio: {
+            name: string;
+            artist: string;
+            url: string;
+            cover: string;
+            lrc: string;
+            theme: string;
+        }[];
+    };
+};
+export default _default;

dist/index.d.ts

@@ -0,0 +1 @@
+export {};

dist/react-aplayer.min.js.LICENSE.txt

@@ -0,0 +1,9 @@
+/**
+ * @license React
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */