From 2217e8a35b7846593bd0807073feef35293177a0 Mon Sep 17 00:00:00 2001
From: Al Mamun Khan <almamunkhan04@gmail.com>
Date: Wed, 9 Jan 2019 15:12:26 +0600
Subject: [PATCH] added react js snippets

---
 README.md                    |  6 ++++--
 react-js/array-plus-delay.js | 23 +++++++++++++++++++++++
 react-js/delay.js            | 32 ++++++++++++++++++++++++++++++++
 3 files changed, 59 insertions(+), 2 deletions(-)
 create mode 100644 react-js/array-plus-delay.js
 create mode 100644 react-js/delay.js

diff --git a/README.md b/README.md
index 5fafd07..70f0ed1 100644
--- a/README.md
+++ b/README.md
@@ -1,9 +1,11 @@
-## JavaScript, Python (Flask), Php (Laravel) Code Snippets
+## JavaScript, React JS, Python (Flask), Php (Laravel) Code Snippets
 
 ## JavaScript Code Snippets 
 - [JavaScript Form Validation](js/form-validation.js) 
 - [Select Single Checkbox](js/single-checkbox-selection.js) 
-
+## React JS Code Snippets 
+- [Array Interval Delay and Hide Previous Element](react-js/array-plus-delay.js) 
+- [Manual Delay](react-js/delay.js) 
 ## Python Code Snippets 
 - [Create a Host](python/image-cropping.py)
 - [Multiple Image Upload](python/multiple-image-upload.py)
diff --git a/react-js/array-plus-delay.js b/react-js/array-plus-delay.js
new file mode 100644
index 0000000..eb0f99a
--- /dev/null
+++ b/react-js/array-plus-delay.js
@@ -0,0 +1,23 @@
+  function ArrayPlusDelay(array, delay) {
+            var i = 0;
+
+            // seed first call and store interval (to clear later)
+
+            var interval = setInterval(function () {
+                // each loop, call passed in function
+                //ReactDOM.render(array[i], document.getElementById("root")=);
+                if(document.getElementById("id_name") != null) {
+                    document.getElementById("id_name").innerHTML = array[i];
+                } 	
+                // increment, and if we're past array, clear interval
+                if (i++ >= array.length - 1) clearInterval(interval);
+                return;
+            }, delay);
+
+            return interval;
+        }
+	ArrayPlusDelay(array_numbers, delay_time);
+
+//Example
+        ArrayPlusDelay([0,1,5,2], 1000);  // Every Element Call 1 Second Delay
+
diff --git a/react-js/delay.js b/react-js/delay.js
new file mode 100644
index 0000000..7d4318c
--- /dev/null
+++ b/react-js/delay.js
@@ -0,0 +1,32 @@
+//install prop-types
+import React from 'react';
+import PropTypes from 'prop-types';
+
+class Delay extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {hidden : true};
+    }
+
+    componentDidMount() {
+        setTimeout(() => {
+            this.setState({hidden: false});
+        }, this.props.waitBeforeShow);
+    }
+
+    render() {
+        return this.state.hidden ? '' : this.props.children;
+    }
+}
+
+Delay.propTypes = {
+    waitBeforeShow: PropTypes.number.isRequired
+};
+
+export default Delay;
+
+// Example Call where want to use it
+<Delay waitBeforeShow={1000}> // delay time
+   {images10}
+</Delay>