Wrapping components

ux-variations/05.wrapper-components.jsx

@@ -0,0 +1,24 @@
+/**
+ * Using Wrappers to handle UX/style variations
+ *
+ * For Handling Wrapper <div>’s and other markup around component, use composition!
+ *
+ * When you create a React component instance, you can include additional React components or JavaScript expressions between the opening and closing tags.
+ * Parent can read its children by accessing the special this.props.children prop.
+ *
+ * @Reference:
+ * https://speakerdeck.com/vasa/building-multitenant-ui-with-react-dot-js
+ */
+
+const SampleComponent = () => {
+  <Parent>
+    <Child />
+  </Parent>
+};
+
+const Parent = () => {
+  // You can use class 'bla' or any other classed to handle any style variations for the same markup.
+  <div className="bla">
+    {this.props.children}
+  </div>
+};