From 63810ae8788e72f15bbe4981c3d1c0ca8eb06b1f Mon Sep 17 00:00:00 2001
From: Alec Aivazis <alec@aivazis.com>
Date: Mon, 16 May 2016 10:03:50 -0700
Subject: [PATCH] added entry in readme for stylesheet HoC

---
 README.md | 45 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)

diff --git a/README.md b/README.md
index 85f4b17..043cb6f 100644
--- a/README.md
+++ b/README.md
@@ -223,6 +223,51 @@ ReactDOM.render(
 store.dispatch(calculateResponsiveState(window))
 ```
 
+# Higher-Order Components
+
+When building responsive applications in react, it's common to
+implement styles for each breakpoint and then apply them like so:
+
+```jsx
+const commonStyle = {...}
+
+const styles = {
+    element: {
+        ...commonStyle,
+        color: 'blue',
+    },
+    elementThin: {
+        ...commonStyle,
+        color: 'black',
+    }
+}
+
+// somewhere in your component...
+
+<div style={browser.lessThan.medium ? styles.elementThing : styles.element} />
+```
+
+However this become very repetitive rather quickly. To help, redux-responsive
+provides a higher-order component for managing these styles. The follow is
+equivalent to the logic above:
+
+```jsx
+import {StyleSheet} from 'redux-responsive'
+
+const stylesheet = {
+    element: {
+        color: 'blue',
+        _lessThan_medium: {
+            color: 'black',
+        }
+    }
+}
+
+const component = StyleSheet(stylesheet)(({styles}) => (
+    <div style={styles.element} />
+))
+```
+
 
 # Versioning