Added dynamic food for the component to dynamicly define the button text and the action (function) that will be handled on click.

README.md

@@ -15,16 +15,39 @@ Never ever worry about a fancy dropdown menu. This component does it for you!
 
 Component usage:
 
-`<Menu width={"20px"} color="rgb(123, 192, 222)" />`
+```jsx
+const food = {
+  a: {
+    value: "Button1",
+    action: () => {
+      alert("test1")
+    }
+  },
+  b: {
+    value: "Button2",
+    action: () => {
+      alert("test2")
+    }
+  },
+  c: {
+    value: "Button3",
+    action: () => {
+      alert("test3")
+    }
+  }
+}
 
-Replace `width` optionally width `height` but don't use both at the same time. 
+<Menu width={"20px"} color="rgb(123, 192, 222)" food={food} />
-To keep the ratio between height and width one has to be given and the other one is calculated by the component.
 
-One example with height:
+//Replace 'width' optionally width 'height' but don't use both at the same time.
+T//o keep the ratio between height and width one has to be given and the other one is calculated by the component.
 
-`<Menu height={"50px"}" />`
+//One example with height:
 
-`color` is optional. The defaul value is `rgb(255, 255, 255)` if it's not defined.
+<Menu height={"50px"}" food={food} />
+
+//'color' is optional. The defaul value is 'rgb(255, 255, 255)' if it's not defined.
+```
 
 # Contact
 

src/components/Menu.js

@@ -16,6 +16,26 @@ class App extends Component {
     *   - width: Int in percentage
     *   - OR height: Int in percentage
     *   - color: String
+    *   - food = {
+    *       a: {
+    *         value: "Button1",
+    *         action: () => {
+    *           alert("test1")
+    *         }
+    *       },
+    *       b: {
+    *         value: "Button2",
+    *         action: () => {
+    *           alert("test2")
+    *         }
+    *       },
+    *       c: {
+    *         value: "Button3",
+    *         action: () => {
+    *           alert("test3")
+    *         }
+    *       }
+    *     }
     */
 
     this.state = {
@@ -147,7 +167,6 @@ class App extends Component {
     if(!(inputWidth ||inputHeight)) {
       console.log("Please define a height OR width!");
     }
-console.log(inputWidth)
     //Units and values seperated
     if(inputWidth !== undefined) {
       //Width
@@ -188,7 +207,6 @@ console.log(inputWidth)
       height: this.getDimensions().height
     };
 
-    console.log(style.height);
     const styleDot = {
       backgroundColor: this.getColor()
     };
@@ -214,14 +232,14 @@ console.log(inputWidth)
         </div>
 
         <div className="Menu_elements">
-          <div className="Menu_button Menu_element">
+          <div className="Menu_button Menu_element" onClick={this.props.food.a.action}>
-            Button
+            {this.props.food.a.value}
           </div>
-          <div className="Menu_button Menu_element">
+          <div className="Menu_button Menu_element" onClick={this.props.food.b.action}>
-            Button
+            {this.props.food.b.value}
           </div>
-          <div className="Menu_button Menu_element">
+          <div className="Menu_button Menu_element" onClick={this.props.food.c.action}>
-            Button
+            {this.props.food.c.value}
           </div>
         </div>
       </div>