feat: update demo and readme for seed generation

Author: wwayne

README.md

@@ -36,24 +36,28 @@ or
 yarn add react-nice-avatar
 ```
 
-or
-
-```sh
-pnpm i react-nice-avatar
-```
-
 ## Usage
 
 1. Import the component.
     ```js
     import Avatar, { genConfig } from 'react-nice-avatar'
     ```
-2. Generate a random configuration, save it so that you can always rendering a same avatar with the configuration.
+2. Generate a configuration
+   
+    Config can be generated with a seed, seed is a string of name, email or anything you like
     ```js
-    const config = genConfig(AvatarConfig?) 
+    const config = genConfig("hi@dapi.to") 
     ```
 
-    `tip`: AvatarConfig is an Object, plz check the **Options** below for what attributes can be passed in
+    or it can be generate with customized object, plz check the Options below for what attributes can be passed in
+    ```js
+    const config = genConfig({ sex: "man", hairStyle: "mohawk" }) 
+    ```
+    
+    or generate a random config by passing nothing to the function genConfig
+    ```js
+    const config = genConfig() 
+    ```
 
 3. Render the component with specific width / height and configuration.
     ```jsx

demo/src/App/index.scss

@@ -4,3 +4,7 @@
   background: #000;
   color: #fff;
 }
+
+.inputField {
+  background: rgba(255, 255, 255, 0.1);
+}

demo/src/App/index.tsx

@@ -54,6 +54,12 @@ class App extends Component {
     }
   }
 
+  onInputKeyUp (e) {
+    this.setState({
+      config: genConfig(e.target.value)
+    })
+  }
+
   render() {
     const { config, shape } = this.state
     return (
@@ -74,6 +80,10 @@ class App extends Component {
             updateConfig={this.updateConfig.bind(this)}
             updateShape={this.updateShape.bind(this)}
             download={this.download.bind(this)} />
+          <input
+            className="w-64 h-10 p-2 rounded mt-10 inputField text-center outline-none"
+            placeholder="input name or email ..."
+            onKeyUp={this.onInputKeyUp.bind(this)} />
         </main>
 
         {/* Avatar list */}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-nice-avatar",
-  "version": "1.2.4",
+  "version": "1.3.0",
   "description": "react library for generating avatar",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",