Merge pull request #65 from woofers/update-options

Update options when new props are received

demo/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-wavify-demo",
   "homepage": "http://woofers.github.io/react-wavify",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "dependencies": {
     "@emotion/core": "^10.0.22",
     "@fortawesome/fontawesome-svg-core": "^1.2.25",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-wavify",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "Animated wave component for React",
   "main": "dist/react-wavify.min.js",
   "src": "src/wave.js",

src/wave.js

@@ -5,13 +5,13 @@ class Wave extends Component {
     super(props)
     this.container = React.createRef()
     this.state = { path: '' }
-    this.options = {
+    this.defaults = {
       height: 20,
       amplitude: 20,
       speed: 0.15,
       points: 3,
-      ...props.options
     }
+    this.options = { ...props.options, ...this.defaults }
     this.lastUpdate = 0
     this.elapsed = 0
     this.step = 0
@@ -84,6 +84,23 @@ class Wave extends Component {
     this.lastUpdate = new Date()
   }
 
+  componentDidUpdate(prevProps) {
+    const transfer = key => {
+      if (this.options[key] !== this.props.options[key]) {
+        if (typeof this.props.options[key] === 'undefined') {
+          this.options[key] = this.defaults[key]
+        }
+        else {
+          this.options[key] = this.props.options[key]
+        }
+      }
+    }
+    transfer('height')
+    transfer('amplitude')
+    transfer('speed')
+    transfer('points')
+  }
+
   componentDidMount () {
     if (!this.frameId) {
       this.resume()