From d9d914132d32a80baa2142b4b1d9365fc13a6dea Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Fri, 26 Jan 2018 10:56:40 +0000
Subject: [PATCH 01/78] docs: improve README.md

---
 README.md    | 27 ++++++++++++---------------
 package.json |  2 +-
 2 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/README.md b/README.md
index 18f94632..acd83ecd 100644
--- a/README.md
+++ b/README.md
@@ -28,12 +28,10 @@ const MyComponent = mock();
 
 ## Contents
 
-  - Dummies
-     - [`mock()`](./docs/mock.md)
-     - [`loadable()`](./docs/loadable.md)
-     - [`lazy()`](./docs/lazy.md)
-     - [`delayed()`](./docs/delayed.md)
-     - [`invert()`](./docs/invert.md)
+  - Basics
+     - Mocks: [`mock()`](./docs/mock.md) and [`loadable()`](./docs/loadable.md)
+     - Loading: [`lazy()`](./docs/lazy.md), [`delayed()`](./docs/delayed.md), and `viewport()`
+     - Inversions: [`invert()`](./docs/invert.md), `<State>`
   - Sensors
      - [`<BatterySensor>`](./docs/BatterySensor.md), [`withBattery()`](./docs/BatterySensor.md#withbattery), and [`@withBattery`](./docs/BatterySensor.md#withbattery-1)
      - [`<MediaDeviceSensor>`](./docs/MediaDeviceSensor.md), [`withMediaDevices()`](./docs/MediaDeviceSensor.md#withmediadevices), and [`@withMediaDevices`](./docs/MediaDeviceSensor.md#withmediadevices-1)
@@ -49,17 +47,18 @@ const MyComponent = mock();
      - [`<WindowScrollSensor>`](./docs/WindowScrollSensor.md)
      - [`<WindowSizeSensor>`](./docs/WindowSizeSensor.md)
   - Generators
-     - [`<Alert>`](./docs/Alert.md)
-     - [`<Audio>`](./docs/Audio.md), [`<Video>`](./docs/Video.md), and `<Media>`
-     - [`<LocalStorage>`](./docs/LocalStorage.md)
-     - `<Redirect>`
-     - [`<Speak>`](./docs/Speak.md)
-     - [`<Vibrate>`](./docs/Vibrate.md)
+     - Media: [`<Audio>`](./docs/Audio.md), [`<Video>`](./docs/Video.md), and `<Media>`
+     - Storage: [`<LocalStorage>`](./docs/LocalStorage.md), `<SessionStorage>`, `<IndexedDb>`
+     - Outputs: [`<Speak>`](./docs/Speak.md), [`<Vibrate>`](./docs/Vibrate.md), [`<Alert>`](./docs/Alert.md), `<Prompt>`, `<Confirm>`
+     - Navigation: [`go()`](./docs/route.md#go), `<Redirect>`, `<Link>`, `<Sms>`, `<Mailto>`, and `<Tel>`
+  - Promises
+     - [`<Resolve>`](./docs/Resolve.md), `<Fetch>`
   - Context
      - [`<Provider>`](./docs/context.md#provider), [`<Consumer>`](./docs/context.md#consumer), [`withContext()`](./docs/context.md#withcontext), and `@withContext`
      - [`<Theme>`](./docs/theme.md#theme), [`<Themed>`](./docs/theme.md#themed), [`withTheme()`](./docs/theme.md#withtheme), and `@withTheme`
      - `<CssVars>`
-     - [`<Router>`](./docs/route.md#router), [`<Route>`](./docs/route.md#route), [`go()`](./docs/route.md#go), [`withRoute()`](./docs/route.md#withroute), and `@withRoute`
+     - [`<Router>`](./docs/route.md#router), [`<Route>`](./docs/route.md#route), [`withRoute()`](./docs/route.md#withroute), and `@withRoute`
+     - `<Translations>`, `<Translate>`, `withTranslations`, and `@withTranslations`
   - CSS resets
      - [`<CssResetEricMeyer>`](./docs/reset/CssResetEricMeyer.md)
      - [`<CssResetEricMeyerCondensed>`](./docs/reset/CssResetEricMeyerCondensed.md)
@@ -72,8 +71,6 @@ const MyComponent = mock();
      - [`<CssResetTantek>`](./docs/reset/CssResetTantek.md)
      - [`<CssResetUniversal>`](./docs/reset/CssResetUniversal.md)
      - [`<CssResetYahoo>`](./docs/reset/CssResetYahoo.md)
-  - Other
-     - [`<Resolve>`](./docs/Resolve.md)
 
 
 ## License
diff --git a/package.json b/package.json
index f2079c28..3020a034 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "libreact",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "React standard library",
   "main": "lib/index.js",
   "keywords": [

From d85e141ebd187686e25bab2c8c991556a40c5907 Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Fri, 26 Jan 2018 11:01:23 +0000
Subject: [PATCH 02/78] feat: add render prop, withNetwork and @withNetrow

---
 src/NetworkSensor/__story__/story.tsx | 47 +++++++++++++++++++++++++++
 src/NetworkSensor/index.ts            | 10 +++---
 src/NetworkSensor/story.tsx           | 25 --------------
 3 files changed, 51 insertions(+), 31 deletions(-)
 create mode 100644 src/NetworkSensor/__story__/story.tsx
 delete mode 100644 src/NetworkSensor/story.tsx

diff --git a/src/NetworkSensor/__story__/story.tsx b/src/NetworkSensor/__story__/story.tsx
new file mode 100644
index 00000000..095bc0a8
--- /dev/null
+++ b/src/NetworkSensor/__story__/story.tsx
@@ -0,0 +1,47 @@
+import {Component, createElement as h} from 'react';
+import {storiesOf} from '@storybook/react';
+import {action} from '@storybook/addon-actions';
+import {linkTo} from '@storybook/addon-links';
+import {NetworkSensor, withNetwork} from '..';
+import ShowDocs from '../../../.storybook/ShowDocs'
+
+const NetworkStatus = withNetwork((props) =>
+  <pre style={{fontFamily: 'monospace'}}>
+    {JSON.stringify(props, null, 4)}
+  </pre>
+);
+
+@withNetwork
+class NetworkStatus2 extends Component<any, any> {
+  render () {
+    return (
+      <pre style={{fontFamily: 'monospace'}}>
+        {JSON.stringify(this.props, null, 4)}
+      </pre>
+    );
+  }
+}
+
+storiesOf('Sensors/NetworkSensor', module)
+  .add('Documentation', () => h(ShowDocs, {name: 'NetworkSensor'}))
+  .add('FaCC', () =>
+    h(NetworkSensor, {}, (state) =>
+      h('pre', {style: {
+        fontFamily: 'monospace'
+      }},
+        JSON.stringify(state, null, 4)
+      )
+    )
+  )
+  .add('Render prop', () =>
+    h(NetworkSensor, {
+      render: (state) =>
+        h('pre', {style: {
+          fontFamily: 'monospace'
+        }},
+          JSON.stringify(state, null, 4)
+        )
+    })
+  )
+  .add('HOC', () => h(NetworkStatus))
+  .add('Decorator', () => h(NetworkStatus2));
diff --git a/src/NetworkSensor/index.ts b/src/NetworkSensor/index.ts
index 3431dff9..96d46cb2 100644
--- a/src/NetworkSensor/index.ts
+++ b/src/NetworkSensor/index.ts
@@ -1,5 +1,7 @@
 import {Component} from 'react';
 import {h, on, off, isClient, THoc} from '../util';
+import faccToHoc from '../util/faccToHoc';
+import renderProp from '../util/renderProp';
 
 export interface INetworkSensorProps {
   children?: (INetworkState) => React.ReactElement<any>;
@@ -108,12 +110,8 @@ export class NetworkSensor extends Component<INetworkSensorProps, INetworkSensor
   };
 
   render () {
-    return this.props.children(this.state);
+    return renderProp(this.props, this.state);
   }
 }
 
-export const withNetwork: THoc<any, any> = (Comp) =>
-  (props) => h(NetworkSensor, null, (net) => h(Comp, {
-    ...net,
-    ...props
-  }));
+export const withNetwork = faccToHoc(NetworkSensor, 'net');
diff --git a/src/NetworkSensor/story.tsx b/src/NetworkSensor/story.tsx
deleted file mode 100644
index a9045ab7..00000000
--- a/src/NetworkSensor/story.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import {createElement as h} from 'react';
-import {storiesOf} from '@storybook/react';
-import {action} from '@storybook/addon-actions';
-import {linkTo} from '@storybook/addon-links';
-import {NetworkSensor, withNetwork} from '.';
-import ShowDocs from '../../.storybook/ShowDocs'
-
-const NetworkStatus = withNetwork((props) =>
-  <pre style={{fontFamily: 'monospace'}}>
-    {JSON.stringify(props, null, 4)}
-  </pre>
-);
-
-storiesOf('Sensors/NetworkSensor', module)
-  .add('Documentation', () => h(ShowDocs, {name: 'NetworkSensor'}))
-  .add('Basic example', () =>
-    h(NetworkSensor, {}, (state) =>
-      h('pre', {style: {
-        fontFamily: 'monospace'
-      }},
-        JSON.stringify(state, null, 4)
-      )
-    )
-  )
-  .add('withNetwork()', () => h(NetworkStatus));

From b69674bc2c640dc77f9d92703a2de9b2fbb3ccbd Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Fri, 26 Jan 2018 11:17:51 +0000
Subject: [PATCH 03/78] docs: improve NetworkSensor docs

---
 README.md                             |  2 +-
 docs/NetworkSensor.md                 | 54 +++++++++++++++++++++++----
 src/NetworkSensor/__story__/story.tsx | 41 +++++++++++++++++---
 3 files changed, 83 insertions(+), 14 deletions(-)

diff --git a/README.md b/README.md
index acd83ecd..29ccbf0b 100644
--- a/README.md
+++ b/README.md
@@ -36,7 +36,7 @@ const MyComponent = mock();
      - [`<BatterySensor>`](./docs/BatterySensor.md), [`withBattery()`](./docs/BatterySensor.md#withbattery), and [`@withBattery`](./docs/BatterySensor.md#withbattery-1)
      - [`<MediaDeviceSensor>`](./docs/MediaDeviceSensor.md), [`withMediaDevices()`](./docs/MediaDeviceSensor.md#withmediadevices), and [`@withMediaDevices`](./docs/MediaDeviceSensor.md#withmediadevices-1)
      - [`<MediaSensor>`](./docs/MediaSensor.md), [`withMedia()`](./docs/MediaSensor.md#withmedia), and [`@withMedia`](./docs/MediaSensor.md#withmedia-1)
-     - [`<NetworkSensor>`](./docs/NetworkSensor.md) and [`withNetwork()`](./docs/NetworkSensor.md#withnetwork)
+     - [`<NetworkSensor>`](./docs/NetworkSensor.md), [`withNetwork()`](./docs/NetworkSensor.md#withnetwork), and [`@withNetwork`](./docs/NetworkSensor.md#withnetwork-1)
      - [`<LightSensor>`](./docs/LightSensor.md)
      - [`<LocationSensor>`](./docs/LocationSensor.md)
      - [`<OrientationSensor>`](./docs/OrientationSensor.md) and [`withOrientation()`](./docs/OrientationSensor.md#withorientation)
diff --git a/docs/NetworkSensor.md b/docs/NetworkSensor.md
index cd135c72..843bb408 100644
--- a/docs/NetworkSensor.md
+++ b/docs/NetworkSensor.md
@@ -52,22 +52,62 @@ Result
   - `downlink`, `downlinkMax`, `effectiveType`, `type`, `rtt` - properties as provided by [`NetworkInformation`](https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation).
 
 
-## `withNetwork()`
+## `withNetwork()` HOC
 
-HOC that merges `<NetworkSensor>` state into props of the enhanced component.
-
-### Example
+HOC that merges `net` prop into enhanced component's props.
 
 ```jsx
-import {withNetwork} from 'libreact/lib/NetworkSensro';
+import {withNetwork} from 'libreact/lib/NetworkSensor';
 
 const NetworkStatusFormatter = (props) =>
-  <pre style={{fontFamily: 'monospace'}}>
+  <pre style={{fontFamily: 'nomospace'}}>
     {JSON.stringify(props, null, 4)}
   </pre>;
 
 const NetworkStatus = withNetwork(NetworkStatusFormatter);
 
 <NetworkStatus />
-);
+```
+
+You can overwrite the inject prop name
+
+```js
+const NetworkStatus = withNetwork(NetworkStatusFormatter, 'network');
+```
+
+Or simply merge the whole object into your props
+
+```js
+const NetworkStatus = withNetwork(NetworkStatusFormatter, null);
+```
+
+## `@withNetwork` decorator
+
+React stateful component decorator that adds `net` prop.
+
+```js
+import {withNetwork} from 'libreact/lib/NetworkSensor';
+
+@withNetwork
+class MyComp extends Component {
+
+}
+```
+
+Specify different prop name
+
+```js
+@withNetwork('network')
+class MyComp extends Component {
+
+}
+```
+
+or merge the the whole network object into props
+
+```js
+@withNetwork('')
+class MyComp extends Component {
+
+}
 ```
diff --git a/src/NetworkSensor/__story__/story.tsx b/src/NetworkSensor/__story__/story.tsx
index 095bc0a8..34b122aa 100644
--- a/src/NetworkSensor/__story__/story.tsx
+++ b/src/NetworkSensor/__story__/story.tsx
@@ -5,14 +5,39 @@ import {linkTo} from '@storybook/addon-links';
 import {NetworkSensor, withNetwork} from '..';
 import ShowDocs from '../../../.storybook/ShowDocs'
 
-const NetworkStatus = withNetwork((props) =>
+const Status = (props) =>
   <pre style={{fontFamily: 'monospace'}}>
     {JSON.stringify(props, null, 4)}
-  </pre>
-);
+  </pre>;
+
+const NetworkStatus1 = withNetwork(Status);
+const NetworkStatus2 = withNetwork(Status, 'network');
+const NetworkStatus3 = withNetwork(Status, '');
 
 @withNetwork
-class NetworkStatus2 extends Component<any, any> {
+class NetworkStatus4 extends Component<any, any> {
+  render () {
+    return (
+      <pre style={{fontFamily: 'monospace'}}>
+        {JSON.stringify(this.props, null, 4)}
+      </pre>
+    );
+  }
+}
+
+@withNetwork('network')
+class NetworkStatus5 extends Component<any, any> {
+  render () {
+    return (
+      <pre style={{fontFamily: 'monospace'}}>
+        {JSON.stringify(this.props, null, 4)}
+      </pre>
+    );
+  }
+}
+
+@withNetwork('')
+class NetworkStatus6 extends Component<any, any> {
   render () {
     return (
       <pre style={{fontFamily: 'monospace'}}>
@@ -43,5 +68,9 @@ storiesOf('Sensors/NetworkSensor', module)
         )
     })
   )
-  .add('HOC', () => h(NetworkStatus))
-  .add('Decorator', () => h(NetworkStatus2));
+  .add('HOC 1', () => h(NetworkStatus1))
+  .add('HOC 2', () => h(NetworkStatus2))
+  .add('HOC 3', () => h(NetworkStatus3))
+  .add('Decorator 1', () => h(NetworkStatus4))
+  .add('Decorator 2', () => h(NetworkStatus5))
+  .add('Decorator 3', () => h(NetworkStatus6));

From ba37a41dab944daec03f8bf8eb23a8193398069b Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Fri, 26 Jan 2018 12:01:15 +0000
Subject: [PATCH 04/78] feat: add withLight() and @withLight

---
 README.md                           | 19 +++++++-------
 src/LightSensor/__story__/story.tsx | 40 +++++++++++++++++++++++++++++
 src/LightSensor/index.ts            |  7 ++++-
 src/LightSensor/story.tsx           | 17 ------------
 4 files changed, 56 insertions(+), 27 deletions(-)
 create mode 100644 src/LightSensor/__story__/story.tsx
 delete mode 100644 src/LightSensor/story.tsx

diff --git a/README.md b/README.md
index 29ccbf0b..587bfc29 100644
--- a/README.md
+++ b/README.md
@@ -29,28 +29,29 @@ const MyComponent = mock();
 ## Contents
 
   - Basics
-     - Mocks: [`mock()`](./docs/mock.md) and [`loadable()`](./docs/loadable.md)
-     - Loading: [`lazy()`](./docs/lazy.md), [`delayed()`](./docs/delayed.md), and `viewport()`
-     - Inversions: [`invert()`](./docs/invert.md), `<State>`
+     - [`mock()`](./docs/mock.md) and [`loadable()`](./docs/loadable.md)
+     - [`lazy()`](./docs/lazy.md), [`delayed()`](./docs/delayed.md), and `viewport()`
+     - [`invert()`](./docs/invert.md), `<State>`
   - Sensors
      - [`<BatterySensor>`](./docs/BatterySensor.md), [`withBattery()`](./docs/BatterySensor.md#withbattery), and [`@withBattery`](./docs/BatterySensor.md#withbattery-1)
      - [`<MediaDeviceSensor>`](./docs/MediaDeviceSensor.md), [`withMediaDevices()`](./docs/MediaDeviceSensor.md#withmediadevices), and [`@withMediaDevices`](./docs/MediaDeviceSensor.md#withmediadevices-1)
      - [`<MediaSensor>`](./docs/MediaSensor.md), [`withMedia()`](./docs/MediaSensor.md#withmedia), and [`@withMedia`](./docs/MediaSensor.md#withmedia-1)
-     - [`<NetworkSensor>`](./docs/NetworkSensor.md), [`withNetwork()`](./docs/NetworkSensor.md#withnetwork), and [`@withNetwork`](./docs/NetworkSensor.md#withnetwork-1)
+     - [`<NetworkSensor>`](./docs/NetworkSensor.md), [`withNetwork()`](./docs/NetworkSensor.md#withnetwork-hoc), and [`@withNetwork`](./docs/NetworkSensor.md#withnetwork-decorator)
      - [`<LightSensor>`](./docs/LightSensor.md)
      - [`<LocationSensor>`](./docs/LocationSensor.md)
      - [`<OrientationSensor>`](./docs/OrientationSensor.md) and [`withOrientation()`](./docs/OrientationSensor.md#withorientation)
      - [`<ScrollSensor>`](./docs/ScrollSensor.md)
      - [`<SizeSensor>`](./docs/SizeSensor.md)
-     - [`<ViewportSensor>`](./docs/ViewportSensor.md), [`<ViewportScrollSensor>`](./docs/ViewportSensor.md#viewportscrollsensor), and [`<ViewportObserverSensor>`](./docs/ViewportSensor.md#viewportobserversensor)
+     - [`<ViewportSensor>`](./docs/ViewportSensor.md), `withViewport`, and `@withViewport`
+        - [`<ViewportScrollSensor>`](./docs/ViewportSensor.md#viewportscrollsensor) and [`<ViewportObserverSensor>`](./docs/ViewportSensor.md#viewportobserversensor)
      - [`<WidthSensor>`](./docs/WidthSensor.md)
      - [`<WindowScrollSensor>`](./docs/WindowScrollSensor.md)
      - [`<WindowSizeSensor>`](./docs/WindowSizeSensor.md)
   - Generators
-     - Media: [`<Audio>`](./docs/Audio.md), [`<Video>`](./docs/Video.md), and `<Media>`
-     - Storage: [`<LocalStorage>`](./docs/LocalStorage.md), `<SessionStorage>`, `<IndexedDb>`
-     - Outputs: [`<Speak>`](./docs/Speak.md), [`<Vibrate>`](./docs/Vibrate.md), [`<Alert>`](./docs/Alert.md), `<Prompt>`, `<Confirm>`
-     - Navigation: [`go()`](./docs/route.md#go), `<Redirect>`, `<Link>`, `<Sms>`, `<Mailto>`, and `<Tel>`
+     - [`<Audio>`](./docs/Audio.md), [`<Video>`](./docs/Video.md), and `<Media>`
+     - [`<LocalStorage>`](./docs/LocalStorage.md), `<SessionStorage>`, `<IndexedDb>`
+     - [`<Speak>`](./docs/Speak.md), [`<Vibrate>`](./docs/Vibrate.md), [`<Alert>`](./docs/Alert.md), `<Prompt>`, `<Confirm>`
+     - [`go()`](./docs/route.md#go), `<Redirect>`, `<Link>`, `<Sms>`, `<Mailto>`, and `<Tel>`
   - Promises
      - [`<Resolve>`](./docs/Resolve.md), `<Fetch>`
   - Context
diff --git a/src/LightSensor/__story__/story.tsx b/src/LightSensor/__story__/story.tsx
new file mode 100644
index 00000000..e81f2170
--- /dev/null
+++ b/src/LightSensor/__story__/story.tsx
@@ -0,0 +1,40 @@
+import {Component, createElement as h} from 'react';
+import {storiesOf} from '@storybook/react';
+import {action} from '@storybook/addon-actions';
+import {linkTo} from '@storybook/addon-links';
+import {LightSensor, withLight} from '..';
+import {readFileSync} from 'fs';
+import ShowDocs from '../../../.storybook/ShowDocs'
+
+const Print = (props) =>
+  <pre style={{fontFamily: 'monospace'}}>
+    {JSON.stringify(props, null, 4)}
+  </pre>;
+
+const PrintWithLight = withLight(Print);
+
+@withLight
+class LightPrinter extends Component<any, any> {
+  render () {
+    return Print(this.props);
+  }
+}
+
+storiesOf('Sensors/LightSensor', module)
+  .add('Documentation', () => <ShowDocs name='LightSensor' />)
+  .add('FaCC', () =>
+    <LightSensor>{(light) =>
+      <pre style={{fontFamily: 'monospace'}}>
+        {JSON.stringify(light, null, 4)}
+      </pre>
+    }</LightSensor>
+  )
+  .add('Render prop', () =>
+    <LightSensor render={(light) =>
+      <pre style={{fontFamily: 'monospace'}}>
+        {JSON.stringify(light, null, 4)}
+      </pre>
+    } />
+  )
+  .add('HOC', () => <PrintWithLight />)
+  .add('Decorator', () => <LightPrinter />);
diff --git a/src/LightSensor/index.ts b/src/LightSensor/index.ts
index 23a187ec..832e2193 100644
--- a/src/LightSensor/index.ts
+++ b/src/LightSensor/index.ts
@@ -1,9 +1,12 @@
 import {Component} from 'react';
+import faccToHoc from '../util/faccToHoc';
+import renderProp from '../util/renderProp';
 
 declare const AmbientLightSensor;
 
 export interface ILightSensorProps {
   children?: (state: ILightSensorState) => React.ReactElement<any>;
+  render?: (state: ILightSensorState) => React.ReactElement<any>;
 }
 
 export interface ILightSensorState {
@@ -52,6 +55,8 @@ export class LightSensor extends Component<ILightSensorProps, ILightSensorState>
   };
 
   render () {
-    return this.props.children(this.state);
+    return renderProp(this.props, this.state);
   }
 }
+
+export const withLight = faccToHoc(LightSensor);
diff --git a/src/LightSensor/story.tsx b/src/LightSensor/story.tsx
deleted file mode 100644
index dafe5a0a..00000000
--- a/src/LightSensor/story.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import {createElement as h} from 'react';
-import {storiesOf} from '@storybook/react';
-import {action} from '@storybook/addon-actions';
-import {linkTo} from '@storybook/addon-links';
-import {LightSensor} from '.';
-import {readFileSync} from 'fs';
-import ShowDocs from '../../.storybook/ShowDocs'
-
-storiesOf('Sensors/LightSensor', module)
-  .add('Documentation', () => <ShowDocs name='LightSensor' />)
-  .add('Example', () =>
-    <LightSensor>{(light) =>
-      <pre style={{fontFamily: 'monospace'}}>
-        {JSON.stringify(light, null, 4)}
-      </pre>
-    }</LightSensor>
-  );

From 6322578127f3538c320a489a9c006caa78445b81 Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Fri, 26 Jan 2018 12:04:35 +0000
Subject: [PATCH 05/78] docs: add withLight() docs

---
 README.md           |  2 +-
 docs/LightSensor.md | 25 +++++++++++++++++++++++++
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 587bfc29..08663f59 100644
--- a/README.md
+++ b/README.md
@@ -37,7 +37,7 @@ const MyComponent = mock();
      - [`<MediaDeviceSensor>`](./docs/MediaDeviceSensor.md), [`withMediaDevices()`](./docs/MediaDeviceSensor.md#withmediadevices), and [`@withMediaDevices`](./docs/MediaDeviceSensor.md#withmediadevices-1)
      - [`<MediaSensor>`](./docs/MediaSensor.md), [`withMedia()`](./docs/MediaSensor.md#withmedia), and [`@withMedia`](./docs/MediaSensor.md#withmedia-1)
      - [`<NetworkSensor>`](./docs/NetworkSensor.md), [`withNetwork()`](./docs/NetworkSensor.md#withnetwork-hoc), and [`@withNetwork`](./docs/NetworkSensor.md#withnetwork-decorator)
-     - [`<LightSensor>`](./docs/LightSensor.md)
+     - [`<LightSensor>`](./docs/LightSensor.md), [`withLight()`](./docs/LightSensor.md#withlight-hoc), and [`@withLight`](./docs/LightSensor.md#withlight-decorator)
      - [`<LocationSensor>`](./docs/LocationSensor.md)
      - [`<OrientationSensor>`](./docs/OrientationSensor.md) and [`withOrientation()`](./docs/OrientationSensor.md#withorientation)
      - [`<ScrollSensor>`](./docs/ScrollSensor.md)
diff --git a/docs/LightSensor.md b/docs/LightSensor.md
index 3af801fb..ba5a971d 100644
--- a/docs/LightSensor.md
+++ b/docs/LightSensor.md
@@ -12,3 +12,28 @@ import {LightSensor} from 'libreact/lib/LightSensor';
   JSON.stringify(light, null, 4)
 }</LightSensor>
 ```
+
+
+## `withLight()` HOC
+
+Higher order component that injects `illumination` prop into your component.
+
+```js
+import {withLight} from 'libreact/lib/LightSensor';
+
+const MyCompWithLight = withLight(MyComp);
+```
+
+
+## `@withLight` HOC
+
+Class decorator that injects `illumination` prop into your component.
+
+```js
+import {withLight} from 'libreact/lib/LightSensor';
+
+@withLight
+class MyComp extends Component {
+
+}
+```

From 92bde1b47d5d80bdc9d1fcb889861e591edaf987 Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Fri, 26 Jan 2018 12:19:24 +0000
Subject: [PATCH 06/78] test: add withLocation stories

---
 package.json                           | 10 ++++++--
 src/LocationSensor/__story__/story.tsx | 35 ++++++++++++++++++++------
 src/LocationSensor/index.ts            |  7 +++++-
 3 files changed, 41 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index 3020a034..c91d2f93 100644
--- a/package.json
+++ b/package.json
@@ -5,10 +5,16 @@
   "main": "lib/index.js",
   "keywords": [
     "react",
-    "stdlib",
     "libreact",
+    "stdlib",
+    "hoc",
+    "higher-order",
+    "composition",
+    "facc",
+    "components",
     "utilities",
-    "MailOnline"
+    "toolbox",
+    "toolbox"
   ],
   "repository": {
     "type": "git",
diff --git a/src/LocationSensor/__story__/story.tsx b/src/LocationSensor/__story__/story.tsx
index b0859cd4..dd890c4b 100644
--- a/src/LocationSensor/__story__/story.tsx
+++ b/src/LocationSensor/__story__/story.tsx
@@ -2,10 +2,30 @@ import {Component, createElement as h} from 'react';
 import {storiesOf} from '@storybook/react';
 import {action} from '@storybook/addon-actions';
 import {linkTo} from '@storybook/addon-links';
-import {LocationSensor} from '..';
+import {LocationSensor, withLocation} from '..';
 import ShowDocs from '../../../.storybook/ShowDocs'
 
-class StoryLocationSensroExample extends Component<any, any> {
+const Print = (props) =>
+  <pre style={{fontFamily: 'monospace'}}>
+    {JSON.stringify(props, null, 4)}
+  </pre>;
+
+const Facc = () =>
+  <LocationSensor>{(state) => <Print {...state} />}</LocationSensor>;
+
+const RenderProp = () =>
+  <LocationSensor render={(state) => <Print {...state} />} />;
+
+const Hoc = withLocation(Print);
+
+@withLocation
+class Decorator extends Component<any, any> {
+  render () {
+    return <Print {...this.props} />;
+  }
+}
+
+class StoryLocationSensorExample extends Component<any, any> {
   state = {
     url: 'page.html',
     state: 'STATE'
@@ -25,11 +45,7 @@ class StoryLocationSensroExample extends Component<any, any> {
         <button onClick={() => history.go(-1)}>history.back()</button>
         <button onClick={() => history.go(1)}>history.forward()</button>
 
-        <LocationSensor>{(state) =>
-          <pre style={{fontFamily: 'monospace'}}>
-            {JSON.stringify(state, null, 4)}
-          </pre>
-        }</LocationSensor>
+        <this.props.comp />
       </div>
     );
   }
@@ -37,4 +53,7 @@ class StoryLocationSensroExample extends Component<any, any> {
 
 storiesOf('Sensors/LocationSensor', module)
   .add('Documentation', () => h(ShowDocs, {name: 'LocationSensor'}))
-  .add('Example', () => h(StoryLocationSensroExample));
+  .add('FaCC', () => <StoryLocationSensorExample comp={Facc} />)
+  .add('Render prop', () => <StoryLocationSensorExample comp={RenderProp} />)
+  .add('HOC', () => <StoryLocationSensorExample comp={Hoc} />)
+  .add('Decorator', () => <StoryLocationSensorExample comp={Decorator} />);
diff --git a/src/LocationSensor/index.ts b/src/LocationSensor/index.ts
index 0ca7ebef..0eb8e928 100644
--- a/src/LocationSensor/index.ts
+++ b/src/LocationSensor/index.ts
@@ -1,5 +1,7 @@
 import {Component} from 'react';
 import {h, on, off, isClient} from '../util';
+import faccToHoc from '../util/faccToHoc';
+import renderProp from '../util/renderProp';
 
 const patchHistoryMethod = (method) => {
   const original = history[method];
@@ -23,6 +25,7 @@ if (isClient) {
 
 export interface ILocationSensorProps {
   children?: (ILocationSensorState) => React.ReactElement<any>;
+  render?: (ILocationSensorState) => React.ReactElement<any>;
 }
 
 export interface ILocationSensorState {
@@ -119,6 +122,8 @@ export class LocationSensor extends Component<ILocationSensorProps, ILocationSen
   }
 
   render () {
-    return this.props.children(this.state);
+    return renderProp(this.props, this.state);
   }
 }
+
+export const withLocation = faccToHoc(LocationSensor, 'location');

From 7af69940bbaf0a714be7d3ca3c7d8efa88086984 Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Fri, 26 Jan 2018 12:23:15 +0000
Subject: [PATCH 07/78] docs: add withLocation() docs

---
 README.md              |  2 +-
 docs/LocationSensor.md | 55 ++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 56 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 08663f59..a6de41dd 100644
--- a/README.md
+++ b/README.md
@@ -38,7 +38,7 @@ const MyComponent = mock();
      - [`<MediaSensor>`](./docs/MediaSensor.md), [`withMedia()`](./docs/MediaSensor.md#withmedia), and [`@withMedia`](./docs/MediaSensor.md#withmedia-1)
      - [`<NetworkSensor>`](./docs/NetworkSensor.md), [`withNetwork()`](./docs/NetworkSensor.md#withnetwork-hoc), and [`@withNetwork`](./docs/NetworkSensor.md#withnetwork-decorator)
      - [`<LightSensor>`](./docs/LightSensor.md), [`withLight()`](./docs/LightSensor.md#withlight-hoc), and [`@withLight`](./docs/LightSensor.md#withlight-decorator)
-     - [`<LocationSensor>`](./docs/LocationSensor.md)
+     - [`<LocationSensor>`](./docs/LocationSensor.md), [`withLocation()`](./docs/LocationSensor.md#withlocation-hoc), and [`@withLocation`](./docs/LocationSensor.md#withlocation-decorator)
      - [`<OrientationSensor>`](./docs/OrientationSensor.md) and [`withOrientation()`](./docs/OrientationSensor.md#withorientation)
      - [`<ScrollSensor>`](./docs/ScrollSensor.md)
      - [`<SizeSensor>`](./docs/SizeSensor.md)
diff --git a/docs/LocationSensor.md b/docs/LocationSensor.md
index a3980fba..f7b504ce 100644
--- a/docs/LocationSensor.md
+++ b/docs/LocationSensor.md
@@ -40,3 +40,58 @@ interface ILocationSensorState {
   search?: string;
 }
 ```
+
+
+## `withLocation()` HOC
+
+Higher order component that injects `location` prop into your component.
+
+```js
+import {withLocation} from 'libreact/lib/LocationSensor';
+
+const MyCompWithLocation = withLocation(MyComp);
+```
+
+Overwrite the inject prop name
+
+```js
+const MyCompWithLocation = withLocation(MyComp, 'route');
+```
+
+or merge all props
+
+```js
+const MyCompWithLocation = withLocation(MyComp, '');
+```
+
+
+## `@withLocation` decorator
+
+Stateful component class decorator that injects `location` prop into your component.
+
+```js
+import {withLocation} from 'libreact/lib/LocationSensor';
+
+@withLocation
+class MyComp extends Component {
+
+}
+```
+
+Overwrite prop name
+
+```js
+@withLocation('route')
+class MyComp extends Component {
+
+}
+```
+
+or merge all props
+
+```js
+@withLocation('')
+class MyComp extends Component {
+
+}
+```

From b6b29a6fa4e14802d94ba4f0a4c415df7bee1f32 Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Fri, 26 Jan 2018 12:29:53 +0000
Subject: [PATCH 08/78] feat: add some HOCs

---
 README.md                       |  8 ++++----
 src/OrientationSensor/index.ts  | 10 ++--------
 src/WindowScrollSensor/index.ts |  3 +++
 src/WindowSizeSensor/index.ts   |  5 ++++-
 4 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/README.md b/README.md
index a6de41dd..e848bd2c 100644
--- a/README.md
+++ b/README.md
@@ -38,15 +38,15 @@ const MyComponent = mock();
      - [`<MediaSensor>`](./docs/MediaSensor.md), [`withMedia()`](./docs/MediaSensor.md#withmedia), and [`@withMedia`](./docs/MediaSensor.md#withmedia-1)
      - [`<NetworkSensor>`](./docs/NetworkSensor.md), [`withNetwork()`](./docs/NetworkSensor.md#withnetwork-hoc), and [`@withNetwork`](./docs/NetworkSensor.md#withnetwork-decorator)
      - [`<LightSensor>`](./docs/LightSensor.md), [`withLight()`](./docs/LightSensor.md#withlight-hoc), and [`@withLight`](./docs/LightSensor.md#withlight-decorator)
-     - [`<LocationSensor>`](./docs/LocationSensor.md), [`withLocation()`](./docs/LocationSensor.md#withlocation-hoc), and [`@withLocation`](./docs/LocationSensor.md#withlocation-decorator)
-     - [`<OrientationSensor>`](./docs/OrientationSensor.md) and [`withOrientation()`](./docs/OrientationSensor.md#withorientation)
+     - [`<LocationSensor>`](./docs/LocationSensor.md), [`withLocation()`](./docs/LocationSensor.md#withlocation-hoc), and [`@withLocation`](./docs/LocationSensor.md#withlocation-decora)
+     - [`<OrientationSensor>`](./docs/OrientationSensor.md), [`withOrientation()`](./docs/OrientationSensor.md#withorientation), and `@withOrientation`
      - [`<ScrollSensor>`](./docs/ScrollSensor.md)
      - [`<SizeSensor>`](./docs/SizeSensor.md)
      - [`<ViewportSensor>`](./docs/ViewportSensor.md), `withViewport`, and `@withViewport`
         - [`<ViewportScrollSensor>`](./docs/ViewportSensor.md#viewportscrollsensor) and [`<ViewportObserverSensor>`](./docs/ViewportSensor.md#viewportobserversensor)
      - [`<WidthSensor>`](./docs/WidthSensor.md)
-     - [`<WindowScrollSensor>`](./docs/WindowScrollSensor.md)
-     - [`<WindowSizeSensor>`](./docs/WindowSizeSensor.md)
+     - [`<WindowScrollSensor>`](./docs/WindowScrollSensor.md), `withWindowScroll()`, and `@withWindowScroll`
+     - [`<WindowSizeSensor>`](./docs/WindowSizeSensor.md), `withWindowSize()`, and `@withWindowSize`
   - Generators
      - [`<Audio>`](./docs/Audio.md), [`<Video>`](./docs/Video.md), and `<Media>`
      - [`<LocalStorage>`](./docs/LocalStorage.md), `<SessionStorage>`, `<IndexedDb>`
diff --git a/src/OrientationSensor/index.ts b/src/OrientationSensor/index.ts
index 3b133fbc..ea78e8ee 100644
--- a/src/OrientationSensor/index.ts
+++ b/src/OrientationSensor/index.ts
@@ -1,6 +1,7 @@
 import {Component} from 'react';
 import {SyncSensor} from '../SyncSensor';
 import {h, on, off, isClient} from '../util';
+import faccToHoc from '../util/faccToHoc';
 
 export interface IOrientationSensorProps {
   children?: (state: IOrientationSensorState) => React.ReactElement<any>;
@@ -54,11 +55,4 @@ export class OrientationSensor extends Component<IOrientationSensorProps, any> {
   }
 }
 
-export const withOrientation = (Comp) =>
-  (props) =>
-    h(OrientationSensor, null, (orientation) =>
-      h(Comp, {
-        ...props,
-        orientation
-      })
-    );
+export const withOrientation = faccToHoc(OrientationSensor, 'orientation');
diff --git a/src/WindowScrollSensor/index.ts b/src/WindowScrollSensor/index.ts
index 037218a0..bb4b9996 100644
--- a/src/WindowScrollSensor/index.ts
+++ b/src/WindowScrollSensor/index.ts
@@ -1,6 +1,7 @@
 import {Component, createElement as h} from 'react';
 import {SyncSensor} from '../SyncSensor';
 import {isClient} from '../util';
+import faccToHoc from '../util/faccToHoc';
 
 export interface IWindowScrollSensorValue {
   x: number;
@@ -47,3 +48,5 @@ export class WindowScrollSensor extends Component<IWindowScrollSensorProps, any>
     });
   }
 }
+
+export const withWindowScroll = faccToHoc(WindowScrollSensor, 'windowScroll');
diff --git a/src/WindowSizeSensor/index.ts b/src/WindowSizeSensor/index.ts
index 5cd2b4ac..fbd77686 100644
--- a/src/WindowSizeSensor/index.ts
+++ b/src/WindowSizeSensor/index.ts
@@ -1,6 +1,7 @@
 import {Component, createElement as h} from 'react';
 import {SyncSensor} from '../SyncSensor';
 import {isClient} from '../util';
+import faccToHoc from '../util/faccToHoc';
 
 export interface IWindowSizeSensorValue {
   width: number;
@@ -41,4 +42,6 @@ export class WindowSizeSensor extends Component<IWindowSizeSensorProps, any> {
       onEvent
     });
   }
-}
\ No newline at end of file
+}
+
+export const withWindowScroll = faccToHoc(WindowSizeSensor, 'windowSize');

From ccc0663893e1dba44cf950be5a7fbf3758c0eb1f Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Fri, 26 Jan 2018 13:12:25 +0000
Subject: [PATCH 09/78] refactor: use child element as root in SizeSensor

---
 README.md                     | 11 ++++-------
 src/ScrollSensor/index.ts     |  3 ++-
 src/SizeSensor/index.ts       | 20 ++++++++------------
 src/WindowSizeSensor/index.ts |  2 +-
 4 files changed, 15 insertions(+), 21 deletions(-)

diff --git a/README.md b/README.md
index e848bd2c..1dc9db13 100644
--- a/README.md
+++ b/README.md
@@ -6,8 +6,8 @@
 
 React standard library, must-have toolbox for any React project.
 
-  - Collection of React sensors, FaCCs, HOCs, context providers, dummies, and [other goodies](#contents).
-  - Isomorphic - all components work in browser and on server (and some in `react-native`).
+  - Collection of React sensors, FaCCs, render props, HOCs, context providers, dummies, and [other goodies](#contents).
+  - *Isomorphic* - all components work in browser and on server (and some in `react-native`).
   - See [demos](https://mailonline.github.io/libreact/) and [docs](#contents).
 
 ## Installation
@@ -61,11 +61,8 @@ const MyComponent = mock();
      - [`<Router>`](./docs/route.md#router), [`<Route>`](./docs/route.md#route), [`withRoute()`](./docs/route.md#withroute), and `@withRoute`
      - `<Translations>`, `<Translate>`, `withTranslations`, and `@withTranslations`
   - CSS resets
-     - [`<CssResetEricMeyer>`](./docs/reset/CssResetEricMeyer.md)
-     - [`<CssResetEricMeyerCondensed>`](./docs/reset/CssResetEricMeyerCondensed.md)
-     - [`<CssResetMinimalistic>`](./docs/reset/CssResetMinimalistic.md)
-     - [`<CssResetMinimalistic2>`](./docs/reset/CssResetMinimalistic2.md)
-     - [`<CssResetMinimalistic3>`](./docs/reset/CssResetMinimalistic3.md)
+     - [`<CssResetEricMeyer>`](./docs/reset/CssResetEricMeyer.md) and [`<CssResetEricMeyerCondensed>`](./docs/reset/CssResetEricMeyerCondensed.md)
+     - [`<CssResetMinimalistic>`](./docs/reset/CssResetMinimalistic.md), [`<CssResetMinimalistic2>`](./docs/reset/CssResetMinimalistic2.md), and [`<CssResetMinimalistic3>`](./docs/reset/CssResetMinimalistic3.md)
      - [`<CssResetPoorMan>`](./docs/reset/CssResetPoorMan.md)
      - [`<CssResetShaunInman>`](./docs/reset/CssResetShaunInman.md)
      - [`<CssResetSiolon>`](./docs/reset/CssResetSiolon.md)
diff --git a/src/ScrollSensor/index.ts b/src/ScrollSensor/index.ts
index d8cbeaf8..4a5e44c9 100644
--- a/src/ScrollSensor/index.ts
+++ b/src/ScrollSensor/index.ts
@@ -1,5 +1,6 @@
 import {Component, createElement as h} from 'react';
 import {isClient} from '../util';
+import renderProp from '../util/renderProp';
 
 export interface IScrollSensorProps {
   children?: (scroll: IScrollSensorState) => React.ReactElement<any>;
@@ -67,6 +68,6 @@ export class ScrollSensor extends Component<IScrollSensorProps, IScrollSensorSta
   }
 
   render () {
-    return this.props.children(this.state);
+    return renderProp(this.props, this.state);
   }
 }
diff --git a/src/SizeSensor/index.ts b/src/SizeSensor/index.ts
index 19b8f785..28ce984b 100644
--- a/src/SizeSensor/index.ts
+++ b/src/SizeSensor/index.ts
@@ -1,6 +1,7 @@
-import {Component, createElement as h} from 'react';
+import {Component, createElement as h, cloneElement, Children} from 'react';
 import Types from 'prop-types';
 import {idx, noop} from '../util';
+import renderProp from '../util/renderProp';
 
 const DRAF = (callback) => setTimeout(callback, 35);
 
@@ -79,17 +80,12 @@ export class SizeSensor extends Component<ISizeSensorProps, ISizeSensorState> {
   }
 
   render () {
-    const {children, refElement, tagName, onSize, ...rest} = this.props;
+    const element = renderProp(this.props, this.state);
+    const style = element.props.style || {};
 
-    rest.ref = refElement;
+    style.position = 'relative';
 
-    if (!rest.style) {
-      rest.style = {};
-    }
-
-    rest.style.position = 'relative';
-
-    return h(tagName || 'div', rest,
+    return cloneElement(element, {style}, ...[
       h('iframe', {
         ref: this.ref,
         style: {
@@ -103,7 +99,7 @@ export class SizeSensor extends Component<ISizeSensorProps, ISizeSensorState> {
           zIndex: -1
         }
       }),
-      typeof children === 'function' ? children(this.state) : children
-    );
+      ...Children.toArray(element.props.children)
+    ]);
   }
 }
diff --git a/src/WindowSizeSensor/index.ts b/src/WindowSizeSensor/index.ts
index fbd77686..03347015 100644
--- a/src/WindowSizeSensor/index.ts
+++ b/src/WindowSizeSensor/index.ts
@@ -44,4 +44,4 @@ export class WindowSizeSensor extends Component<IWindowSizeSensorProps, any> {
   }
 }
 
-export const withWindowScroll = faccToHoc(WindowSizeSensor, 'windowSize');
+export const withWindowSize = faccToHoc(WindowSizeSensor, 'windowSize');

From c404710e62fe3d2a95db3d96c542aa453918d716 Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Fri, 26 Jan 2018 13:24:59 +0000
Subject: [PATCH 10/78] test: add SizeSensor story

---
 src/SizeSensor/__story__/story.ts | 45 +++++++++++++++++++++++++++++++
 src/SizeSensor/story.ts           | 22 ---------------
 2 files changed, 45 insertions(+), 22 deletions(-)
 create mode 100644 src/SizeSensor/__story__/story.ts
 delete mode 100644 src/SizeSensor/story.ts

diff --git a/src/SizeSensor/__story__/story.ts b/src/SizeSensor/__story__/story.ts
new file mode 100644
index 00000000..b1254fc2
--- /dev/null
+++ b/src/SizeSensor/__story__/story.ts
@@ -0,0 +1,45 @@
+import {Component, createElement as h} from 'react';
+import {storiesOf} from '@storybook/react';
+import {action} from '@storybook/addon-actions';
+import {linkTo} from '@storybook/addon-links';
+import {SizeSensor} from '..';
+import ShowDocs from '../../../.storybook/ShowDocs'
+
+class StorySizeSensorInteractive extends Component<any, any> {
+  state = {
+    width: 50
+  };
+
+  render () {
+    return h('div', null,
+      h(SizeSensor, {}, ({width, height}) =>
+        h('div', {style: {
+          width: `${this.state.width}%`,
+          height: 200,
+          border: '1px solid tomato'
+        }}, `${width}px, ${height}px`)
+      ),
+      h('button', {onClick: () => this.setState({width: 25})}, '25%'),
+      h('button', {onClick: () => this.setState({width: 50})}, '50%'),
+      h('button', {onClick: () => this.setState({width: 75})}, '75%'),
+      h('button', {onClick: () => this.setState({width: 100})}, '100%')
+    );
+  }
+}
+
+storiesOf('Sensors/SizeSensor', module)
+  .add('Documentation', () => h(ShowDocs, {name: 'SizeSensor'}))
+  .add('Basic example', () =>
+    h(SizeSensor, {
+      onSize: action('onSize')
+    }, ({width, height}) =>
+      h('div', {
+        style: {
+          border: '1px solid red'
+        }
+      },
+        `WIDTH: ${width}, HEIGHT: ${height}`
+      )
+    )
+  )
+  .add('Interactive', () => h(StorySizeSensorInteractive));
diff --git a/src/SizeSensor/story.ts b/src/SizeSensor/story.ts
deleted file mode 100644
index fef303ce..00000000
--- a/src/SizeSensor/story.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import {createElement as h} from 'react';
-import {storiesOf} from '@storybook/react';
-import {action} from '@storybook/addon-actions';
-import {linkTo} from '@storybook/addon-links';
-import {SizeSensor} from '.';
-import ShowDocs from '../../.storybook/ShowDocs'
-
-storiesOf('Sensors/SizeSensor', module)
-  .add('Documentation', () => h(ShowDocs, {name: 'SizeSensor'}))
-  .add('Example', () =>
-    h(SizeSensor, {
-      onSize: action('onSize')
-    }, ({width, height}) =>
-      h('div', {
-        style: {
-          border: '1px solid red'
-        }
-      },
-        `WIDTH: ${width}, HEIGHT: ${height}`
-      )
-    )
-  );

From ede8812f8ad9f7b6a1e2936591c755aa86d41be9 Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Fri, 26 Jan 2018 14:00:04 +0000
Subject: [PATCH 11/78] feat: create withSize() and @withSize

---
 src/SizeSensor/__story__/story.ts | 62 ++++++++++++++++++++++++++-----
 src/SizeSensor/index.ts           | 14 ++++++-
 src/util/faccToHoc.ts             | 15 ++++----
 3 files changed, 71 insertions(+), 20 deletions(-)

diff --git a/src/SizeSensor/__story__/story.ts b/src/SizeSensor/__story__/story.ts
index b1254fc2..e32c381b 100644
--- a/src/SizeSensor/__story__/story.ts
+++ b/src/SizeSensor/__story__/story.ts
@@ -2,31 +2,67 @@ import {Component, createElement as h} from 'react';
 import {storiesOf} from '@storybook/react';
 import {action} from '@storybook/addon-actions';
 import {linkTo} from '@storybook/addon-links';
-import {SizeSensor} from '..';
+import {SizeSensor, withSize} from '..';
 import ShowDocs from '../../../.storybook/ShowDocs'
 
+const Print = (props) => h('pre', {
+  style: {fontFamily: 'monospace'}
+}, JSON.stringify(props, null, 4));
+
 class StorySizeSensorInteractive extends Component<any, any> {
   state = {
-    width: 50
+    width: 50,
+    height: 100
   };
 
   render () {
     return h('div', null,
-      h(SizeSensor, {}, ({width, height}) =>
+      h(SizeSensor, {}, (state) =>
         h('div', {style: {
           width: `${this.state.width}%`,
-          height: 200,
+          height: this.state.height,
           border: '1px solid tomato'
-        }}, `${width}px, ${height}px`)
+        }}, h(Print, state))
       ),
-      h('button', {onClick: () => this.setState({width: 25})}, '25%'),
-      h('button', {onClick: () => this.setState({width: 50})}, '50%'),
-      h('button', {onClick: () => this.setState({width: 75})}, '75%'),
-      h('button', {onClick: () => this.setState({width: 100})}, '100%')
+      h('button', {onClick: () => this.setState({width: 25})}, 'Width: 25%'),
+      h('button', {onClick: () => this.setState({width: 50})}, 'Width: 50%'),
+      h('button', {onClick: () => this.setState({width: 75})}, 'Width: 75%'),
+      h('button', {onClick: () => this.setState({width: 100})}, 'Width: 100%'),
+
+      h('br'),
+
+      h('button', {onClick: () => this.setState({height: 100})}, 'Height: 100px'),
+      h('button', {onClick: () => this.setState({height: 200})}, 'Height: 200px'),
+      h('button', {onClick: () => this.setState({height: 300})}, 'Height: 300px'),
     );
   }
 }
 
+const Hoc1 = withSize(Print);
+const Hoc2 = withSize(Print, 'mySize');
+const Hoc3 = withSize(Print, '');
+
+@withSize
+class Decorator1 extends Component<any, any> {
+  render () {
+    return h(Print, this.props);
+  }
+}
+
+@withSize('mySize')
+class Decorator2 extends Component<any, any> {
+  render () {
+    return h(Print, this.props);
+  }
+}
+
+@withSize('')
+class Decorator3 extends Component<any, any> {
+  render () {
+    return h(Print, this.props);
+  }
+}
+
 storiesOf('Sensors/SizeSensor', module)
   .add('Documentation', () => h(ShowDocs, {name: 'SizeSensor'}))
   .add('Basic example', () =>
@@ -42,4 +78,10 @@ storiesOf('Sensors/SizeSensor', module)
       )
     )
   )
-  .add('Interactive', () => h(StorySizeSensorInteractive));
+  .add('Interactive', () => h(StorySizeSensorInteractive))
+  .add('HOC 1', () => h(Hoc1))
+  .add('HOC 2', () => h(Hoc2))
+  .add('HOC 3', () => h(Hoc3))
+  .add('Decorator 1', () => h(Decorator1))
+  .add('Decorator 2', () => h(Decorator2))
+  .add('Decorator 3', () => h(Decorator3));
diff --git a/src/SizeSensor/index.ts b/src/SizeSensor/index.ts
index 28ce984b..ed55b6bc 100644
--- a/src/SizeSensor/index.ts
+++ b/src/SizeSensor/index.ts
@@ -2,14 +2,14 @@ import {Component, createElement as h, cloneElement, Children} from 'react';
 import Types from 'prop-types';
 import {idx, noop} from '../util';
 import renderProp from '../util/renderProp';
+import faccToHoc from '../util/faccToHoc';
 
 const DRAF = (callback) => setTimeout(callback, 35);
 
 export interface ISizeSensorProps extends React.HTMLProps<any> {
   children?: ((size: ISizeSensorState) => React.ReactElement<any>) | React.ReactElement<any>;
+  render?: (size: ISizeSensorState) => React.ReactElement<any>;
   onSize?: (size: ISizeSensorState) => void;
-  refElement?;
-  tagName?: string;
 }
 
 export interface ISizeSensorState {
@@ -103,3 +103,13 @@ export class SizeSensor extends Component<ISizeSensorProps, ISizeSensorState> {
     ]);
   }
 }
+
+const divWrapper = (Comp, propName, props, state) =>
+  h('div', null,
+    h(Comp, propName ?
+      {[propName]: state, ...props} :
+      {...state, ...props}
+    )
+  ) as any;
+
+export const withSize = faccToHoc(SizeSensor, 'size', divWrapper);
diff --git a/src/util/faccToHoc.ts b/src/util/faccToHoc.ts
index 92ef75e6..b306a14d 100644
--- a/src/util/faccToHoc.ts
+++ b/src/util/faccToHoc.ts
@@ -1,7 +1,12 @@
 import {h} from '../util';
 import addClassDecoratorSupport from './addClassDecoratorSupport';
 
-const faccToHoc = (Facc, prop?: string) => {
+const noWrap = (Comp, propName, props, state) => h(Comp, propName ?
+  {[propName]: state, ...props} :
+  {...state, ...props}
+);
+
+const faccToHoc = (Facc, prop?: string, wrapper = noWrap) => {
   const hoc = (Comp, propName: any = prop, faccProps: object = null) => {
     const isClassDecoratorMethodCall = typeof Comp === 'string';
 
@@ -10,13 +15,7 @@ const faccToHoc = (Facc, prop?: string) => {
     }
 
     const Enhanced = (props) =>
-      h(Facc, faccProps, (state) =>
-        h(Comp,
-          propName ?
-            {[propName]: state, ...props} :
-            {...state, ...props}
-        )
-      );
+      h(Facc, faccProps, (state) => wrapper(Comp, propName, props, state));
 
     return addClassDecoratorSupport(Enhanced);
   };

From c302ff28f123813b2ac8f01a0cc1ad2f91ba6c3b Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Fri, 26 Jan 2018 14:15:20 +0000
Subject: [PATCH 12/78] feat: add withWidth and @withWidth

---
 README.md                                |  4 ++--
 src/SizeSensor/index.ts                  | 10 +---------
 src/WidthSensor/{ => __story__}/story.ts | 17 ++++++++++++++---
 src/WidthSensor/index.ts                 | 14 ++++----------
 src/util/faccToHoc.ts                    |  8 ++++++++
 5 files changed, 29 insertions(+), 24 deletions(-)
 rename src/WidthSensor/{ => __story__}/story.ts (56%)

diff --git a/README.md b/README.md
index 1dc9db13..69347463 100644
--- a/README.md
+++ b/README.md
@@ -41,10 +41,10 @@ const MyComponent = mock();
      - [`<LocationSensor>`](./docs/LocationSensor.md), [`withLocation()`](./docs/LocationSensor.md#withlocation-hoc), and [`@withLocation`](./docs/LocationSensor.md#withlocation-decora)
      - [`<OrientationSensor>`](./docs/OrientationSensor.md), [`withOrientation()`](./docs/OrientationSensor.md#withorientation), and `@withOrientation`
      - [`<ScrollSensor>`](./docs/ScrollSensor.md)
-     - [`<SizeSensor>`](./docs/SizeSensor.md)
+     - [`<SizeSensor>`](./docs/SizeSensor.md), [`withSize()`](./docs/SizeSensor.md#withsize-hoc), and [`@withSize`](./docs/SizeSensor.md#withsize-decorator)
+        - [`<WidthSensor>`](./docs/WidthSensor.md), `withWidth`, and `@withWidth`
      - [`<ViewportSensor>`](./docs/ViewportSensor.md), `withViewport`, and `@withViewport`
         - [`<ViewportScrollSensor>`](./docs/ViewportSensor.md#viewportscrollsensor) and [`<ViewportObserverSensor>`](./docs/ViewportSensor.md#viewportobserversensor)
-     - [`<WidthSensor>`](./docs/WidthSensor.md)
      - [`<WindowScrollSensor>`](./docs/WindowScrollSensor.md), `withWindowScroll()`, and `@withWindowScroll`
      - [`<WindowSizeSensor>`](./docs/WindowSizeSensor.md), `withWindowSize()`, and `@withWindowSize`
   - Generators
diff --git a/src/SizeSensor/index.ts b/src/SizeSensor/index.ts
index ed55b6bc..7dec27b6 100644
--- a/src/SizeSensor/index.ts
+++ b/src/SizeSensor/index.ts
@@ -2,7 +2,7 @@ import {Component, createElement as h, cloneElement, Children} from 'react';
 import Types from 'prop-types';
 import {idx, noop} from '../util';
 import renderProp from '../util/renderProp';
-import faccToHoc from '../util/faccToHoc';
+import faccToHoc, {divWrapper} from '../util/faccToHoc';
 
 const DRAF = (callback) => setTimeout(callback, 35);
 
@@ -104,12 +104,4 @@ export class SizeSensor extends Component<ISizeSensorProps, ISizeSensorState> {
   }
 }
 
-const divWrapper = (Comp, propName, props, state) =>
-  h('div', null,
-    h(Comp, propName ?
-      {[propName]: state, ...props} :
-      {...state, ...props}
-    )
-  ) as any;
-
 export const withSize = faccToHoc(SizeSensor, 'size', divWrapper);
diff --git a/src/WidthSensor/story.ts b/src/WidthSensor/__story__/story.ts
similarity index 56%
rename from src/WidthSensor/story.ts
rename to src/WidthSensor/__story__/story.ts
index 0a838dbb..7f190fa4 100644
--- a/src/WidthSensor/story.ts
+++ b/src/WidthSensor/__story__/story.ts
@@ -2,8 +2,16 @@ import {createElement as h} from 'react';
 import {storiesOf} from '@storybook/react';
 import {action} from '@storybook/addon-actions';
 import {linkTo} from '@storybook/addon-links';
-import WidthSensor from '.';
-import ShowDocs from '../../.storybook/ShowDocs'
+import {WidthSensor, withWidth} from '..';
+import ShowDocs from '../../../.storybook/ShowDocs'
+
+const Print = (props) => h('pre', {
+  style: {fontFamily: 'monospace'}
+}, JSON.stringify(props, null, 4));
+
+const Hoc1 = withWidth(Print);
+const Hoc2 = withWidth(Print, 'mySize');
+const Hoc3 = withWidth(Print, '');
 
 storiesOf('Sensors/WidthSensor', module)
   .add('Documentation', () => h(ShowDocs, {name: 'WidthSensor'}))
@@ -19,4 +27,7 @@ storiesOf('Sensors/WidthSensor', module)
         `WIDTH: ${width}, HEIGHT: ${height}`
       )
     )
-  );
+  )
+  .add('HOC 1', () => h(Hoc1))
+  .add('HOC 2', () => h(Hoc2))
+  .add('HOC 3', () => h(Hoc3));
diff --git a/src/WidthSensor/index.ts b/src/WidthSensor/index.ts
index 8e90fe83..cd8facf5 100644
--- a/src/WidthSensor/index.ts
+++ b/src/WidthSensor/index.ts
@@ -1,17 +1,13 @@
 import {Component, createElement as h} from 'react';
 import {SizeSensor, ISizeSensorProps, ISizeSensorState} from '../SizeSensor';
 import {noop} from '../util';
+import faccToHoc, {divWrapper} from '../util/faccToHoc';
 
 export interface IWidthSensorProps extends ISizeSensorProps {
   onWidth?: (size: ISizeSensorState) => void;
 }
 
 export class WidthSensor extends Component<IWidthSensorProps, ISizeSensorState> {
-  state: ISizeSensorState = {
-    width: null,
-    height: null,
-  };
-
   onSize = (size) => {
     if (this.state.width !== size.width) {
       this.setState(size);
@@ -20,15 +16,13 @@ export class WidthSensor extends Component<IWidthSensorProps, ISizeSensorState>
   };
 
   render () {
-    const {children, onWidth, ..._rest} = this.props;
+    const {onWidth, ..._rest} = this.props;
     const rest: ISizeSensorProps = _rest;
 
     rest.onSize = this.onSize;
 
-    return h(SizeSensor, rest,
-      typeof children === 'function' ? children(this.state) : children
-    );
+    return h(SizeSensor, rest);
   }
 }
 
-export default WidthSensor;
+export const withWidth = faccToHoc(WidthSensor, 'size', divWrapper);
diff --git a/src/util/faccToHoc.ts b/src/util/faccToHoc.ts
index b306a14d..2d9ddf8c 100644
--- a/src/util/faccToHoc.ts
+++ b/src/util/faccToHoc.ts
@@ -6,6 +6,14 @@ const noWrap = (Comp, propName, props, state) => h(Comp, propName ?
   {...state, ...props}
 );
 
+export const divWrapper = (Comp, propName, props, state) =>
+  h('div', null,
+    h(Comp, propName ?
+      {[propName]: state, ...props} :
+      {...state, ...props}
+    )
+  ) as any;
+
 const faccToHoc = (Facc, prop?: string, wrapper = noWrap) => {
   const hoc = (Comp, propName: any = prop, faccProps: object = null) => {
     const isClassDecoratorMethodCall = typeof Comp === 'string';

From 381bd19cf4f0c3decf49c8281c2ae9eb16d60cec Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Fri, 26 Jan 2018 14:22:52 +0000
Subject: [PATCH 13/78] docs: add withWidth and withSize docs

---
 README.md             |  2 +-
 docs/NetworkSensor.md |  2 +-
 docs/SizeSensor.md    | 61 +++++++++++++++++++++++++++++++++++++++++++
 docs/WidthSensor.md   | 13 ++++++++-
 4 files changed, 75 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 69347463..5cb2f669 100644
--- a/README.md
+++ b/README.md
@@ -42,7 +42,7 @@ const MyComponent = mock();
      - [`<OrientationSensor>`](./docs/OrientationSensor.md), [`withOrientation()`](./docs/OrientationSensor.md#withorientation), and `@withOrientation`
      - [`<ScrollSensor>`](./docs/ScrollSensor.md)
      - [`<SizeSensor>`](./docs/SizeSensor.md), [`withSize()`](./docs/SizeSensor.md#withsize-hoc), and [`@withSize`](./docs/SizeSensor.md#withsize-decorator)
-        - [`<WidthSensor>`](./docs/WidthSensor.md), `withWidth`, and `@withWidth`
+        - [`<WidthSensor>`](./docs/WidthSensor.md), [`withWidth`](./docs/WidthSensor.md#withwidth-hoc-and-withwidth-decorator), and [`@withWidth`](./docs/WidthSensor.md#withwidth-hoc-and-withwidth-decorator)
      - [`<ViewportSensor>`](./docs/ViewportSensor.md), `withViewport`, and `@withViewport`
         - [`<ViewportScrollSensor>`](./docs/ViewportSensor.md#viewportscrollsensor) and [`<ViewportObserverSensor>`](./docs/ViewportSensor.md#viewportobserversensor)
      - [`<WindowScrollSensor>`](./docs/WindowScrollSensor.md), `withWindowScroll()`, and `@withWindowScroll`
diff --git a/docs/NetworkSensor.md b/docs/NetworkSensor.md
index 843bb408..855ad98a 100644
--- a/docs/NetworkSensor.md
+++ b/docs/NetworkSensor.md
@@ -78,7 +78,7 @@ const NetworkStatus = withNetwork(NetworkStatusFormatter, 'network');
 Or simply merge the whole object into your props
 
 ```js
-const NetworkStatus = withNetwork(NetworkStatusFormatter, null);
+const NetworkStatus = withNetwork(NetworkStatusFormatter, '');
 ```
 
 ## `@withNetwork` decorator
diff --git a/docs/SizeSensor.md b/docs/SizeSensor.md
index 29a4ed26..ea5a5649 100644
--- a/docs/SizeSensor.md
+++ b/docs/SizeSensor.md
@@ -23,3 +23,64 @@ import {SizeSensor} from 'libreact/lib/SizeSensor';
   Resize me!
 </SizeSensor>
 ```
+
+
+## `withSize()` HOC
+
+HOC that merges `size` prop into enhanced component's props.
+
+```jsx
+import {withSize} from 'libreact/lib/SizeSensor';
+
+const MyComp = (props) =>
+  <pre style={{fontFamily: 'nomospace'}}>
+    {JSON.stringify(props, null, 4)}
+  </pre>;
+
+const MyCompWithSize = withSize(MyComp);
+
+<MyCompWithSize />
+```
+
+You can overwrite the inject prop name
+
+```js
+const MyCompWithDimensions = withSize(MyComp, 'dimensions');
+```
+
+Or simply merge the whole object into your props
+
+```js
+const MyCompWithSize = withSize(MyComp, '');
+```
+
+## `@withSize` decorator
+
+React stateful component decorator that adds `size` prop.
+
+```js
+import {withSize} from 'libreact/lib/SizeSensor';
+
+@withSize
+class MyComp extends Component {
+
+}
+```
+
+Specify different prop name
+
+```js
+@withSize('dimensions')
+class MyComp extends Component {
+
+}
+```
+
+or merge the the whole size object into props
+
+```js
+@withSize('')
+class MyComp extends Component {
+
+}
+```
diff --git a/docs/WidthSensor.md b/docs/WidthSensor.md
index a7723dec..31d81048 100644
--- a/docs/WidthSensor.md
+++ b/docs/WidthSensor.md
@@ -7,7 +7,7 @@ FaCC that works similar to [`SizeSensor`](./SizeSensor.md) but re-renders only o
 Use it as FaCC
 
 ```jsx
-import {WidthSensor} from 'libreact/lib/WidthSensor';
+[`withSize()`](./docs/SizeSensor.md#withsize-hoc), and [`@withSize`](./docs/SizeSensor.md#withsize-decorator)
 
 <WidthSensor>{({width, height}) =>
   `WIDTH: ${width}, HEIGHT: ${height}`
@@ -23,3 +23,14 @@ import {WidthSensor} from 'libreact/lib/WidthSensor';
   Resize me!
 </SizeSensor>
 ```
+
+
+## `withWidth()` HOC and `@withWidth` decorator
+
+Works same as [`withSize()`](./SizeSensor.md#withsize-hoc) and [`@withSize`](./SizeSensor.md#withsize-decorator).
+
+Incldue `withWidth` as follows
+
+```js
+import {withWidth} from 'libreact/lib/WidthSensor';
+```

From d861cef8360f8f49657a14b18c083830b214f89b Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Fri, 26 Jan 2018 14:50:38 +0000
Subject: [PATCH 14/78] feat: add withViewport() and @withViewport

---
 README.md                                     |  1 +
 src/ViewportObserverSensor/index.ts           |  9 ++-
 src/ViewportScrollSensor/index.ts             |  9 ++-
 .../__story__/StoryViewportSensorBasicJsx.tsx | 23 +++++++
 src/ViewportSensor/__story__/story.tsx        | 65 ++++++++++++++++++-
 src/ViewportSensor/index.tsx                  |  6 ++
 6 files changed, 104 insertions(+), 9 deletions(-)
 create mode 100644 src/ViewportSensor/__story__/StoryViewportSensorBasicJsx.tsx

diff --git a/README.md b/README.md
index 5cb2f669..318e68f3 100644
--- a/README.md
+++ b/README.md
@@ -52,6 +52,7 @@ const MyComponent = mock();
      - [`<LocalStorage>`](./docs/LocalStorage.md), `<SessionStorage>`, `<IndexedDb>`
      - [`<Speak>`](./docs/Speak.md), [`<Vibrate>`](./docs/Vibrate.md), [`<Alert>`](./docs/Alert.md), `<Prompt>`, `<Confirm>`
      - [`go()`](./docs/route.md#go), `<Redirect>`, `<Link>`, `<Sms>`, `<Mailto>`, and `<Tel>`
+     - `<Overlay>`, `<FullScreen>`
   - Promises
      - [`<Resolve>`](./docs/Resolve.md), `<Fetch>`
   - Context
diff --git a/src/ViewportObserverSensor/index.ts b/src/ViewportObserverSensor/index.ts
index 8766884d..cdfeed57 100644
--- a/src/ViewportObserverSensor/index.ts
+++ b/src/ViewportObserverSensor/index.ts
@@ -1,7 +1,10 @@
 import {Component, cloneElement} from 'react';
 import {h, on, off, noop} from '../util';
+import renderProp from '../util/renderProp';
 
 export interface IViewportObserverSensorProps {
+  children?: ((size: IViewportObserverSensorState) => React.ReactElement<any>) | React.ReactElement<any>;
+  render?: (size: IViewportObserverSensorState) => React.ReactElement<any>;
   margin?: [number, number, number, number];
   threshold?: number;
   onChange?: (state: IViewportObserverSensorState) => void;
@@ -51,19 +54,19 @@ export class ViewportObserverSensor extends Component<IViewportObserverSensorPro
   onObserve = (entries: IntersectionObserverEntry[]) => {
     const entry = entries[0];
     const {intersectionRatio} = entry;
-    const {threshold, onChange = noop} = this.props;
+    const {threshold, onChange} = this.props;
 
     const state = {
       visible: !!((!threshold && intersectionRatio) || (intersectionRatio >= threshold))
     };
 
     this.setState(state);
-    onChange(state);
+    (onChange || noop)(state);
   };
 
   render () {
     const {children} = this.props;
-    const element = typeof children === 'function' ? children(this.state) : children;
+    const element = renderProp(this.props, this.state);
 
     if (process.env.NODE_ENV !== 'production') {
       if ((typeof element !== 'object') || (typeof element.type !== 'string')) {
diff --git a/src/ViewportScrollSensor/index.ts b/src/ViewportScrollSensor/index.ts
index ffa3acee..116c1b46 100644
--- a/src/ViewportScrollSensor/index.ts
+++ b/src/ViewportScrollSensor/index.ts
@@ -1,6 +1,7 @@
 import {Component, cloneElement} from 'react';
 import {h, on, off, noop} from '../util';
 import * as throttle from 'throttle-debounce/throttle';
+import renderProp from '../util/renderProp';
 
 export type TMargin = [number, number, number, number];
 export type TRect = [number, number, number, number];
@@ -44,6 +45,8 @@ type TArea = (react: TRect) => number;
 const area: TArea = ([x1, y1, x2, y2]) => (x2 - x1) * (y2 - y1);
 
 export interface IViewportScrollSensorProps {
+  children?: ((size: IViewportScrollSensorState) => React.ReactElement<any>) | React.ReactElement<any>;
+  render?: (size: IViewportScrollSensorState) => React.ReactElement<any>;
   margin?: TMargin;
   threshold?: number;
   throttle?: number;
@@ -91,7 +94,7 @@ export class ViewportScrollSensor extends Component<IViewportScrollSensorProps,
       return;
     }
 
-    const {threshold, margin, onChange = noop} = this.props;
+    const {threshold, margin, onChange} = this.props;
     let visible = false;
 
     const rectRoot = getRootRect(margin);
@@ -112,13 +115,13 @@ export class ViewportScrollSensor extends Component<IViewportScrollSensorProps,
       };
 
       this.setState(state);
-      this.props.onChange(state);
+      (onChange || noop)(state);
     }
   });
 
   render () {
     const {children} = this.props;
-    const element = typeof children === 'function' ? children(this.state) : children;
+    const element = renderProp(this.props, this.state);
 
     if (process.env.NODE_ENV !== 'production') {
       if ((typeof element !== 'object') || (typeof element.type !== 'string')) {
diff --git a/src/ViewportSensor/__story__/StoryViewportSensorBasicJsx.tsx b/src/ViewportSensor/__story__/StoryViewportSensorBasicJsx.tsx
new file mode 100644
index 00000000..465cc73a
--- /dev/null
+++ b/src/ViewportSensor/__story__/StoryViewportSensorBasicJsx.tsx
@@ -0,0 +1,23 @@
+import {h} from '../../util';
+
+const StoryViewportSensorBasicJsx = ({children}) => {
+  return (
+    <div>
+      <div style={{
+        width: 300,
+        height: 1e3,
+        border: '1px solid tomato'
+      }} />
+
+      {children}
+
+      <div style={{
+        width: 300,
+        height: 1e3,
+        border: '1px solid tomato'
+      }} />
+    </div>
+  );
+};
+
+export default StoryViewportSensorBasicJsx;
diff --git a/src/ViewportSensor/__story__/story.tsx b/src/ViewportSensor/__story__/story.tsx
index 32dc2035..b9bd1921 100644
--- a/src/ViewportSensor/__story__/story.tsx
+++ b/src/ViewportSensor/__story__/story.tsx
@@ -1,13 +1,47 @@
-import {createElement as h} from 'react';
+import {Component, createElement as h} from 'react';
 import {storiesOf} from '@storybook/react';
 import {action} from '@storybook/addon-actions';
 import {linkTo} from '@storybook/addon-links';
-import {ViewportSensor} from '..';
+import {ViewportSensor, withViewport} from '..';
 import ShowDocs from '../../../.storybook/ShowDocs'
+import StoryViewportSensorBasicJsx from './StoryViewportSensorBasicJsx';
 import StoryViewportSensorBasic from '../../ViewportObserverSensor/__story__/StoryViewportSensorBasic';
 import StoryViewportSensorHorizontal from '../../ViewportObserverSensor/__story__/StoryViewportSensorHorizontal';
 import StoryViewportSensorConf from '../../ViewportObserverSensor/__story__/StoryViewportSensorConf';
 
+const Print = (props) => h('pre', {
+  style: {fontFamily: 'monospace'}
+}, JSON.stringify(props, null, 4));
+
+const Hoc1 = withViewport(Print, '', {
+  threshold: 1
+});
+
+const Hoc2 = withViewport(Print, 'visible', {
+  threshold: 1
+});
+
+@withViewport
+class Decorator1 extends Component<any, any> {
+  render () {
+    return h(Print, this.props);
+  }
+}
+
+@withViewport('', {threshold: 1})
+class Decorator2 extends Component<any, any> {
+  render () {
+    return h(Print, this.props);
+  }
+}
+
+@withViewport('visible', {threshold: 1})
+class Decorator3 extends Component<any, any> {
+  render () {
+    return h(Print, this.props);
+  }
+}
+
 storiesOf('Sensors/ViewportSensor', module)
   .add('Documentation', () => h(ShowDocs, {name: 'ViewportSensor'}))
   .add('Basic example', () =>
@@ -23,4 +57,29 @@ storiesOf('Sensors/ViewportSensor', module)
   .add('Threshold 100%', () =>
     <StoryViewportSensorConf threshold={1} sensor={ViewportSensor} onChange={action('onChange')} />)
   .add('Threshold 100%, margin 100px', () =>
-    <StoryViewportSensorConf threshold={1} margin={[100, 100, 100, 100]} sensor={ViewportSensor} onChange={action('onChange')} />);
+    <StoryViewportSensorConf threshold={1} margin={[100, 100, 100, 100]} sensor={ViewportSensor} onChange={action('onChange')} />)
+  .add('HOC 1', () =>
+    <StoryViewportSensorBasicJsx>
+      <Hoc1 />
+    </StoryViewportSensorBasicJsx>
+  )
+  .add('HOC 2', () =>
+    <StoryViewportSensorBasicJsx>
+      <Hoc2 />
+    </StoryViewportSensorBasicJsx>
+  )
+  .add('Decorator 1', () =>
+    <StoryViewportSensorBasicJsx>
+      <Decorator1 />
+    </StoryViewportSensorBasicJsx>
+  )
+  .add('Decorator 2', () =>
+    <StoryViewportSensorBasicJsx>
+      <Decorator2 />
+    </StoryViewportSensorBasicJsx>
+  )
+  .add('Decorator 3', () =>
+    <StoryViewportSensorBasicJsx>
+      <Decorator3 />
+    </StoryViewportSensorBasicJsx>
+  );
diff --git a/src/ViewportSensor/index.tsx b/src/ViewportSensor/index.tsx
index 375a8097..a9a8ed46 100644
--- a/src/ViewportSensor/index.tsx
+++ b/src/ViewportSensor/index.tsx
@@ -1,6 +1,7 @@
 import {h} from '../util';
 import {ViewportObserverSensor, IViewportObserverSensorProps, IViewportObserverSensorState} from '../ViewportObserverSensor';
 import {loadable} from '../loadable';
+import faccToHoc, {divWrapper} from '../util/faccToHoc';
 
 let Sensor: any = ViewportObserverSensor;
 
@@ -14,3 +15,8 @@ if (('IntersectionObserver' in window)) {
 export const ViewportSensor: React.StatelessComponent<IViewportObserverSensorProps> = (props) => {
   return <Sensor {...props} />
 };
+
+const wrapper = (Comp, propName, props, state) =>
+  divWrapper(Comp, propName || 'viewport', props, state.visible);
+
+export const withViewport = faccToHoc(ViewportSensor, 'viewport', wrapper);

From d0ab696c2e8bdf8ba009ec9f94c9ed51e9468b73 Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Fri, 26 Jan 2018 14:55:38 +0000
Subject: [PATCH 15/78] docs: add withViewport reference

---
 README.md              |  4 ++--
 docs/ViewportSensor.md | 49 ++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 51 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 318e68f3..5e03d2ce 100644
--- a/README.md
+++ b/README.md
@@ -42,8 +42,8 @@ const MyComponent = mock();
      - [`<OrientationSensor>`](./docs/OrientationSensor.md), [`withOrientation()`](./docs/OrientationSensor.md#withorientation), and `@withOrientation`
      - [`<ScrollSensor>`](./docs/ScrollSensor.md)
      - [`<SizeSensor>`](./docs/SizeSensor.md), [`withSize()`](./docs/SizeSensor.md#withsize-hoc), and [`@withSize`](./docs/SizeSensor.md#withsize-decorator)
-        - [`<WidthSensor>`](./docs/WidthSensor.md), [`withWidth`](./docs/WidthSensor.md#withwidth-hoc-and-withwidth-decorator), and [`@withWidth`](./docs/WidthSensor.md#withwidth-hoc-and-withwidth-decorator)
-     - [`<ViewportSensor>`](./docs/ViewportSensor.md), `withViewport`, and `@withViewport`
+        - [`<WidthSensor>`](./docs/WidthSensor.md), [`withWidth()`](./docs/WidthSensor.md#withwidth-hoc-and-withwidth-decorator), and [`@withWidth`](./docs/WidthSensor.md#withwidth-hoc-and-withwidth-decorator)
+     - [`<ViewportSensor>`](./docs/ViewportSensor.md), [`withViewport()`](./docs/ViewportSensor.md#withviewport-hoc), and [`@withViewport`](./docs/ViewportSensor.md#withviewport-decorator)
         - [`<ViewportScrollSensor>`](./docs/ViewportSensor.md#viewportscrollsensor) and [`<ViewportObserverSensor>`](./docs/ViewportSensor.md#viewportobserversensor)
      - [`<WindowScrollSensor>`](./docs/WindowScrollSensor.md), `withWindowScroll()`, and `@withWindowScroll`
      - [`<WindowSizeSensor>`](./docs/WindowSizeSensor.md), `withWindowSize()`, and `@withWindowSize`
diff --git a/docs/ViewportSensor.md b/docs/ViewportSensor.md
index 6f2b106b..de339ef1 100644
--- a/docs/ViewportSensor.md
+++ b/docs/ViewportSensor.md
@@ -59,3 +59,52 @@ how much to throttle document's `scroll` event.
 
 Is the same as `<ViewportSensor>`, but uses only `IntersectionObserver` to detect element's intersection
 with viewport.
+
+
+## `withViewport()` HOC
+
+HOC that merges `viewport` boolean prop into enhanced component's props. Uses `<ViewportSensor>` under-the-hood.
+
+```jsx
+import {withViewport} from 'libreact/lib/ViewportSensor';
+
+const MyComp = (props) =>
+  <pre style={{fontFamily: 'nomospace'}}>
+    {JSON.stringify(props, null, 4)}
+  </pre>;
+
+const MyCompWithViewport = withViewport(MyComp);
+
+<MyCompWithViewport />
+```
+
+You can overwrite the inject prop name and `<ViewportSensor>` props
+
+```js
+const MyCompWithVisibility = withViewport(MyComp, 'visible', {
+  threshold: 1
+});
+```
+
+
+## `@withViewport` decorator
+
+React stateful component decorator that adds `viewport` prop.
+
+```js
+import {withViewport} from 'libreact/lib/ViewportSensor';
+
+@withViewport
+class MyComp extends Component {
+
+}
+```
+
+Specify different prop name and `<ViewportSensor>` props
+
+```js
+@withViewport('visible', {threshold: 1})
+class MyComp extends Component {
+
+}
+```

From 19df0e5ee8470c1e853715b8096aefc4ec5dc1ea Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Fri, 26 Jan 2018 15:09:49 +0000
Subject: [PATCH 16/78] feat: add <BrowserOnly>

---
 README.md | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 5e03d2ce..125761d0 100644
--- a/README.md
+++ b/README.md
@@ -51,7 +51,7 @@ const MyComponent = mock();
      - [`<Audio>`](./docs/Audio.md), [`<Video>`](./docs/Video.md), and `<Media>`
      - [`<LocalStorage>`](./docs/LocalStorage.md), `<SessionStorage>`, `<IndexedDb>`
      - [`<Speak>`](./docs/Speak.md), [`<Vibrate>`](./docs/Vibrate.md), [`<Alert>`](./docs/Alert.md), `<Prompt>`, `<Confirm>`
-     - [`go()`](./docs/route.md#go), `<Redirect>`, `<Link>`, `<Sms>`, `<Mailto>`, and `<Tel>`
+     - [`go()`](./docs/route.md#go), `<Redirect>`, `<Link>`, `<Sms>`, `<Email>`, and `<Tel>`
      - `<Overlay>`, `<FullScreen>`
   - Promises
      - [`<Resolve>`](./docs/Resolve.md), `<Fetch>`
@@ -70,6 +70,9 @@ const MyComponent = mock();
      - [`<CssResetTantek>`](./docs/reset/CssResetTantek.md)
      - [`<CssResetUniversal>`](./docs/reset/CssResetUniversal.md)
      - [`<CssResetYahoo>`](./docs/reset/CssResetYahoo.md)
+  - Other
+     - [`getDisplayName()`](./docs/getDisplayName.md)
+     - `<BrowserOnly>` or `<Environment>`
 
 
 ## License

From 9689ecaf45550583a7cd93c69f6f411faa63606a Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Fri, 26 Jan 2018 15:13:20 +0000
Subject: [PATCH 17/78] feat: add <ServerOnly> component

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 125761d0..211b66cf 100644
--- a/README.md
+++ b/README.md
@@ -72,7 +72,7 @@ const MyComponent = mock();
      - [`<CssResetYahoo>`](./docs/reset/CssResetYahoo.md)
   - Other
      - [`getDisplayName()`](./docs/getDisplayName.md)
-     - `<BrowserOnly>` or `<Environment>`
+     - `<BrowserOnly>`, `<ServerOnly>`, and `<Environment>`
 
 
 ## License

From 31a2a0578047818745373bb9f65df215872aa584 Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Fri, 26 Jan 2018 16:12:39 +0000
Subject: [PATCH 18/78] feat: add native <FullScreen> component

---
 README.md               |  5 ++++
 package.json            |  5 ++--
 src/FullScreen/index.ts | 62 +++++++++++++++++++++++++++++++++++++++++
 3 files changed, 70 insertions(+), 2 deletions(-)
 create mode 100644 src/FullScreen/index.ts

diff --git a/README.md b/README.md
index 211b66cf..3d98ca32 100644
--- a/README.md
+++ b/README.md
@@ -47,6 +47,9 @@ const MyComponent = mock();
         - [`<ViewportScrollSensor>`](./docs/ViewportSensor.md#viewportscrollsensor) and [`<ViewportObserverSensor>`](./docs/ViewportSensor.md#viewportobserversensor)
      - [`<WindowScrollSensor>`](./docs/WindowScrollSensor.md), `withWindowScroll()`, and `@withWindowScroll`
      - [`<WindowSizeSensor>`](./docs/WindowSizeSensor.md), `withWindowSize()`, and `@withWindowSize`
+     - `<MotionSensor>`
+     - `<MouseSensor>`
+     - `<GeoPositionSensor>`
   - Generators
      - [`<Audio>`](./docs/Audio.md), [`<Video>`](./docs/Video.md), and `<Media>`
      - [`<LocalStorage>`](./docs/LocalStorage.md), `<SessionStorage>`, `<IndexedDb>`
@@ -73,6 +76,8 @@ const MyComponent = mock();
   - Other
      - [`getDisplayName()`](./docs/getDisplayName.md)
      - `<BrowserOnly>`, `<ServerOnly>`, and `<Environment>`
+     - `<Locales>`
+     - `<Draggable>`, `<Droppable>`, `<Parallax>`, `<Pin>`
 
 
 ## License
diff --git a/package.json b/package.json
index c91d2f93..9e164498 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "libreact",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "React standard library",
   "main": "lib/index.js",
   "keywords": [
@@ -26,7 +26,8 @@
     "prop-types": "15",
     "throttle-debounce": "^1.0.1",
     "freestyler-context": "^1.3.3",
-    "freestyler-renderer": "^1.3.2"
+    "freestyler-renderer": "^1.3.2",
+    "screenfull": "^3.3.2"
   },
   "peerDependencies": {
     "react": "15",
diff --git a/src/FullScreen/index.ts b/src/FullScreen/index.ts
new file mode 100644
index 00000000..98edeb74
--- /dev/null
+++ b/src/FullScreen/index.ts
@@ -0,0 +1,62 @@
+import {Component} from 'react';
+import {h, noop} from '../util';
+import {enabled, request, exit, on, off} from 'screenfull';
+
+export interface IFullScreenProps {
+  children,
+  element?: HTMLVideoElement,
+  isOn: boolean,
+  onClose: () => void,
+}
+
+export interface IFullScreenState {
+
+}
+
+class FullScreen extends Component<IFullScreenProps, IFullScreenState> {
+  el: HTMLElement = null;
+
+  componentDidMount () {
+    on('change', this.onChange);
+  }
+
+  componentDidUpdate (props) {
+    if (!props.isOn && this.props.isOn) {
+      this.enter();
+    } else if (props.isOn && !this.props.isOn) {
+      this.leave();
+    }
+  }
+
+  componentWillUnmount () {
+    off('change', this.onChange);
+  }
+
+  enter () {
+    if (this.el && enabled) {
+      try {
+        request(this.el);
+      } catch {}
+    }
+  }
+
+  leave () {
+    try {
+      exit();
+    } catch {}
+  }
+
+  onChange = (isFullScreen) => {
+    if (!isFullScreen) {
+      (this.props.onClose || noop)();
+    }
+  };
+
+  render () {
+    const {children} = this.props;
+
+    return children;
+  }
+}
+
+export default FullScreen;

From b6cdf9dde6739aec15e7ba346111cad4916e8d04 Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Fri, 26 Jan 2018 22:15:27 +0000
Subject: [PATCH 19/78] feat: work no FullScreen component

---
 src/FullScreen/__story__/story.tsx | 36 ++++++++++++++++++++++++++++
 src/FullScreen/index.ts            | 38 +++++++++++++-----------------
 2 files changed, 53 insertions(+), 21 deletions(-)
 create mode 100644 src/FullScreen/__story__/story.tsx

diff --git a/src/FullScreen/__story__/story.tsx b/src/FullScreen/__story__/story.tsx
new file mode 100644
index 00000000..b892602b
--- /dev/null
+++ b/src/FullScreen/__story__/story.tsx
@@ -0,0 +1,36 @@
+import {Component, createElement as h} from 'react';
+import {storiesOf} from '@storybook/react';
+import {action} from '@storybook/addon-actions';
+import {linkTo} from '@storybook/addon-links';
+import {FullScreen} from '..';
+import ShowDocs from '../../../.storybook/ShowDocs'
+
+
+class StoryFullScreenBasicNative extends Component<any, any> {
+  el;
+
+  state = {
+    on: false
+  };
+
+  ref = (el) => {
+    this.el = el;
+  };
+
+  render () {
+    return (
+      <FullScreen el={this.el} on={this.state.on} onClose={() => this.setState({on: false})}>
+        <div ref={this.ref}>
+          Hello world
+          <br />
+          <button onClick={() => this.setState({on: !this.state.on})}>{this.state.on ? 'Leave' : 'Enter'}</button>
+        </div>
+      </FullScreen>
+    );
+  }
+}
+
+
+storiesOf('Other/FullScreen', module)
+  .add('Documentation', () => h(ShowDocs, {name: 'FullScreen'}))
+  .add('Example', () => <StoryFullScreenBasicNative />);
diff --git a/src/FullScreen/index.ts b/src/FullScreen/index.ts
index 98edeb74..97a0b10d 100644
--- a/src/FullScreen/index.ts
+++ b/src/FullScreen/index.ts
@@ -1,55 +1,53 @@
 import {Component} from 'react';
 import {h, noop} from '../util';
-import {enabled, request, exit, on, off} from 'screenfull';
+const screenfull = require('screenfull');
 
 export interface IFullScreenProps {
-  children,
-  element?: HTMLVideoElement,
-  isOn: boolean,
-  onClose: () => void,
+  children?,
+  el: HTMLVideoElement,
+  on?: boolean,
+  onClose?: () => void,
 }
 
 export interface IFullScreenState {
 
 }
 
-class FullScreen extends Component<IFullScreenProps, IFullScreenState> {
-  el: HTMLElement = null;
-
+export class FullScreen extends Component<IFullScreenProps, IFullScreenState> {
   componentDidMount () {
-    on('change', this.onChange);
+    screenfull.on('change', this.onChange);
   }
 
   componentDidUpdate (props) {
-    if (!props.isOn && this.props.isOn) {
+    if (!props.on && this.props.on) {
       this.enter();
-    } else if (props.isOn && !this.props.isOn) {
+    } else if (props.on && !this.props.on) {
       this.leave();
     }
   }
 
   componentWillUnmount () {
-    off('change', this.onChange);
+    screenfull.off('change', this.onChange);
   }
 
   enter () {
-    if (this.el && enabled) {
+    if (this.props.el && screenfull.enabled) {
       try {
-        request(this.el);
+        screenfull.request(this.props.el);
       } catch {}
     }
   }
 
   leave () {
     try {
-      exit();
+      screenfull.exit();
     } catch {}
   }
 
-  onChange = (isFullScreen) => {
-    if (!isFullScreen) {
-      (this.props.onClose || noop)();
-    }
+  onChange = () => {
+    const isFullScreen = screenfull.element === this.props.el;
+
+    console.log('IS FS', isFullScreen);
   };
 
   render () {
@@ -58,5 +56,3 @@ class FullScreen extends Component<IFullScreenProps, IFullScreenState> {
     return children;
   }
 }
-
-export default FullScreen;

From 067ceb78de1b54ff2601237295206fbf73d7698c Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Fri, 26 Jan 2018 23:40:14 +0000
Subject: [PATCH 20/78] refactor: change interface of <FullScreen>

---
 src/FullScreen/FullScreenElement.ts | 60 +++++++++++++++++++++++++++++
 src/FullScreen/__story__/story.tsx  |  8 +---
 src/FullScreen/index.ts             | 41 ++++++++++++++------
 src/invert.story.tsx                |  3 +-
 src/invert.ts                       | 29 ++++++++------
 5 files changed, 111 insertions(+), 30 deletions(-)
 create mode 100644 src/FullScreen/FullScreenElement.ts

diff --git a/src/FullScreen/FullScreenElement.ts b/src/FullScreen/FullScreenElement.ts
new file mode 100644
index 00000000..527039c7
--- /dev/null
+++ b/src/FullScreen/FullScreenElement.ts
@@ -0,0 +1,60 @@
+import {Component} from 'react';
+import {h, noop} from '../util';
+const screenfull = require('screenfull');
+
+export interface IFullScreenProps {
+  children?,
+  el: HTMLVideoElement,
+  on?: boolean,
+  onClose?: () => void,
+}
+
+export interface IFullScreenState {
+
+}
+
+export class FullScreen extends Component<IFullScreenProps, IFullScreenState> {
+  componentDidMount () {
+    screenfull.on('change', this.onChange);
+  }
+
+  componentDidUpdate (props) {
+    if (!props.on && this.props.on) {
+      this.enter();
+    } else if (props.on && !this.props.on) {
+      this.leave();
+    }
+  }
+
+  componentWillUnmount () {
+    screenfull.off('change', this.onChange);
+  }
+
+  enter () {
+    if (this.props.el && screenfull.enabled) {
+      try {
+        screenfull.request(this.props.el);
+      } catch {}
+    }
+  }
+
+  leave () {
+    try {
+      screenfull.exit();
+    } catch {}
+  }
+
+  onChange = () => {
+    const isFullScreen = screenfull.element === this.props.el;
+
+    if (!isFullScreen) {
+      (this.props.onClose || noop)();
+    }
+  };
+
+  render () {
+    const {children} = this.props;
+
+    return children;
+  }
+}
diff --git a/src/FullScreen/__story__/story.tsx b/src/FullScreen/__story__/story.tsx
index b892602b..1e1dc9ab 100644
--- a/src/FullScreen/__story__/story.tsx
+++ b/src/FullScreen/__story__/story.tsx
@@ -13,14 +13,10 @@ class StoryFullScreenBasicNative extends Component<any, any> {
     on: false
   };
 
-  ref = (el) => {
-    this.el = el;
-  };
-
   render () {
     return (
-      <FullScreen el={this.el} on={this.state.on} onClose={() => this.setState({on: false})}>
-        <div ref={this.ref}>
+      <FullScreen on={this.state.on} onClose={() => this.setState({on: false})}>
+        <div>
           Hello world
           <br />
           <button onClick={() => this.setState({on: !this.state.on})}>{this.state.on ? 'Leave' : 'Enter'}</button>
diff --git a/src/FullScreen/index.ts b/src/FullScreen/index.ts
index 97a0b10d..1d2f3dc5 100644
--- a/src/FullScreen/index.ts
+++ b/src/FullScreen/index.ts
@@ -1,12 +1,14 @@
-import {Component} from 'react';
+import {Component, Children} from 'react';
 import {h, noop} from '../util';
 const screenfull = require('screenfull');
 
 export interface IFullScreenProps {
-  children?,
-  el: HTMLVideoElement,
-  on?: boolean,
-  onClose?: () => void,
+  children?;
+  video?: HTMLVideoElement;
+  innerRef?: (el) => void;
+  on?: boolean;
+  onClose?: () => void;
+  tag?: keyof React.ReactHTML;
 }
 
 export interface IFullScreenState {
@@ -14,6 +16,19 @@ export interface IFullScreenState {
 }
 
 export class FullScreen extends Component<IFullScreenProps, IFullScreenState> {
+  static defaultProps = {
+    onClose: noop,
+    innerRef: noop,
+    tag: 'div'
+  };
+
+  el: HTMLElement = null;
+
+  ref = (el) => {
+    this.el = el;
+    this.props.innerRef(el);
+  };
+
   componentDidMount () {
     screenfull.on('change', this.onChange);
   }
@@ -31,9 +46,9 @@ export class FullScreen extends Component<IFullScreenProps, IFullScreenState> {
   }
 
   enter () {
-    if (this.props.el && screenfull.enabled) {
+    if (this.el && screenfull.enabled) {
       try {
-        screenfull.request(this.props.el);
+        screenfull.request(this.el);
       } catch {}
     }
   }
@@ -45,14 +60,18 @@ export class FullScreen extends Component<IFullScreenProps, IFullScreenState> {
   }
 
   onChange = () => {
-    const isFullScreen = screenfull.element === this.props.el;
+    const isFullScreen = screenfull.element === this.el;
 
-    console.log('IS FS', isFullScreen);
+    if (!isFullScreen) {
+      (this.props.onClose || noop)();
+    }
   };
 
   render () {
-    const {children} = this.props;
+    const {video, innerRef, on, onClose, tag, children, ...rest} = this.props;
+
+    (rest as any).ref = this.ref;
 
-    return children;
+    return h(tag, rest, ...Children.toArray(children));
   }
 }
diff --git a/src/invert.story.tsx b/src/invert.story.tsx
index 8f5a99c8..4e493e29 100644
--- a/src/invert.story.tsx
+++ b/src/invert.story.tsx
@@ -2,13 +2,14 @@ import {Component, createElement as h} from 'react';
 import {storiesOf} from '@storybook/react';
 import {action} from '@storybook/addon-actions';
 import {linkTo} from '@storybook/addon-links';
-import {invert} from './invert';
+import {invert, Inverted} from './invert';
 
 const Audio = invert('audio');
 import ShowDocs from '../.storybook/ShowDocs'
 
 storiesOf('Dummies/invert()', module)
   .add('Documentation', () => h(ShowDocs, {name: 'invert'}))
+  .add('<div>', () => h(Inverted, {tag: 'div'}, 'Hello world'))
   .add('<audio>', () =>
     <Audio
       src='https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3'
diff --git a/src/invert.ts b/src/invert.ts
index 035cc6c4..0e84efad 100644
--- a/src/invert.ts
+++ b/src/invert.ts
@@ -1,21 +1,24 @@
 import {Component} from 'react';
 import {h, noop} from './util';
+import renderProp from './util/renderProp';
 
-export interface IInvertedProps {
-  children?: (...args) => React.ReactElement<any>;
-  onMounted: (el: HTMLElement, comp: React.Component<any>) => void;
+export interface IInvertedProps extends React.AllHTMLAttributes<any> {
+  children?: React.ReactElement<any> | ((comp) => React.ReactElement<any>);
+  render?: React.ReactElement<any> | ((comp) => React.ReactElement<any>);
+  onMount: (el: HTMLElement, comp: React.Component<any>) => void;
   onUnmount: (comp: React.Component<any>) => void;
-  render: (element: React.ReactElement<any>, comp: React.Component<any>) => React.ReactElement<any>;
+  wrapper: (element: React.ReactElement<any>, comp: React.Component<any>) => React.ReactElement<any>;
+  tag?: keyof React.ReactHTML;
 }
 
-export type TInvert = (tag: string) => React.ComponentClass<any>;
+export type TInvert = (tag?: keyof React.ReactHTML) => React.ComponentClass<any>;
 
-const defaultRenderProp = (element) => element;
+const defaultWrapper = (element) => element;
 
-export const invert: TInvert = (tag: keyof React.ReactHTML) => {
+export const invert: TInvert = (tag?: keyof React.ReactHTML) => {
   const Inverted = class Inverted extends Component<IInvertedProps, any> {
     static defaultProps = {
-      render: defaultRenderProp
+      wrapper: defaultWrapper
     };
 
     el: HTMLElement = null;
@@ -25,7 +28,7 @@ export const invert: TInvert = (tag: keyof React.ReactHTML) => {
     };
 
     componentDidMount () {
-      (this.props.onMounted || noop)(this.el, this);
+      (this.props.onMount || noop)(this.el, this);
       this.forceUpdate();
     }
 
@@ -43,7 +46,7 @@ export const invert: TInvert = (tag: keyof React.ReactHTML) => {
 
     render () {
       const {event} = this;
-      const {children, render, ...rest} = this.props;
+      const {children, render, wrapper, tag: tagProp, onMount, onUnmount, ...rest} = this.props;
       const props = {
         ref: this.ref
       };
@@ -58,11 +61,13 @@ export const invert: TInvert = (tag: keyof React.ReactHTML) => {
         }
       }
 
-      const element = h(tag, props, typeof children === 'function' ? children(this) : children);
+      const element = h(tagProp || tag, props, renderProp(this.props, this));
 
-      return render(element, this);
+      return wrapper(element, this);
     }
   }
 
   return Inverted;
 };
+
+export const Inverted = invert();

From 5160fb9036ed4452da5a009f82a33762394b3ede Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sat, 27 Jan 2018 00:06:22 +0000
Subject: [PATCH 21/78] feat: add webkitEnterFullscreen to <FullScreen>

---
 src/FullScreen/FullScreenElement.ts | 60 -----------------------------
 src/FullScreen/__story__/story.tsx  | 35 ++++++++++++++---
 src/FullScreen/index.ts             | 41 ++++++++++++++++----
 src/Video/__story__/story.tsx       |  2 +-
 4 files changed, 64 insertions(+), 74 deletions(-)
 delete mode 100644 src/FullScreen/FullScreenElement.ts

diff --git a/src/FullScreen/FullScreenElement.ts b/src/FullScreen/FullScreenElement.ts
deleted file mode 100644
index 527039c7..00000000
--- a/src/FullScreen/FullScreenElement.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import {Component} from 'react';
-import {h, noop} from '../util';
-const screenfull = require('screenfull');
-
-export interface IFullScreenProps {
-  children?,
-  el: HTMLVideoElement,
-  on?: boolean,
-  onClose?: () => void,
-}
-
-export interface IFullScreenState {
-
-}
-
-export class FullScreen extends Component<IFullScreenProps, IFullScreenState> {
-  componentDidMount () {
-    screenfull.on('change', this.onChange);
-  }
-
-  componentDidUpdate (props) {
-    if (!props.on && this.props.on) {
-      this.enter();
-    } else if (props.on && !this.props.on) {
-      this.leave();
-    }
-  }
-
-  componentWillUnmount () {
-    screenfull.off('change', this.onChange);
-  }
-
-  enter () {
-    if (this.props.el && screenfull.enabled) {
-      try {
-        screenfull.request(this.props.el);
-      } catch {}
-    }
-  }
-
-  leave () {
-    try {
-      screenfull.exit();
-    } catch {}
-  }
-
-  onChange = () => {
-    const isFullScreen = screenfull.element === this.props.el;
-
-    if (!isFullScreen) {
-      (this.props.onClose || noop)();
-    }
-  };
-
-  render () {
-    const {children} = this.props;
-
-    return children;
-  }
-}
diff --git a/src/FullScreen/__story__/story.tsx b/src/FullScreen/__story__/story.tsx
index 1e1dc9ab..0f665992 100644
--- a/src/FullScreen/__story__/story.tsx
+++ b/src/FullScreen/__story__/story.tsx
@@ -4,6 +4,7 @@ import {action} from '@storybook/addon-actions';
 import {linkTo} from '@storybook/addon-links';
 import {FullScreen} from '..';
 import ShowDocs from '../../../.storybook/ShowDocs'
+import {invert} from '../../invert';
 
 
 class StoryFullScreenBasicNative extends Component<any, any> {
@@ -16,11 +17,32 @@ class StoryFullScreenBasicNative extends Component<any, any> {
   render () {
     return (
       <FullScreen on={this.state.on} onClose={() => this.setState({on: false})}>
-        <div>
-          Hello world
-          <br />
-          <button onClick={() => this.setState({on: !this.state.on})}>{this.state.on ? 'Leave' : 'Enter'}</button>
-        </div>
+        Hello world
+        <br />
+        <button onClick={() => this.setState({on: !this.state.on})}>{this.state.on ? 'Leave' : 'Enter'}</button>
+      </FullScreen>
+    );
+  }
+}
+
+const Video = invert('video');
+
+class StoryFullScreenVideo extends Component<any, any> {
+  state = {
+    on: false,
+    video: null
+  };
+
+  onMount = (video) => {
+    this.setState({video});
+  };
+
+  render () {
+    return (
+      <FullScreen on={this.state.on} video={this.state.video} onClose={() => this.setState({on: false})}>
+        <Video autoPlay src='http://dailym.ai/2rG7TBS' onMount={this.onMount} />
+        <br />
+        <button onClick={() => this.setState({on: !this.state.on})}>{this.state.on ? 'Leave' : 'Enter'}</button>
       </FullScreen>
     );
   }
@@ -29,4 +51,5 @@ class StoryFullScreenBasicNative extends Component<any, any> {
 
 storiesOf('Other/FullScreen', module)
   .add('Documentation', () => h(ShowDocs, {name: 'FullScreen'}))
-  .add('Example', () => <StoryFullScreenBasicNative />);
+  .add('Example', () => <StoryFullScreenBasicNative />)
+  .add('.webkitEnterFullscreen()', () => <StoryFullScreenVideo />);
diff --git a/src/FullScreen/index.ts b/src/FullScreen/index.ts
index 1d2f3dc5..be4433e6 100644
--- a/src/FullScreen/index.ts
+++ b/src/FullScreen/index.ts
@@ -23,6 +23,7 @@ export class FullScreen extends Component<IFullScreenProps, IFullScreenState> {
   };
 
   el: HTMLElement = null;
+  mounted: boolean = false;
 
   ref = (el) => {
     this.el = el;
@@ -30,6 +31,7 @@ export class FullScreen extends Component<IFullScreenProps, IFullScreenState> {
   };
 
   componentDidMount () {
+    this.mounted = true;
     screenfull.on('change', this.onChange);
   }
 
@@ -42,21 +44,46 @@ export class FullScreen extends Component<IFullScreenProps, IFullScreenState> {
   }
 
   componentWillUnmount () {
+    this.mounted = false;
     screenfull.off('change', this.onChange);
   }
 
   enter () {
-    if (this.el && screenfull.enabled) {
-      try {
-        screenfull.request(this.el);
-      } catch {}
+    if (this.el) {
+      if (screenfull.enabled) {
+        try {
+          screenfull.request(this.el);
+        } catch {}
+      } else {
+        const {video} = this.props;
+
+        if (video && video.webkitEnterFullscreen) {
+          const onWebkitEndFullscreen = () => {
+            video.removeEventListener('webkitendfullscreen', onWebkitEndFullscreen);
+            if (this.mounted) {
+              this.props.onClose();
+            }
+          };
+
+          video.webkitEnterFullscreen();
+          video.addEventListener('webkitendfullscreen', onWebkitEndFullscreen);
+        }
+      }
     }
   }
 
   leave () {
-    try {
-      screenfull.exit();
-    } catch {}
+    if (screenfull.enabled) {
+      try {
+        screenfull.exit();
+      } catch {}
+    } else {
+      const {video} = this.props;
+
+      if (video && video.webkitExitFullscreen) {
+        video.webkitExitFullscreen();
+      }
+    }
   }
 
   onChange = () => {
diff --git a/src/Video/__story__/story.tsx b/src/Video/__story__/story.tsx
index d625af22..f27f61c8 100644
--- a/src/Video/__story__/story.tsx
+++ b/src/Video/__story__/story.tsx
@@ -37,7 +37,7 @@ storiesOf('Generators/Video', module)
       }
     />
   )
-  .add('All bontrol buttons', () =>
+  .add('All control buttons', () =>
     <Video
       src={src}
       style={{

From 347bd5b7016ffdef5ddcd47026378561a52b042a Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sat, 27 Jan 2018 00:14:25 +0000
Subject: [PATCH 22/78] docs: add <FullScreen> docs

---
 README.md          |  2 +-
 docs/FullScreen.md | 37 +++++++++++++++++++++++++++++++++++++
 2 files changed, 38 insertions(+), 1 deletion(-)
 create mode 100644 docs/FullScreen.md

diff --git a/README.md b/README.md
index 3d98ca32..899bd349 100644
--- a/README.md
+++ b/README.md
@@ -55,7 +55,7 @@ const MyComponent = mock();
      - [`<LocalStorage>`](./docs/LocalStorage.md), `<SessionStorage>`, `<IndexedDb>`
      - [`<Speak>`](./docs/Speak.md), [`<Vibrate>`](./docs/Vibrate.md), [`<Alert>`](./docs/Alert.md), `<Prompt>`, `<Confirm>`
      - [`go()`](./docs/route.md#go), `<Redirect>`, `<Link>`, `<Sms>`, `<Email>`, and `<Tel>`
-     - `<Overlay>`, `<FullScreen>`
+     - [`<FullScreen>`](./docs/FullScreen.md), `<Overlay>`
   - Promises
      - [`<Resolve>`](./docs/Resolve.md), `<Fetch>`
   - Context
diff --git a/docs/FullScreen.md b/docs/FullScreen.md
new file mode 100644
index 00000000..2b61d516
--- /dev/null
+++ b/docs/FullScreen.md
@@ -0,0 +1,37 @@
+# `<FullScreen>`
+
+Displays child elements full-screen.
+
+## Usage
+
+```jsx
+import {FullScreen} from 'libreact/lib/FullScreen';
+
+<FullScreen on={on}>
+  Hello world!
+</FullScreen>
+```
+
+## Props
+
+Props have the following signature
+
+```ts
+interface IFullScreenProps {
+  on: boolean;
+  video?: HTMLVideoElement;
+  innerRef?: (el) => void;
+  onClose?: () => void;
+  tag?: keyof React.ReactHTML;
+}
+```
+
+, where
+
+  - `on` - required, boolean, whether to display element in full screen or inline.
+  - `video` - optional, DOM video element to try to display that video in full screen using alternative `.webkitEnterFullscreen()`
+  available only on `HTMLVideoElement`. That way video element will get displayed full screen. Only used when regular full screen
+  API is not available.
+  - `innerRef` - optional, callback that receives the root element reference.
+  - `onClose` - optional, callback, called when full screen is exited.
+  - `tag` - optional, string, specifying tag name to use for root element, defaults to `div`.

From 6eb3618b65f5453157e81b5efe9374a5e26f5081 Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sat, 27 Jan 2018 00:32:57 +0000
Subject: [PATCH 23/78] docs: add <Inverted> reference

---
 README.md            |  2 +-
 docs/invert.md       | 30 ++++++++++++++++++++++++------
 src/invert.story.tsx | 34 +++++++++++++++++++++++++++++++---
 src/invert.ts        |  8 ++++----
 4 files changed, 60 insertions(+), 14 deletions(-)

diff --git a/README.md b/README.md
index 899bd349..164e1ff4 100644
--- a/README.md
+++ b/README.md
@@ -31,7 +31,7 @@ const MyComponent = mock();
   - Basics
      - [`mock()`](./docs/mock.md) and [`loadable()`](./docs/loadable.md)
      - [`lazy()`](./docs/lazy.md), [`delayed()`](./docs/delayed.md), and `viewport()`
-     - [`invert()`](./docs/invert.md), `<State>`
+     - [`invert()`](./docs/invert.md), [`<Inverted>`](./docs/invert.md#inverted), `<State>`
   - Sensors
      - [`<BatterySensor>`](./docs/BatterySensor.md), [`withBattery()`](./docs/BatterySensor.md#withbattery), and [`@withBattery`](./docs/BatterySensor.md#withbattery-1)
      - [`<MediaDeviceSensor>`](./docs/MediaDeviceSensor.md), [`withMediaDevices()`](./docs/MediaDeviceSensor.md#withmediadevices), and [`@withMediaDevices`](./docs/MediaDeviceSensor.md#withmediadevices-1)
diff --git a/docs/invert.md b/docs/invert.md
index 8bfd5e8d..23a3bb96 100644
--- a/docs/invert.md
+++ b/docs/invert.md
@@ -1,7 +1,7 @@
 # `invert()`
 
 A utility function that inverts DOM element by creating a FaCC out of it. Allows you to easily
-create stateless DOM compnents with reference to a DOM element and invertd control flow.
+create stateless DOM components with reference to a DOM element and inverted control flow.
 
 ## Usage
 
@@ -14,10 +14,10 @@ const Video = invert('video');
 // etc...
 
 <Div
-  onClick={(event, comp) => {
-
-  }}
-  render={(div, comp) => div}
+  onMount={(div, comp) => console.log('MOUNTED', div, comp)}
+  onUnmount={(div, comp) => console.log('UNMOUNTED', div, comp)}
+  onClick={(event, div, comp) => {}}
+  wrapper={(jsx, comp) => <b>jsx</b>}
 >{(comp) =>
 
 }</Div>
@@ -27,7 +27,7 @@ const Video = invert('video');
 ## Reference
 
 ```tsx
-invert: (tag: string) => React.ComponentClass;
+invert: (tag?: string) => React.ComponentClass;
 ```
 
 , where
@@ -48,6 +48,24 @@ Children of the created component can be a function that recieves a React compon
 The created react component instance has `.el` property which is a reference to the DOM element.
 
 
+## `<Inverted>`
+
+The default inverted element create for your convenience
+
+```js
+const Inverted = invert('div');
+```
+
+Although, by default, it is created as `<div>` element, it does not have to be a `<div>`. You can overwrite
+tag name when you use it
+
+```jsx
+<Inverted tag='span' onMount={() => console.log('<span> mounted')}>
+  Hello world!
+<Inverted>
+```
+
+
 ## Example
 
 ```jsx
diff --git a/src/invert.story.tsx b/src/invert.story.tsx
index 4e493e29..54aebbf9 100644
--- a/src/invert.story.tsx
+++ b/src/invert.story.tsx
@@ -3,18 +3,46 @@ import {storiesOf} from '@storybook/react';
 import {action} from '@storybook/addon-actions';
 import {linkTo} from '@storybook/addon-links';
 import {invert, Inverted} from './invert';
+import ShowDocs from '../.storybook/ShowDocs'
 
 const Audio = invert('audio');
-import ShowDocs from '../.storybook/ShowDocs'
+
+class StoryInvertedUnmount extends Component<any, any> {
+  state = {
+    show: true
+  };
+
+  componentDidMount () {
+    setTimeout(() => {
+      this.setState({
+        show: false
+      });
+    }, 1000);
+  }
+
+  render () {
+    return h('div', {},
+      this.state.show ?
+        h(Inverted, {
+          tag: 'div',
+          wrapper: (jsx, comp) => <b>jsx</b>,
+          onMount: (div) => console.log('MOUNTED', div),
+          onUnmount: (div) => console.log('UNMOUNTED', div)
+        }, 'Hello world') :
+        null
+    );
+  }
+}
+
 
 storiesOf('Dummies/invert()', module)
   .add('Documentation', () => h(ShowDocs, {name: 'invert'}))
-  .add('<div>', () => h(Inverted, {tag: 'div'}, 'Hello world'))
+  .add('<div>', () => h(StoryInvertedUnmount))
   .add('<audio>', () =>
     <Audio
       src='https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3'
       onTimeUpdate={() => {}}
-      render={(element, comp) =>
+      wrapper={(element, comp) =>
         <div>
           {element}
           <button onClick={() => comp.el.play()}>Play</button>
diff --git a/src/invert.ts b/src/invert.ts
index 0e84efad..fd3b01de 100644
--- a/src/invert.ts
+++ b/src/invert.ts
@@ -6,7 +6,7 @@ export interface IInvertedProps extends React.AllHTMLAttributes<any> {
   children?: React.ReactElement<any> | ((comp) => React.ReactElement<any>);
   render?: React.ReactElement<any> | ((comp) => React.ReactElement<any>);
   onMount: (el: HTMLElement, comp: React.Component<any>) => void;
-  onUnmount: (comp: React.Component<any>) => void;
+  onUnmount: (el: HTMLElement, comp: React.Component<any>) => void;
   wrapper: (element: React.ReactElement<any>, comp: React.Component<any>) => React.ReactElement<any>;
   tag?: keyof React.ReactHTML;
 }
@@ -32,14 +32,14 @@ export const invert: TInvert = (tag?: keyof React.ReactHTML) => {
       this.forceUpdate();
     }
 
-    compnentWillUnmount () {
+    componentWillUnmount () {
+      (this.props.onUnmount || noop)(this.el, this);
       this.el = null;
-      (this.props.onUnmount || noop)(this);
     }
 
     event (name: string, handler: (...args) => void) {
       return (event) => {
-        handler(event, this);
+        handler(event, this.el, this);
         this.forceUpdate();
       };
     }

From 5e23c49733acaec74372306806c2530dd1bbf83e Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sat, 27 Jan 2018 00:41:10 +0000
Subject: [PATCH 24/78] feat: add <Sms> component

---
 src/Sms/__tests__/index.test.ts |  0
 src/Sms/index.ts                | 15 +++++++++++++++
 2 files changed, 15 insertions(+)
 create mode 100644 src/Sms/__tests__/index.test.ts
 create mode 100644 src/Sms/index.ts

diff --git a/src/Sms/__tests__/index.test.ts b/src/Sms/__tests__/index.test.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/Sms/index.ts b/src/Sms/index.ts
new file mode 100644
index 00000000..efa054cf
--- /dev/null
+++ b/src/Sms/index.ts
@@ -0,0 +1,15 @@
+// Original: https://github.com/jaredpalmer/react-fns/blob/master/src/Sms.tsx
+import {h} from '../util';
+import {stringify} from 'qs';
+
+export interface ISmsProps extends React.HTMLAttributes<HTMLAnchorElement> {
+  phone: string;
+  body?: string;
+}
+
+export const Sms: React.StatelessComponent<ISmsProps> = ({phone, body, children, ...props}) => {
+  return h('a', {
+    href: `sms:${phone}?${stringify({body})}`,
+    ...props
+  }, children);
+};

From 63f30f1eb9ad896e30ee908573afca40dcb472f4 Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sat, 27 Jan 2018 00:49:23 +0000
Subject: [PATCH 25/78] test: add <Sms> tests

---
 .../__snapshots__/index.test.ts.snap          |  7 +++++
 src/Sms/__tests__/index.test-server.ts        | 15 +++++++++++
 src/Sms/__tests__/index.test.ts               | 26 +++++++++++++++++++
 src/Sms/index.ts                              |  5 ++--
 4 files changed, 51 insertions(+), 2 deletions(-)
 create mode 100644 src/Sms/__tests__/__snapshots__/index.test.ts.snap
 create mode 100644 src/Sms/__tests__/index.test-server.ts

diff --git a/src/Sms/__tests__/__snapshots__/index.test.ts.snap b/src/Sms/__tests__/__snapshots__/index.test.ts.snap
new file mode 100644
index 00000000..ecdaaf19
--- /dev/null
+++ b/src/Sms/__tests__/__snapshots__/index.test.ts.snap
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Sms> renders as expected  1`] = `"<a href=\\"sms:123?body=Hello%20world\\"></a>"`;
+
+exports[`<Sms> renders as expected 1`] = `"<a href=\\"sms:123?\\"></a>"`;
+
+exports[`<Sms> renders as expected without body 1`] = `"<a href=\\"sms:123?\\"></a>"`;
diff --git a/src/Sms/__tests__/index.test-server.ts b/src/Sms/__tests__/index.test-server.ts
new file mode 100644
index 00000000..c7eee675
--- /dev/null
+++ b/src/Sms/__tests__/index.test-server.ts
@@ -0,0 +1,15 @@
+import {createElement as h} from 'react';
+import {renderToStaticMarkup} from 'react-dom/server';
+import {expect} from 'chai';
+import {Sms} from '..';
+
+describe('<Sms> SSR', () => {
+  it('renders without crashing as expected', () => {
+    const html = renderToStaticMarkup(h(Sms, {
+      phone: '123',
+      body: 'foobar'
+    }));
+
+    expect(html).to.equal('<a href="sms:123?body=foobar"></a>');
+  });
+});
diff --git a/src/Sms/__tests__/index.test.ts b/src/Sms/__tests__/index.test.ts
index e69de29b..16b26112 100644
--- a/src/Sms/__tests__/index.test.ts
+++ b/src/Sms/__tests__/index.test.ts
@@ -0,0 +1,26 @@
+import {mount} from 'enzyme';
+import {h} from '../../util';
+import {Sms} from '..';
+
+describe('<Sms>', () => {
+  it('is a component', () => {
+    expect(Sms).toBeInstanceOf(Function);
+  });
+
+  it('renders as expected without body', () => {
+    const wrapper = mount(h(Sms, {
+      phone: '123'
+    }));
+
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it('renders as expected ', () => {
+    const wrapper = mount(h(Sms, {
+      phone: '123',
+      body: 'Hello world'
+    }));
+
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});
diff --git a/src/Sms/index.ts b/src/Sms/index.ts
index efa054cf..1419f75c 100644
--- a/src/Sms/index.ts
+++ b/src/Sms/index.ts
@@ -2,12 +2,13 @@
 import {h} from '../util';
 import {stringify} from 'qs';
 
-export interface ISmsProps extends React.HTMLAttributes<HTMLAnchorElement> {
+export interface ISmsProps {
+  children?;
   phone: string;
   body?: string;
 }
 
-export const Sms: React.StatelessComponent<ISmsProps> = ({phone, body, children, ...props}) => {
+export const Sms: React.StatelessComponent<ISmsProps> = ({phone, body, children, ...props}: ISmsProps) => {
   return h('a', {
     href: `sms:${phone}?${stringify({body})}`,
     ...props

From 215cea2a252d597cdb92550ba27c5efe938bf40d Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sat, 27 Jan 2018 00:52:59 +0000
Subject: [PATCH 26/78] docs: add <Sms> reference

---
 README.md        |  2 +-
 docs/Sms.md      | 25 +++++++++++++++++++++++++
 src/Sms/index.ts |  2 +-
 3 files changed, 27 insertions(+), 2 deletions(-)
 create mode 100644 docs/Sms.md

diff --git a/README.md b/README.md
index 164e1ff4..4dd36a88 100644
--- a/README.md
+++ b/README.md
@@ -54,7 +54,7 @@ const MyComponent = mock();
      - [`<Audio>`](./docs/Audio.md), [`<Video>`](./docs/Video.md), and `<Media>`
      - [`<LocalStorage>`](./docs/LocalStorage.md), `<SessionStorage>`, `<IndexedDb>`
      - [`<Speak>`](./docs/Speak.md), [`<Vibrate>`](./docs/Vibrate.md), [`<Alert>`](./docs/Alert.md), `<Prompt>`, `<Confirm>`
-     - [`go()`](./docs/route.md#go), `<Redirect>`, `<Link>`, `<Sms>`, `<Email>`, and `<Tel>`
+     - [`go()`](./docs/route.md#go), `<Redirect>`, `<Link>`, [`<Sms>`](./docs/Sms.md), `<Email>`, and `<Tel>`
      - [`<FullScreen>`](./docs/FullScreen.md), `<Overlay>`
   - Promises
      - [`<Resolve>`](./docs/Resolve.md), `<Fetch>`
diff --git a/docs/Sms.md b/docs/Sms.md
new file mode 100644
index 00000000..0bc11e23
--- /dev/null
+++ b/docs/Sms.md
@@ -0,0 +1,25 @@
+# `<Sms>`
+
+Creates `<a>` element with `href` attribute formatted according to SMS protocol.
+
+## Usage
+
+```jsx
+import {Sms} from 'libreact/lib/Sms';
+
+<Sms phone='123' body='hello' />
+```
+
+### Props
+
+```ts
+interface ISmsProps {
+  phone: string;
+  body?: string;
+}
+```
+
+, where
+
+  - `phone` - required, string, phone number.
+  - `body` - optional, string, SMS text body.
diff --git a/src/Sms/index.ts b/src/Sms/index.ts
index 1419f75c..9ef1ab82 100644
--- a/src/Sms/index.ts
+++ b/src/Sms/index.ts
@@ -2,7 +2,7 @@
 import {h} from '../util';
 import {stringify} from 'qs';
 
-export interface ISmsProps {
+export interface ISmsProps extends React.HTMLAttributes<HTMLAnchorElement> {
   children?;
   phone: string;
   body?: string;

From 40c1cb5fde8bd8699b3963b99c7d0f9795215918 Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sat, 27 Jan 2018 00:57:24 +0000
Subject: [PATCH 27/78] feat: add <Mailto> component

---
 src/Mailto/index.ts | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 src/Mailto/index.ts

diff --git a/src/Mailto/index.ts b/src/Mailto/index.ts
new file mode 100644
index 00000000..036a90a2
--- /dev/null
+++ b/src/Mailto/index.ts
@@ -0,0 +1,32 @@
+// Original: https://github.com/jaredpalmer/react-fns/blob/master/src/Mailto.tsx
+import {h} from '../util';
+import {stringify} from 'qs';
+
+export interface IMailtoProps extends React.HTMLAttributes<HTMLAnchorElement> {
+  email: string;
+  subject?: string;
+  cc?: string[];
+  bcc?: string[];
+  body?: string;
+}
+
+export const Mailto: React.StatelessComponent<IMailtoProps> = ({
+  email,
+  subject = '',
+  cc,
+  bcc,
+  body = '',
+  children,
+  ...props,
+}) => {
+  const query = stringify({
+    subject,
+    cc: cc && cc.join(', '),
+    bcc: bcc && bcc.join(', '),
+    body
+  });
+
+  return h('a', {
+    href: `mailto:${email}?${query}`
+  });
+};

From 036d1723e22f6caa0a0bd6e87641104ba9096e13 Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sat, 27 Jan 2018 01:05:38 +0000
Subject: [PATCH 28/78] test: add <Mailto> tests

---
 src/Mailto/__story__/story.tsx                | 11 +++++++
 .../__snapshots__/index.test.ts.snap          |  5 ++++
 src/Mailto/__tests__/index.test-server.ts     | 15 ++++++++++
 src/Mailto/__tests__/index.test.ts            | 29 +++++++++++++++++++
 src/Mailto/index.ts                           |  6 ++--
 5 files changed, 63 insertions(+), 3 deletions(-)
 create mode 100644 src/Mailto/__story__/story.tsx
 create mode 100644 src/Mailto/__tests__/__snapshots__/index.test.ts.snap
 create mode 100644 src/Mailto/__tests__/index.test-server.ts
 create mode 100644 src/Mailto/__tests__/index.test.ts

diff --git a/src/Mailto/__story__/story.tsx b/src/Mailto/__story__/story.tsx
new file mode 100644
index 00000000..efdf88ae
--- /dev/null
+++ b/src/Mailto/__story__/story.tsx
@@ -0,0 +1,11 @@
+import {Component, createElement as h} from 'react';
+import {storiesOf} from '@storybook/react';
+import {action} from '@storybook/addon-actions';
+import {linkTo} from '@storybook/addon-links';
+import {Mailto} from '..';
+import ShowDocs from '../../../.storybook/ShowDocs'
+import {invert} from '../../invert';
+
+storiesOf('Other/Mailto', module)
+  .add('Documentation', () => h(ShowDocs, {name: 'Mailto'}))
+  .add('Example', () => <Mailto email='foo@bar.baz'>Click me!</Mailto>);
diff --git a/src/Mailto/__tests__/__snapshots__/index.test.ts.snap b/src/Mailto/__tests__/__snapshots__/index.test.ts.snap
new file mode 100644
index 00000000..8b2235f6
--- /dev/null
+++ b/src/Mailto/__tests__/__snapshots__/index.test.ts.snap
@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Mailto> renders as expected  1`] = `"<a href=\\"mailto:foo@bar.baz?subject=Hello%20world&amp;cc=foo.cc%40bar.baz&amp;bcc=foo.bcc%40bar.baz&amp;body=Hello%20world%21\\"></a>"`;
+
+exports[`<Mailto> renders as expected with just e-mail 1`] = `"<a href=\\"mailto:foo@bar.baz?subject=&amp;body=\\"></a>"`;
diff --git a/src/Mailto/__tests__/index.test-server.ts b/src/Mailto/__tests__/index.test-server.ts
new file mode 100644
index 00000000..ee6943ef
--- /dev/null
+++ b/src/Mailto/__tests__/index.test-server.ts
@@ -0,0 +1,15 @@
+import {createElement as h} from 'react';
+import {renderToStaticMarkup} from 'react-dom/server';
+import {expect} from 'chai';
+import {Mailto} from '..';
+
+describe('<Mailto> SSR', () => {
+  it('renders without crashing as expected', () => {
+    const html = renderToStaticMarkup(h(Mailto, {
+      email: 'foo@bar.baz',
+      subject: 'Hello'
+    }));
+
+    expect(html).to.equal('<a href="mailto:foo@bar.baz?subject=Hello&amp;body="></a>');
+  });
+});
diff --git a/src/Mailto/__tests__/index.test.ts b/src/Mailto/__tests__/index.test.ts
new file mode 100644
index 00000000..280c024b
--- /dev/null
+++ b/src/Mailto/__tests__/index.test.ts
@@ -0,0 +1,29 @@
+import {mount} from 'enzyme';
+import {h} from '../../util';
+import {Mailto} from '..';
+
+describe('<Mailto>', () => {
+  it('is a component', () => {
+    expect(Mailto).toBeInstanceOf(Function);
+  });
+
+  it('renders as expected with just e-mail', () => {
+    const wrapper = mount(h(Mailto, {
+      email: 'foo@bar.baz'
+    }));
+
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it('renders as expected ', () => {
+    const wrapper = mount(h(Mailto, {
+      email: 'foo@bar.baz',
+      subject: 'Hello world',
+      cc: ['foo.cc@bar.baz'],
+      bcc: ['foo.bcc@bar.baz'],
+      body: 'Hello world!'
+    }, 'Click me'));
+
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});
diff --git a/src/Mailto/index.ts b/src/Mailto/index.ts
index 036a90a2..764bf9bf 100644
--- a/src/Mailto/index.ts
+++ b/src/Mailto/index.ts
@@ -16,8 +16,7 @@ export const Mailto: React.StatelessComponent<IMailtoProps> = ({
   cc,
   bcc,
   body = '',
-  children,
-  ...props,
+  ...props
 }) => {
   const query = stringify({
     subject,
@@ -27,6 +26,7 @@ export const Mailto: React.StatelessComponent<IMailtoProps> = ({
   });
 
   return h('a', {
-    href: `mailto:${email}?${query}`
+    href: `mailto:${email}?${query}`,
+    ...props
   });
 };

From 49064dce50f2e7c4bdc286662d780c1e0467c9ce Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sat, 27 Jan 2018 01:09:33 +0000
Subject: [PATCH 29/78] docs: add <Mailto> reference

---
 docs/Mailto.md   | 35 +++++++++++++++++++++++++++++++++++
 docs/Sms.md      |  2 +-
 src/Sms/index.ts |  4 ++--
 3 files changed, 38 insertions(+), 3 deletions(-)
 create mode 100644 docs/Mailto.md

diff --git a/docs/Mailto.md b/docs/Mailto.md
new file mode 100644
index 00000000..747a62fa
--- /dev/null
+++ b/docs/Mailto.md
@@ -0,0 +1,35 @@
+# `<Mailto>`
+
+Creates `<a>` element with `href` attribute formatted to send an e-mail.
+
+## Usage
+
+```jsx
+import {Mailto} from 'libreact/lib/Mailto';
+
+<Mailto email='foo@bar.baz' subject='Hello'>
+  Click me!
+</Mailto>
+```
+
+### Props
+
+Signature
+
+```ts
+interface IMailtoProps {
+  email: string;
+  subject?: string;
+  cc?: string[];
+  bcc?: string[];
+  body?: string;
+}
+```
+
+, where
+
+  - `email` - required, string, e-mail address.
+  - `subject` - optional, string.
+  - `cc` - optional, array of strings, representing e-mail addresses to CC.
+  - `bcc` - optional, array of strings, representing e-mail addresses to BCC.
+  - `body` - optional, string, e-mail body message.
diff --git a/docs/Sms.md b/docs/Sms.md
index 0bc11e23..2826db7d 100644
--- a/docs/Sms.md
+++ b/docs/Sms.md
@@ -7,7 +7,7 @@ Creates `<a>` element with `href` attribute formatted according to SMS protocol.
 ```jsx
 import {Sms} from 'libreact/lib/Sms';
 
-<Sms phone='123' body='hello' />
+<Sms phone='123' body='hello'>Click me!</Sms>
 ```
 
 ### Props
diff --git a/src/Sms/index.ts b/src/Sms/index.ts
index 9ef1ab82..2c6b8f15 100644
--- a/src/Sms/index.ts
+++ b/src/Sms/index.ts
@@ -8,9 +8,9 @@ export interface ISmsProps extends React.HTMLAttributes<HTMLAnchorElement> {
   body?: string;
 }
 
-export const Sms: React.StatelessComponent<ISmsProps> = ({phone, body, children, ...props}: ISmsProps) => {
+export const Sms: React.StatelessComponent<ISmsProps> = ({phone, body, ...props}) => {
   return h('a', {
     href: `sms:${phone}?${stringify({body})}`,
     ...props
-  }, children);
+  });
 };

From ec1dc2dead663eef608f26d941ac016117eacfd3 Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sat, 27 Jan 2018 01:15:25 +0000
Subject: [PATCH 30/78] test: add <State> story

---
 README.md                     |  5 +++--
 src/State/__story__/story.tsx | 26 ++++++++++++++++++++++++++
 src/State/index.ts            |  2 +-
 3 files changed, 30 insertions(+), 3 deletions(-)
 create mode 100644 src/State/__story__/story.tsx

diff --git a/README.md b/README.md
index 4dd36a88..087723a2 100644
--- a/README.md
+++ b/README.md
@@ -31,7 +31,8 @@ const MyComponent = mock();
   - Basics
      - [`mock()`](./docs/mock.md) and [`loadable()`](./docs/loadable.md)
      - [`lazy()`](./docs/lazy.md), [`delayed()`](./docs/delayed.md), and `viewport()`
-     - [`invert()`](./docs/invert.md), [`<Inverted>`](./docs/invert.md#inverted), `<State>`
+     - [`invert()`](./docs/invert.md) and [`<Inverted>`](./docs/invert.md#inverted)
+     - [`<State>`](./docs/State.md)
   - Sensors
      - [`<BatterySensor>`](./docs/BatterySensor.md), [`withBattery()`](./docs/BatterySensor.md#withbattery), and [`@withBattery`](./docs/BatterySensor.md#withbattery-1)
      - [`<MediaDeviceSensor>`](./docs/MediaDeviceSensor.md), [`withMediaDevices()`](./docs/MediaDeviceSensor.md#withmediadevices), and [`@withMediaDevices`](./docs/MediaDeviceSensor.md#withmediadevices-1)
@@ -54,7 +55,7 @@ const MyComponent = mock();
      - [`<Audio>`](./docs/Audio.md), [`<Video>`](./docs/Video.md), and `<Media>`
      - [`<LocalStorage>`](./docs/LocalStorage.md), `<SessionStorage>`, `<IndexedDb>`
      - [`<Speak>`](./docs/Speak.md), [`<Vibrate>`](./docs/Vibrate.md), [`<Alert>`](./docs/Alert.md), `<Prompt>`, `<Confirm>`
-     - [`go()`](./docs/route.md#go), `<Redirect>`, `<Link>`, [`<Sms>`](./docs/Sms.md), `<Email>`, and `<Tel>`
+     - [`go()`](./docs/route.md#go), `<Redirect>`, `<Link>`, [`<Sms>`](./docs/Sms.md), [`<Mailto>`](./docs/Mailto.md), and `<Tel>`
      - [`<FullScreen>`](./docs/FullScreen.md), `<Overlay>`
   - Promises
      - [`<Resolve>`](./docs/Resolve.md), `<Fetch>`
diff --git a/src/State/__story__/story.tsx b/src/State/__story__/story.tsx
new file mode 100644
index 00000000..8e272fa8
--- /dev/null
+++ b/src/State/__story__/story.tsx
@@ -0,0 +1,26 @@
+import {Component, createElement as h} from 'react';
+import {storiesOf} from '@storybook/react';
+import {action} from '@storybook/addon-actions';
+import {linkTo} from '@storybook/addon-links';
+import {State} from '..';
+import ShowDocs from '../../../.storybook/ShowDocs'
+
+storiesOf('Basics/State', module)
+  .add('Documentation', () => h(ShowDocs, {name: 'State'}))
+  .add('Basic example', () =>
+    h(State, {init: {cnt: 0}}, ({cnt}, set) =>
+      <div
+        style={{
+          width: 100,
+          height: 100,
+          border: '1px solid tomato',
+          fontSize: '70px',
+          lineHeight: '100px',
+          textAlign: 'center'
+        }}
+        onClick={() => set({cnt: cnt + 1})}
+      >
+        {cnt}
+      </div>
+    )
+  );
\ No newline at end of file
diff --git a/src/State/index.ts b/src/State/index.ts
index 8ab2ec9c..12e4e305 100644
--- a/src/State/index.ts
+++ b/src/State/index.ts
@@ -27,7 +27,7 @@ export class State extends Component<IStateProps, IStateState> {
   constructor (props, context) {
     super(props, context);
 
-    this.state = props.init;
+    this.state = props.init || {};
     this.setState = this.setState.bind(this);
   }
 

From 881e20ddd9484b96f024dc4447518a2c714c5ba8 Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sat, 27 Jan 2018 01:21:05 +0000
Subject: [PATCH 31/78] docs: add <State> docs

---
 docs/State.md                 | 34 ++++++++++++++++++++++++++++++++++
 src/State/__story__/story.tsx |  4 ++--
 src/State/index.ts            |  4 ++--
 3 files changed, 38 insertions(+), 4 deletions(-)
 create mode 100644 docs/State.md

diff --git a/docs/State.md b/docs/State.md
new file mode 100644
index 00000000..0cbe1666
--- /dev/null
+++ b/docs/State.md
@@ -0,0 +1,34 @@
+# `<State>`
+
+Injects state into a stateless component.
+
+
+## Usage
+
+```jsx
+import {State} from 'libreact/lib/State';
+
+<State init={}>{(state, set) =>
+
+}</State>
+```
+
+Render prop receives two arguments: (1) state of the component; and (2) the `setState` function.
+
+
+## Props
+
+  - `init` - optional, object, initial state.
+
+
+## Example
+
+Create a counter
+
+```jsx
+<State init={{cnt: 0}}>{({cnt}, set) =>
+  <div onClick={() => set({cnt: cnt + 1})}>
+    {cnt}
+  </div>
+}</State>
+```
diff --git a/src/State/__story__/story.tsx b/src/State/__story__/story.tsx
index 8e272fa8..e12ec2db 100644
--- a/src/State/__story__/story.tsx
+++ b/src/State/__story__/story.tsx
@@ -8,7 +8,7 @@ import ShowDocs from '../../../.storybook/ShowDocs'
 storiesOf('Basics/State', module)
   .add('Documentation', () => h(ShowDocs, {name: 'State'}))
   .add('Basic example', () =>
-    h(State, {init: {cnt: 0}}, ({cnt}, set) =>
+    <State init={{cnt: 0}}>{({cnt}, set) =>
       <div
         style={{
           width: 100,
@@ -22,5 +22,5 @@ storiesOf('Basics/State', module)
       >
         {cnt}
       </div>
-    )
+    }</State>
   );
\ No newline at end of file
diff --git a/src/State/index.ts b/src/State/index.ts
index 12e4e305..eaf2e3a8 100644
--- a/src/State/index.ts
+++ b/src/State/index.ts
@@ -3,10 +3,10 @@ import {noop} from '../util';
 import renderProp from '../util/renderProp';
 
 export interface IStateProps {
-  children?: (state: IStateState, setState?) => React.ReactElement<any>;
+  children?: (state, setState?) => React.ReactElement<any>;
+  render?: (state, setState?) => React.ReactElement<any>;
   init: object,
   onChange?: (state: any) => void;
-  render?: (state: any, setState?) => void;
   onMount?: (state) => void;
   onUnmount?: (state) => void;
 }

From ae616d754180c3411b3932b43ed239390fa138f0 Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sat, 27 Jan 2018 01:43:59 +0000
Subject: [PATCH 32/78] feat: add <Toggle> component

---
 src/Toggle/index.ts | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 src/Toggle/index.ts

diff --git a/src/Toggle/index.ts b/src/Toggle/index.ts
new file mode 100644
index 00000000..72ea6cf4
--- /dev/null
+++ b/src/Toggle/index.ts
@@ -0,0 +1,9 @@
+import {h} from '../util';
+import {State} from '../State';
+import renderProp from '../util/renderProp';
+
+export const Toggle = (props) =>
+  h(State, {
+    init: {on: props.on || false},
+    render: ({on}, set) => renderProp(props, on, () => set({on: !on}))
+  });

From 4fcf64c92deaa38855c6e49d84c9a010c4837533 Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sat, 27 Jan 2018 01:57:58 +0000
Subject: [PATCH 33/78] test: create <Toggle> story

---
 src/State/__story__/story.tsx  |  2 +-
 src/Toggle/__story__/story.tsx | 17 +++++++++++++++++
 src/Toggle/index.ts            |  8 ++++++--
 3 files changed, 24 insertions(+), 3 deletions(-)
 create mode 100644 src/Toggle/__story__/story.tsx

diff --git a/src/State/__story__/story.tsx b/src/State/__story__/story.tsx
index e12ec2db..fab64f8e 100644
--- a/src/State/__story__/story.tsx
+++ b/src/State/__story__/story.tsx
@@ -5,7 +5,7 @@ import {linkTo} from '@storybook/addon-links';
 import {State} from '..';
 import ShowDocs from '../../../.storybook/ShowDocs'
 
-storiesOf('Basics/State', module)
+storiesOf('Basic/State', module)
   .add('Documentation', () => h(ShowDocs, {name: 'State'}))
   .add('Basic example', () =>
     <State init={{cnt: 0}}>{({cnt}, set) =>
diff --git a/src/Toggle/__story__/story.tsx b/src/Toggle/__story__/story.tsx
new file mode 100644
index 00000000..efad52e4
--- /dev/null
+++ b/src/Toggle/__story__/story.tsx
@@ -0,0 +1,17 @@
+import {Component, createElement as h} from 'react';
+import {storiesOf} from '@storybook/react';
+import {action} from '@storybook/addon-actions';
+import {linkTo} from '@storybook/addon-links';
+import {Toggle} from '..';
+import ShowDocs from '../../../.storybook/ShowDocs'
+
+storiesOf('Basic/Toggle', module)
+  .add('Documentation', () => h(ShowDocs, {name: 'Toggle'}))
+  .add('Example', () =>
+    <Toggle init={true}>{(on, toggle) =>
+      <div onClick={toggle}>
+        <input type='checkbox' checked={on} />
+        Toggle me!
+      </div>
+    }</Toggle>
+  );
diff --git a/src/Toggle/index.ts b/src/Toggle/index.ts
index 72ea6cf4..5088d058 100644
--- a/src/Toggle/index.ts
+++ b/src/Toggle/index.ts
@@ -2,8 +2,12 @@ import {h} from '../util';
 import {State} from '../State';
 import renderProp from '../util/renderProp';
 
-export const Toggle = (props) =>
+export interface IToggleProps {
+  init?: boolean;
+}
+
+export const Toggle: React.StatelessComponent<IToggleProps> = (props) =>
   h(State, {
-    init: {on: props.on || false},
+    init: {on: props.init || false},
     render: ({on}, set) => renderProp(props, on, () => set({on: !on}))
   });

From 90436641aa4681e09640982978d143dc2e46cea6 Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sat, 27 Jan 2018 02:06:30 +0000
Subject: [PATCH 34/78] test: add <Toggle> stories

---
 src/Toggle/__story__/story.tsx | 36 +++++++++++++++++++++++++++++++---
 src/Toggle/index.ts            |  8 +++++++-
 2 files changed, 40 insertions(+), 4 deletions(-)

diff --git a/src/Toggle/__story__/story.tsx b/src/Toggle/__story__/story.tsx
index efad52e4..7dc33838 100644
--- a/src/Toggle/__story__/story.tsx
+++ b/src/Toggle/__story__/story.tsx
@@ -2,16 +2,46 @@ import {Component, createElement as h} from 'react';
 import {storiesOf} from '@storybook/react';
 import {action} from '@storybook/addon-actions';
 import {linkTo} from '@storybook/addon-links';
-import {Toggle} from '..';
+import {Toggle, withToggle} from '..';
 import ShowDocs from '../../../.storybook/ShowDocs'
 
+const Checkbox = ({on, toggle}) =>
+  <div onClick={toggle}>
+    <input type='checkbox' checked={on} />
+    Toggle me!
+  </div>;
+
+
+
+const Checkbox2 = ({toggle}) => h(Checkbox, toggle);
+
+const Hoc1 = withToggle(Checkbox, '', {init: true});
+const Hoc2 = withToggle(Checkbox2);
+
+@withToggle
+class Decorator extends Component<any, any> {
+  render () {
+    const {on, toggle} = this.props.toggle;
+
+    return (
+      <div onClick={toggle}>
+        <input type='checkbox' checked={on} />
+        Toggle me!
+      </div>
+    );
+  }
+}
+
 storiesOf('Basic/Toggle', module)
   .add('Documentation', () => h(ShowDocs, {name: 'Toggle'}))
   .add('Example', () =>
-    <Toggle init={true}>{(on, toggle) =>
+    <Toggle init={true}>{({on, toggle}) =>
       <div onClick={toggle}>
         <input type='checkbox' checked={on} />
         Toggle me!
       </div>
     }</Toggle>
-  );
+  )
+  .add('HOC 1', () => <Hoc1 />)
+  .add('HOC 2', () => <Hoc2 />)
+  .add('Decorator', () => <Decorator />);
diff --git a/src/Toggle/index.ts b/src/Toggle/index.ts
index 5088d058..a4d89e31 100644
--- a/src/Toggle/index.ts
+++ b/src/Toggle/index.ts
@@ -1,6 +1,7 @@
 import {h} from '../util';
 import {State} from '../State';
 import renderProp from '../util/renderProp';
+import faccToHoc from '../util/faccToHoc';
 
 export interface IToggleProps {
   init?: boolean;
@@ -9,5 +10,10 @@ export interface IToggleProps {
 export const Toggle: React.StatelessComponent<IToggleProps> = (props) =>
   h(State, {
     init: {on: props.init || false},
-    render: ({on}, set) => renderProp(props, on, () => set({on: !on}))
+    render: ({on}, set) => renderProp(props, {
+      on,
+      toggle: () => set({on: !on})
+    })
   });
+
+export const withToggle = faccToHoc(Toggle, 'toggle');

From 65a67bad824307179afebb8a99283e7ff06710fd Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sat, 27 Jan 2018 02:29:39 +0000
Subject: [PATCH 35/78] docs: readme

---
 README.md                                     |  8 ++++-
 src/Flipflop/index.ts                         | 31 +++++++++++++++++++
 .../__snapshots__/index.test.ts.snap          |  2 +-
 .../__snapshots__/index.test.ts.snap          |  2 --
 4 files changed, 39 insertions(+), 4 deletions(-)
 create mode 100644 src/Flipflop/index.ts

diff --git a/README.md b/README.md
index 087723a2..97a9aef9 100644
--- a/README.md
+++ b/README.md
@@ -32,7 +32,13 @@ const MyComponent = mock();
      - [`mock()`](./docs/mock.md) and [`loadable()`](./docs/loadable.md)
      - [`lazy()`](./docs/lazy.md), [`delayed()`](./docs/delayed.md), and `viewport()`
      - [`invert()`](./docs/invert.md) and [`<Inverted>`](./docs/invert.md#inverted)
-     - [`<State>`](./docs/State.md)
+     - [`<State>`](./docs/State.md), `withState()`, and `@withState`
+        - [`<Toggle>`](./docs/Toggle.md), [`withToggle()`](./docs/Toggle.md#withtoggle-hoc), and [`@withToggle`](./docs/Toggle.md#withtoggle-decorator)
+        - `<Flipflop>`, `withFlipflop()`, and `@withFlipflop`
+        - `<Value>`, `withValue()`, and `@withValue`
+        - `<Counter>`, `withCounter()` and `@withCounter`
+        - `<List>`, `withList()`, and `@withList`
+        - `<Map>`, `withMap()`, and `@withMap`
   - Sensors
      - [`<BatterySensor>`](./docs/BatterySensor.md), [`withBattery()`](./docs/BatterySensor.md#withbattery), and [`@withBattery`](./docs/BatterySensor.md#withbattery-1)
      - [`<MediaDeviceSensor>`](./docs/MediaDeviceSensor.md), [`withMediaDevices()`](./docs/MediaDeviceSensor.md#withmediadevices), and [`@withMediaDevices`](./docs/MediaDeviceSensor.md#withmediadevices-1)
diff --git a/src/Flipflop/index.ts b/src/Flipflop/index.ts
new file mode 100644
index 00000000..911fca8b
--- /dev/null
+++ b/src/Flipflop/index.ts
@@ -0,0 +1,31 @@
+import {h} from '../util';
+import {State} from '../State';
+import renderProp from '../util/renderProp';
+import faccToHoc from '../util/faccToHoc';
+
+export interface IFlipflopProps {
+  init?: boolean;
+}
+
+export const Flipflop: React.StatelessComponent<IFlipflopProps> = (props) => {
+  const initialState = props.init || false;
+
+  return h(State, {
+    init: {on: initialState},
+    render: ({on}, set) => renderProp(props, {
+      on,
+      flip: () => {
+        if (on === initialState) {
+          set({on: !initialState});
+        }
+      },
+      flop: () => {
+        if (on !== initialState) {
+          set({on: initialState});
+        }
+      }
+    })
+  });
+};
+
+export const withFlipflop = faccToHoc(Toggle, 'flipflop');
diff --git a/src/Mailto/__tests__/__snapshots__/index.test.ts.snap b/src/Mailto/__tests__/__snapshots__/index.test.ts.snap
index 8b2235f6..25dcb1ba 100644
--- a/src/Mailto/__tests__/__snapshots__/index.test.ts.snap
+++ b/src/Mailto/__tests__/__snapshots__/index.test.ts.snap
@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Mailto> renders as expected  1`] = `"<a href=\\"mailto:foo@bar.baz?subject=Hello%20world&amp;cc=foo.cc%40bar.baz&amp;bcc=foo.bcc%40bar.baz&amp;body=Hello%20world%21\\"></a>"`;
+exports[`<Mailto> renders as expected  1`] = `"<a href=\\"mailto:foo@bar.baz?subject=Hello%20world&amp;cc=foo.cc%40bar.baz&amp;bcc=foo.bcc%40bar.baz&amp;body=Hello%20world%21\\">Click me</a>"`;
 
 exports[`<Mailto> renders as expected with just e-mail 1`] = `"<a href=\\"mailto:foo@bar.baz?subject=&amp;body=\\"></a>"`;
diff --git a/src/Sms/__tests__/__snapshots__/index.test.ts.snap b/src/Sms/__tests__/__snapshots__/index.test.ts.snap
index ecdaaf19..00a9c00b 100644
--- a/src/Sms/__tests__/__snapshots__/index.test.ts.snap
+++ b/src/Sms/__tests__/__snapshots__/index.test.ts.snap
@@ -2,6 +2,4 @@
 
 exports[`<Sms> renders as expected  1`] = `"<a href=\\"sms:123?body=Hello%20world\\"></a>"`;
 
-exports[`<Sms> renders as expected 1`] = `"<a href=\\"sms:123?\\"></a>"`;
-
 exports[`<Sms> renders as expected without body 1`] = `"<a href=\\"sms:123?\\"></a>"`;

From f9af51a338b6a0fd1b7b4cc590bc2ed3ff16f674 Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sat, 27 Jan 2018 02:43:45 +0000
Subject: [PATCH 36/78] docs: add Inversion

---
 README.md         | 1 +
 docs/inversion.md | 4 ++++
 2 files changed, 5 insertions(+)
 create mode 100644 docs/inversion.md

diff --git a/README.md b/README.md
index 97a9aef9..619c3371 100644
--- a/README.md
+++ b/README.md
@@ -31,6 +31,7 @@ const MyComponent = mock();
   - Basics
      - [`mock()`](./docs/mock.md) and [`loadable()`](./docs/loadable.md)
      - [`lazy()`](./docs/lazy.md), [`delayed()`](./docs/delayed.md), and `viewport()`
+  - [Inversion](./docs/inversion.md)
      - [`invert()`](./docs/invert.md) and [`<Inverted>`](./docs/invert.md#inverted)
      - [`<State>`](./docs/State.md), `withState()`, and `@withState`
         - [`<Toggle>`](./docs/Toggle.md), [`withToggle()`](./docs/Toggle.md#withtoggle-hoc), and [`@withToggle`](./docs/Toggle.md#withtoggle-decorator)
diff --git a/docs/inversion.md b/docs/inversion.md
new file mode 100644
index 00000000..479beeec
--- /dev/null
+++ b/docs/inversion.md
@@ -0,0 +1,4 @@
+
+> *inversion*
+>
+> the action of inverting something or the state of being inverted.

From 4dabc74bf34e5953c1ab6640dd848dcf7f755399 Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sat, 27 Jan 2018 18:11:10 +0000
Subject: [PATCH 37/78] test: add <Flipflop> story

---
 README.md                        |  3 ++-
 docs/inversion.md                |  2 +-
 package.json                     |  2 +-
 src/Flipflop/__story__/story.tsx | 31 +++++++++++++++++++++++++++++++
 src/Flipflop/index.ts            |  2 +-
 src/State/__story__/story.tsx    |  2 +-
 src/Toggle/__story__/story.tsx   |  2 +-
 7 files changed, 38 insertions(+), 6 deletions(-)
 create mode 100644 src/Flipflop/__story__/story.tsx

diff --git a/README.md b/README.md
index 619c3371..2e1d05c2 100644
--- a/README.md
+++ b/README.md
@@ -28,7 +28,8 @@ const MyComponent = mock();
 
 ## Contents
 
-  - Basics
+  - Introduction
+  - Dummies
      - [`mock()`](./docs/mock.md) and [`loadable()`](./docs/loadable.md)
      - [`lazy()`](./docs/lazy.md), [`delayed()`](./docs/delayed.md), and `viewport()`
   - [Inversion](./docs/inversion.md)
diff --git a/docs/inversion.md b/docs/inversion.md
index 479beeec..b259f676 100644
--- a/docs/inversion.md
+++ b/docs/inversion.md
@@ -1,4 +1,4 @@
 
-> *inversion*
+> __*inversion*__
 >
 > the action of inverting something or the state of being inverted.
diff --git a/package.json b/package.json
index 9e164498..a6e6629e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "libreact",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "React standard library",
   "main": "lib/index.js",
   "keywords": [
diff --git a/src/Flipflop/__story__/story.tsx b/src/Flipflop/__story__/story.tsx
new file mode 100644
index 00000000..deea6ae4
--- /dev/null
+++ b/src/Flipflop/__story__/story.tsx
@@ -0,0 +1,31 @@
+import {Component, createElement as h} from 'react';
+import {storiesOf} from '@storybook/react';
+import {action} from '@storybook/addon-actions';
+import {linkTo} from '@storybook/addon-links';
+import {Flipflop} from '..';
+import ShowDocs from '../../../.storybook/ShowDocs'
+
+storiesOf('Inversion/Flipflop', module)
+  .add('Documentation', () => h(ShowDocs, {name: 'Flipflop'}))
+  .add('Basic example', () =>
+    <Flipflop>{({on, flip, flop}) =>
+      <div>
+        <div
+          style={{
+            width: 100,
+            height: 100,
+            border: '1px solid tomato',
+            fontSize: '70px',
+            lineHeight: '100px',
+            textAlign: 'center'
+          }}
+          onClick={flip}
+        >
+          {on ? 'ON' : 'OFF'}
+        </div>
+        <button onClick={flip}>flip</button>
+        <span>{' '}</span>
+        <button onClick={flop}>flop</button>
+      </div>
+    }</Flipflop>
+  );
diff --git a/src/Flipflop/index.ts b/src/Flipflop/index.ts
index 911fca8b..ccf5a3df 100644
--- a/src/Flipflop/index.ts
+++ b/src/Flipflop/index.ts
@@ -28,4 +28,4 @@ export const Flipflop: React.StatelessComponent<IFlipflopProps> = (props) => {
   });
 };
 
-export const withFlipflop = faccToHoc(Toggle, 'flipflop');
+export const withFlipflop = faccToHoc(Flipflop, 'flipflop');
diff --git a/src/State/__story__/story.tsx b/src/State/__story__/story.tsx
index fab64f8e..eb2b8c9d 100644
--- a/src/State/__story__/story.tsx
+++ b/src/State/__story__/story.tsx
@@ -5,7 +5,7 @@ import {linkTo} from '@storybook/addon-links';
 import {State} from '..';
 import ShowDocs from '../../../.storybook/ShowDocs'
 
-storiesOf('Basic/State', module)
+storiesOf('Inversion/State', module)
   .add('Documentation', () => h(ShowDocs, {name: 'State'}))
   .add('Basic example', () =>
     <State init={{cnt: 0}}>{({cnt}, set) =>
diff --git a/src/Toggle/__story__/story.tsx b/src/Toggle/__story__/story.tsx
index 7dc33838..205cd5b0 100644
--- a/src/Toggle/__story__/story.tsx
+++ b/src/Toggle/__story__/story.tsx
@@ -32,7 +32,7 @@ class Decorator extends Component<any, any> {
   }
 }
 
-storiesOf('Basic/Toggle', module)
+storiesOf('Inversion/Toggle', module)
   .add('Documentation', () => h(ShowDocs, {name: 'Toggle'}))
   .add('Example', () =>
     <Toggle init={true}>{({on, toggle}) =>

From 598b1c7bca9094ffd8ef196e278283e6e5e66804 Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sat, 27 Jan 2018 18:16:15 +0000
Subject: [PATCH 38/78] docs: add <Toggle> and <Flipflop> docs

---
 README.md        |  2 +-
 docs/Flipflop.md | 14 ++++++++++++++
 docs/Toggle.md   | 13 +++++++++++++
 3 files changed, 28 insertions(+), 1 deletion(-)
 create mode 100644 docs/Flipflop.md
 create mode 100644 docs/Toggle.md

diff --git a/README.md b/README.md
index 2e1d05c2..27e0fa55 100644
--- a/README.md
+++ b/README.md
@@ -36,7 +36,7 @@ const MyComponent = mock();
      - [`invert()`](./docs/invert.md) and [`<Inverted>`](./docs/invert.md#inverted)
      - [`<State>`](./docs/State.md), `withState()`, and `@withState`
         - [`<Toggle>`](./docs/Toggle.md), [`withToggle()`](./docs/Toggle.md#withtoggle-hoc), and [`@withToggle`](./docs/Toggle.md#withtoggle-decorator)
-        - `<Flipflop>`, `withFlipflop()`, and `@withFlipflop`
+        - [`<Flipflop>`](./docs/Flipflop.md), `withFlipflop()`, and `@withFlipflop`
         - `<Value>`, `withValue()`, and `@withValue`
         - `<Counter>`, `withCounter()` and `@withCounter`
         - `<List>`, `withList()`, and `@withList`
diff --git a/docs/Flipflop.md b/docs/Flipflop.md
new file mode 100644
index 00000000..5e5a2e2f
--- /dev/null
+++ b/docs/Flipflop.md
@@ -0,0 +1,14 @@
+# `<Flipflop>`
+
+Similar to [`<Toggle>`](./Toggle.md) but allows to flip the state only once using the `flip` method. Repeated calls to `flip`
+will have no effect. To flop the state back again, use `flop` method.
+
+## Usage
+
+```jsx
+import {Flipflop} from 'libreact/lib/Flipflop';
+
+<Flipflop>{({on, flip, flop}) =>
+  <div onClick={flip}>{on ? 'ON' : 'OFF'}</div>
+}</Flipflop>
+```
diff --git a/docs/Toggle.md b/docs/Toggle.md
new file mode 100644
index 00000000..d03c3516
--- /dev/null
+++ b/docs/Toggle.md
@@ -0,0 +1,13 @@
+# `<Toggle>`
+
+Allows you to toggle the state of a boolean.
+
+## Usage
+
+```jsx
+import {Toggle} from 'libreact/lib/Toggle';
+
+<Toggle>{({on, toggle}) =>
+  <div onClick={toggle}>{on ? 'ON' : 'OFF'}</div>
+}</Toggle>
+```

From a4cccbdf9d362cec0e8c100fca113c5a12fee28f Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sat, 27 Jan 2018 18:24:03 +0000
Subject: [PATCH 39/78] docs: add withToggle and withFlipflop docs

---
 README.md             |  2 +-
 docs/Flipflop.md      | 69 +++++++++++++++++++++++++++++++++++++++++++
 docs/NetworkSensor.md |  2 +-
 docs/Toggle.md        | 69 +++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 140 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 27e0fa55..d683091e 100644
--- a/README.md
+++ b/README.md
@@ -36,7 +36,7 @@ const MyComponent = mock();
      - [`invert()`](./docs/invert.md) and [`<Inverted>`](./docs/invert.md#inverted)
      - [`<State>`](./docs/State.md), `withState()`, and `@withState`
         - [`<Toggle>`](./docs/Toggle.md), [`withToggle()`](./docs/Toggle.md#withtoggle-hoc), and [`@withToggle`](./docs/Toggle.md#withtoggle-decorator)
-        - [`<Flipflop>`](./docs/Flipflop.md), `withFlipflop()`, and `@withFlipflop`
+        - [`<Flipflop>`](./docs/Flipflop.md), [`withFlipflop()`](./docs/Flipflop.md#withflipflop-hoc), and [`@withFlipflop`](./docs/Flipflop.md#withflipflop-decorator)
         - `<Value>`, `withValue()`, and `@withValue`
         - `<Counter>`, `withCounter()` and `@withCounter`
         - `<List>`, `withList()`, and `@withList`
diff --git a/docs/Flipflop.md b/docs/Flipflop.md
index 5e5a2e2f..176f8098 100644
--- a/docs/Flipflop.md
+++ b/docs/Flipflop.md
@@ -12,3 +12,72 @@ import {Flipflop} from 'libreact/lib/Flipflop';
   <div onClick={flip}>{on ? 'ON' : 'OFF'}</div>
 }</Flipflop>
 ```
+
+## Props
+
+Signature
+
+```ts
+interface IFlipflopProps {
+  init?: boolean;
+}
+```
+
+, where
+
+  - `init` - optional, boolean, initial state of the flipflop.
+
+
+## `withFlipflop()` HOC
+
+HOC that merges `flipflop` prop into enhanced component's props.
+
+```jsx
+import {withFlipflop} from 'libreact/lib/Flipflop';
+
+const MyCompWithFlipflop = withFlipflop(MyComp);
+```
+
+You can overwrite the injected prop name
+
+```js
+const MyCompWithFlipflop = withFlipflop(MyComp, 'foobar');
+```
+
+Or simply merge the whole object into your props
+
+```js
+const MyCompWithFlipflop = withFlipflop(MyComp, '');
+```
+
+
+## `@withFlipflop` decorator
+
+React stateful component decorator that adds `flipflop` prop.
+
+```js
+import {withFlipflop} from 'libreact/lib/Flipflop';
+
+@withFlipflop
+class MyComp extends Component {
+
+}
+```
+
+Specify different prop name
+
+```js
+@withFlipflop('foobar')
+class MyComp extends Component {
+
+}
+```
+
+or merge the the whole object into props
+
+```js
+@withFlipflop('')
+class MyComp extends Component {
+
+}
+```
\ No newline at end of file
diff --git a/docs/NetworkSensor.md b/docs/NetworkSensor.md
index 855ad98a..5b954f34 100644
--- a/docs/NetworkSensor.md
+++ b/docs/NetworkSensor.md
@@ -69,7 +69,7 @@ const NetworkStatus = withNetwork(NetworkStatusFormatter);
 <NetworkStatus />
 ```
 
-You can overwrite the inject prop name
+You can overwrite the injected prop name
 
 ```js
 const NetworkStatus = withNetwork(NetworkStatusFormatter, 'network');
diff --git a/docs/Toggle.md b/docs/Toggle.md
index d03c3516..f2cf08b2 100644
--- a/docs/Toggle.md
+++ b/docs/Toggle.md
@@ -11,3 +11,72 @@ import {Toggle} from 'libreact/lib/Toggle';
   <div onClick={toggle}>{on ? 'ON' : 'OFF'}</div>
 }</Toggle>
 ```
+
+## Props
+
+Signature
+
+```ts
+interface IToggleProps {
+  init?: boolean;
+}
+```
+
+, where
+
+  - `init` - optional, boolean, initial state of the toggle.
+
+
+## `withToggle()` HOC
+
+HOC that merges `toggle` prop into enhanced component's props.
+
+```jsx
+import {withToggle} from 'libreact/lib/Toggle';
+
+const MyCompWithToggle = withToggle(MyComp);
+```
+
+You can overwrite the injected prop name
+
+```js
+const MyCompWithToggle = withToggle(MyComp, 'foobar');
+```
+
+Or simply merge the whole object into your props
+
+```js
+const MyCompWithToggle = withToggle(MyComp, '');
+```
+
+
+## `@withToggle` decorator
+
+React stateful component decorator that adds `toggle` prop.
+
+```js
+import {withToggle} from 'libreact/lib/Toggle';
+
+@withToggle
+class MyComp extends Component {
+
+}
+```
+
+Specify different prop name
+
+```js
+@withToggle('foobar')
+class MyComp extends Component {
+
+}
+```
+
+or merge the the whole object into props
+
+```js
+@withToggle('')
+class MyComp extends Component {
+
+}
+```
\ No newline at end of file

From 6e7522eb025276d8695987fc209b97da15d3f7dd Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sat, 27 Jan 2018 18:56:44 +0000
Subject: [PATCH 40/78] feat: add <Value> implementation and story

---
 src/Value/__story__/story.tsx | 27 +++++++++++++++++++++++++++
 src/Value/index.ts            | 20 ++++++++++++++++++++
 2 files changed, 47 insertions(+)
 create mode 100644 src/Value/__story__/story.tsx
 create mode 100644 src/Value/index.ts

diff --git a/src/Value/__story__/story.tsx b/src/Value/__story__/story.tsx
new file mode 100644
index 00000000..81e74088
--- /dev/null
+++ b/src/Value/__story__/story.tsx
@@ -0,0 +1,27 @@
+import {Component, createElement as h} from 'react';
+import {storiesOf} from '@storybook/react';
+import {action} from '@storybook/addon-actions';
+import {linkTo} from '@storybook/addon-links';
+import {Value, withValue} from '..';
+import ShowDocs from '../../../.storybook/ShowDocs'
+
+const Val = ({value, set}) =>
+    <input value={value} onChange={(e) => set(e.target.value)} />;
+
+const Hoc1 = withValue(({value}) => h(Val, value));
+// const Hoc2 = withToggle(Checkbox2);
+
+@withValue
+class Decorator extends Component<any, any> {
+  render () {
+    return <Val {...this.props.value} />
+  }
+}
+
+storiesOf('Inversion/Value', module)
+  .add('Documentation', () => h(ShowDocs, {name: 'Value'}))
+  .add('Example', () =>
+    <Value init={'foobar'}>{(props) => <Val {...props} />}</Value>
+  )
+  .add('HOC 1', () => <Hoc1 />)
+  .add('Decorator', () => <Decorator />);
diff --git a/src/Value/index.ts b/src/Value/index.ts
new file mode 100644
index 00000000..744eafd6
--- /dev/null
+++ b/src/Value/index.ts
@@ -0,0 +1,20 @@
+import {h} from '../util';
+import {State} from '../State';
+import renderProp from '../util/renderProp';
+import faccToHoc from '../util/faccToHoc';
+
+export const Value = (props) => {
+  return h(State, {
+    init: {
+      value: props.init
+    },
+    render: ({value}, set) => {
+      return renderProp(props, {
+        value,
+        set: (value) => set({value})
+      });
+    }
+  });
+};
+
+export const withValue = faccToHoc(Value, 'value');

From 8b614124c2998443e0cbb1b18355f00ba95e5f67 Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sat, 27 Jan 2018 19:00:14 +0000
Subject: [PATCH 41/78] docs: add <Value> docs

---
 README.md     |  2 +-
 docs/Value.md | 82 +++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 83 insertions(+), 1 deletion(-)
 create mode 100644 docs/Value.md

diff --git a/README.md b/README.md
index d683091e..a7cd669b 100644
--- a/README.md
+++ b/README.md
@@ -37,7 +37,7 @@ const MyComponent = mock();
      - [`<State>`](./docs/State.md), `withState()`, and `@withState`
         - [`<Toggle>`](./docs/Toggle.md), [`withToggle()`](./docs/Toggle.md#withtoggle-hoc), and [`@withToggle`](./docs/Toggle.md#withtoggle-decorator)
         - [`<Flipflop>`](./docs/Flipflop.md), [`withFlipflop()`](./docs/Flipflop.md#withflipflop-hoc), and [`@withFlipflop`](./docs/Flipflop.md#withflipflop-decorator)
-        - `<Value>`, `withValue()`, and `@withValue`
+        - [`<Value>`](./docs/Value.md), [`withValue()`](./docs/Value.md#withvalue-hoc), and [`@withValue`](./docs/Value.md#withvalue-decorator)
         - `<Counter>`, `withCounter()` and `@withCounter`
         - `<List>`, `withList()`, and `@withList`
         - `<Map>`, `withMap()`, and `@withMap`
diff --git a/docs/Value.md b/docs/Value.md
new file mode 100644
index 00000000..50e4f2d8
--- /dev/null
+++ b/docs/Value.md
@@ -0,0 +1,82 @@
+# `<Value>`
+
+Allows you to keep a state of an arbitrary value.
+
+## Usage
+
+```jsx
+import {Value} from 'libreact/lib/Value';
+
+<Value>{({value, set}) =>
+  <input value={value} onChange={(e) => set(e.target.value)} />;
+}</Value>
+```
+
+## Props
+
+Signature
+
+```ts
+interface IValueProps {
+  init?: any;
+}
+```
+
+, where
+
+  - `init` - optional, default value.
+
+
+## `withValue()` HOC
+
+HOC that merges `value` prop into enhanced component's props.
+
+```jsx
+import {withValue} from 'libreact/lib/Value';
+
+const MyCompWithValue = withValue(MyComp);
+```
+
+You can overwrite the injected prop name
+
+```js
+const MyCompWithValue = withValue(MyComp, 'foobar');
+```
+
+Or simply merge the whole object into your props
+
+```js
+const MyCompWithValue = withValue(MyComp, '');
+```
+
+
+## `@withValue` decorator
+
+React stateful component decorator that adds `value` prop.
+
+```js
+import {withValue} from 'libreact/lib/Value';
+
+@withValue
+class MyComp extends Component {
+
+}
+```
+
+Specify different prop name
+
+```js
+@withValue('foobar')
+class MyComp extends Component {
+
+}
+```
+
+or merge the the whole object into props
+
+```js
+@withValue('')
+class MyComp extends Component {
+
+}
+```

From 9f98879893ad8cdddb46ffbec100828c9712e2a7 Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sat, 27 Jan 2018 19:09:47 +0000
Subject: [PATCH 42/78] feat: add withState()

---
 README.md                     |  2 +-
 docs/State.md                 | 30 ++++++++++++++++++++++++++++++
 src/State/__story__/story.tsx | 12 ++++++++++--
 src/State/index.ts            | 22 +++++++++++++++++++++-
 4 files changed, 62 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index a7cd669b..feef9069 100644
--- a/README.md
+++ b/README.md
@@ -34,7 +34,7 @@ const MyComponent = mock();
      - [`lazy()`](./docs/lazy.md), [`delayed()`](./docs/delayed.md), and `viewport()`
   - [Inversion](./docs/inversion.md)
      - [`invert()`](./docs/invert.md) and [`<Inverted>`](./docs/invert.md#inverted)
-     - [`<State>`](./docs/State.md), `withState()`, and `@withState`
+     - [`<State>`](./docs/State.md) and [`withState()`](./docs/State.md#withstate-hoc)
         - [`<Toggle>`](./docs/Toggle.md), [`withToggle()`](./docs/Toggle.md#withtoggle-hoc), and [`@withToggle`](./docs/Toggle.md#withtoggle-decorator)
         - [`<Flipflop>`](./docs/Flipflop.md), [`withFlipflop()`](./docs/Flipflop.md#withflipflop-hoc), and [`@withFlipflop`](./docs/Flipflop.md#withflipflop-decorator)
         - [`<Value>`](./docs/Value.md), [`withValue()`](./docs/Value.md#withvalue-hoc), and [`@withValue`](./docs/Value.md#withvalue-decorator)
diff --git a/docs/State.md b/docs/State.md
index 0cbe1666..0cdd2c96 100644
--- a/docs/State.md
+++ b/docs/State.md
@@ -32,3 +32,33 @@ Create a counter
   </div>
 }</State>
 ```
+
+
+## `withState()` HOC
+
+HOC that merges `state` prop into enhanced component's props. Your component will receive
+the state object with merged in `set()` method that you can use to update your state.
+
+```jsx
+import {withState} from 'libreact/lib/State';
+
+const MyCompWithState = withState(MyComp);
+```
+
+You can overwrite the injected prop name
+
+```js
+const MyCompWithState = withState(MyComp, 'foobar');
+```
+
+Or simply merge the whole object into your props
+
+```js
+const MyCompWithState = withState(MyComp, '');
+```
+
+Specify default state
+
+```js
+const MyCompWithState = withState(MyComp, '', {counter: 0});
+```
diff --git a/src/State/__story__/story.tsx b/src/State/__story__/story.tsx
index eb2b8c9d..0f325893 100644
--- a/src/State/__story__/story.tsx
+++ b/src/State/__story__/story.tsx
@@ -2,9 +2,15 @@ import {Component, createElement as h} from 'react';
 import {storiesOf} from '@storybook/react';
 import {action} from '@storybook/addon-actions';
 import {linkTo} from '@storybook/addon-links';
-import {State} from '..';
+import {State, withState} from '..';
 import ShowDocs from '../../../.storybook/ShowDocs'
 
+const Cnt = ({cnt, set}) =>
+  <div onClick={() => set({cnt: cnt + 1})}>{cnt}</div>;
+
+const Hoc1 = withState(Cnt, '', {cnt: 3});
+const Hoc2 = withState(({foobar}) => h(Cnt, foobar), 'foobar', {cnt: 0});
+
 storiesOf('Inversion/State', module)
   .add('Documentation', () => h(ShowDocs, {name: 'State'}))
   .add('Basic example', () =>
@@ -23,4 +29,6 @@ storiesOf('Inversion/State', module)
         {cnt}
       </div>
     }</State>
-  );
\ No newline at end of file
+  )
+  .add('HOC 1', () => <Hoc1 />)
+  .add('HOC 2', () => <Hoc2 />);
diff --git a/src/State/index.ts b/src/State/index.ts
index eaf2e3a8..e1e15ab8 100644
--- a/src/State/index.ts
+++ b/src/State/index.ts
@@ -1,5 +1,5 @@
 import {Component} from 'react';
-import {noop} from '../util';
+import {h, noop} from '../util';
 import renderProp from '../util/renderProp';
 
 export interface IStateProps {
@@ -43,3 +43,23 @@ export class State extends Component<IStateProps, IStateState> {
     return renderProp(this.props, this.state, this.setState);
   }
 }
+
+export const withState = (Comp, name = 'state', init = {}) =>
+  (props) => h(State, {
+    init,
+    render: (state, set) =>
+      h(Comp, name ?
+        {
+          [name]: {
+            ...state,
+            set
+          },
+          ...props
+        } :
+        {
+          ...state,
+          set,
+          ...props,
+        }
+      )
+  });

From a8c5c224f7416f73ece3af5edd5f2cd84fd157df Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sat, 27 Jan 2018 19:17:42 +0000
Subject: [PATCH 43/78] feat: add <Counter> component

---
 src/Counter/index.ts | 21 +++++++++++++++++++++
 src/Value/index.ts   |  8 +++++++-
 2 files changed, 28 insertions(+), 1 deletion(-)
 create mode 100644 src/Counter/index.ts

diff --git a/src/Counter/index.ts b/src/Counter/index.ts
new file mode 100644
index 00000000..b6cf1b8d
--- /dev/null
+++ b/src/Counter/index.ts
@@ -0,0 +1,21 @@
+import {h} from '../util';
+import {Value} from '../Value';
+import renderProp from '../util/renderProp';
+import faccToHoc from '../util/faccToHoc';
+
+export interface ICounterProps {
+  init?: number;
+}
+
+export const Counter: React.StatelessComponent<ICounterProps> = (props) => {
+  return h(Value, {
+    init: props.init || 0,
+    render: ({value, set}) => renderProp(props, {
+      cnt: value,
+      set,
+      inc: (by: number = 1) => set(value + by)
+    })
+  });
+};
+
+export const withCounter = faccToHoc(Counter, 'counter');
diff --git a/src/Value/index.ts b/src/Value/index.ts
index 744eafd6..4b499a63 100644
--- a/src/Value/index.ts
+++ b/src/Value/index.ts
@@ -3,7 +3,13 @@ import {State} from '../State';
 import renderProp from '../util/renderProp';
 import faccToHoc from '../util/faccToHoc';
 
-export const Value = (props) => {
+export interface IValueProps {
+  init?: any;
+  children?: (state) => React.ReactElement<any>;
+  render?: (state) => React.ReactElement<any>;
+}
+
+export const Value: React.StatelessComponent<IValueProps> = (props) => {
   return h(State, {
     init: {
       value: props.init

From 3413deb26c6f04e8b432850fe94992616eec8fed Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sat, 27 Jan 2018 19:31:20 +0000
Subject: [PATCH 44/78] test: add <Counter> stories

---
 src/Counter/__story__/story.tsx | 28 ++++++++++++++++++++++++++++
 src/Counter/index.ts            | 18 ++++++++++++------
 2 files changed, 40 insertions(+), 6 deletions(-)
 create mode 100644 src/Counter/__story__/story.tsx

diff --git a/src/Counter/__story__/story.tsx b/src/Counter/__story__/story.tsx
new file mode 100644
index 00000000..84a8f668
--- /dev/null
+++ b/src/Counter/__story__/story.tsx
@@ -0,0 +1,28 @@
+import {Component, createElement as h} from 'react';
+import {storiesOf} from '@storybook/react';
+import {action} from '@storybook/addon-actions';
+import {linkTo} from '@storybook/addon-links';
+import {Counter, withCounter} from '..';
+import ShowDocs from '../../../.storybook/ShowDocs'
+
+const Val = ({value, inc}) =>
+    <div onClick={(e) => inc(3)}>{value}</div>;
+
+const Hoc1 = withCounter(({counter}) => h(Val, counter));
+const Hoc2 = withCounter(Val, '', -5);
+
+@withCounter('foo', -4)
+class Decorator extends Component<any, any> {
+  render () {
+    return <Val {...this.props.foo} />
+  }
+}
+
+storiesOf('Inversion/Counter', module)
+  .add('Documentation', () => h(ShowDocs, {name: 'Counter'}))
+  .add('FaCC', () =>
+    <Counter init={1}>{(props) => <Val {...props} />}</Counter>
+  )
+  .add('HOC 1', () => <Hoc1 />)
+  .add('HOC 2', () => <Hoc2 />)
+  .add('Decorator', () => <Decorator />);
diff --git a/src/Counter/index.ts b/src/Counter/index.ts
index b6cf1b8d..ef0cf564 100644
--- a/src/Counter/index.ts
+++ b/src/Counter/index.ts
@@ -10,12 +10,18 @@ export interface ICounterProps {
 export const Counter: React.StatelessComponent<ICounterProps> = (props) => {
   return h(Value, {
     init: props.init || 0,
-    render: ({value, set}) => renderProp(props, {
-      cnt: value,
-      set,
-      inc: (by: number = 1) => set(value + by)
-    })
+    render: (state) => renderProp(props, Object.assign(state, {
+      inc: (by: number = 1) => state.set(state.value + by)
+    }))
   });
 };
 
-export const withCounter = faccToHoc(Counter, 'counter');
+export const withCounter = (Comp, name?, init?) => {
+  const isClassDecoratorMethodCall = typeof Comp === 'string';
+
+  if (isClassDecoratorMethodCall) {
+    return faccToHoc(Counter, 'counter')(Comp, {init: name});
+  } else {
+    return faccToHoc(Counter, 'counter')(Comp, name, {init});
+  }
+};

From bb69ce0c0dcfa63240e86bedabf6b6d9641ee17c Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sat, 27 Jan 2018 19:39:17 +0000
Subject: [PATCH 45/78] docs: add <Counter> docs

---
 README.md                       |   2 +-
 docs/Counter.md                 | 101 ++++++++++++++++++++++++++++++++
 src/Counter/__story__/story.tsx |   4 +-
 src/Counter/index.ts            |   2 +-
 4 files changed, 105 insertions(+), 4 deletions(-)
 create mode 100644 docs/Counter.md

diff --git a/README.md b/README.md
index feef9069..b684cb8a 100644
--- a/README.md
+++ b/README.md
@@ -38,7 +38,7 @@ const MyComponent = mock();
         - [`<Toggle>`](./docs/Toggle.md), [`withToggle()`](./docs/Toggle.md#withtoggle-hoc), and [`@withToggle`](./docs/Toggle.md#withtoggle-decorator)
         - [`<Flipflop>`](./docs/Flipflop.md), [`withFlipflop()`](./docs/Flipflop.md#withflipflop-hoc), and [`@withFlipflop`](./docs/Flipflop.md#withflipflop-decorator)
         - [`<Value>`](./docs/Value.md), [`withValue()`](./docs/Value.md#withvalue-hoc), and [`@withValue`](./docs/Value.md#withvalue-decorator)
-        - `<Counter>`, `withCounter()` and `@withCounter`
+        - [`<Counter>`](./docs/Counter.md), [`withCounter()`](./docs/Counter.md#withcounter-hoc) and [`@withCounter`](./docs/Counter.md#withcounter-decorator)
         - `<List>`, `withList()`, and `@withList`
         - `<Map>`, `withMap()`, and `@withMap`
   - Sensors
diff --git a/docs/Counter.md b/docs/Counter.md
new file mode 100644
index 00000000..34fed616
--- /dev/null
+++ b/docs/Counter.md
@@ -0,0 +1,101 @@
+# `<Counter>`
+
+Allows you to keep a state of a counter value. Is similar to [`<Value>`](./Value.md) but its
+value is cast to `number` and you have an extra `inc(by = 1)` method that will increment your counter.
+
+## Usage
+
+```jsx
+import {Counter} from 'libreact/lib/Counter';
+
+<Counter>{({value, set, inc}) =>
+  <div onClick={() => inc(2))} onDoubleClick={() => set(0)}>
+    {value}
+  <div>
+}</Counter>
+```
+
+## Props
+
+Signature
+
+```ts
+interface ICounterProps {
+  init?: number;
+}
+```
+
+, where
+
+  - `init` - optional, number, default value.
+
+
+## `withCounter()` HOC
+
+HOC that merges `counter` prop into enhanced component's props.
+
+```jsx
+import {withCounter} from 'libreact/lib/Counter';
+
+const MyCompWithCounter = withCounter(MyComp);
+```
+
+You can overwrite the injected prop name
+
+```js
+const MyCompWithCounter = withCounter(MyComp, 'foobar');
+```
+
+Or simply merge the whole object into your props
+
+```js
+const MyCompWithCounter = withCounter(MyComp, '');
+```
+
+Set default value
+
+```js
+const MyCompWithCounter = withCounter(MyComp, '', -123);
+```
+
+
+
+## `@withCounter` decorator
+
+React stateful component decorator that adds `counter` prop.
+
+```js
+import {withCounter} from 'libreact/lib/Counter';
+
+@withCounter
+class MyComp extends Component {
+
+}
+```
+
+Specify different prop name
+
+```js
+@withCounter('foobar')
+class MyComp extends Component {
+
+}
+```
+
+or merge the the whole object into props
+
+```js
+@withCounter('')
+class MyComp extends Component {
+
+}
+```
+
+set starting value
+
+```js
+@withCounter('', 123)
+class MyComp extends Component {
+
+}
+```
\ No newline at end of file
diff --git a/src/Counter/__story__/story.tsx b/src/Counter/__story__/story.tsx
index 84a8f668..d3059165 100644
--- a/src/Counter/__story__/story.tsx
+++ b/src/Counter/__story__/story.tsx
@@ -5,8 +5,8 @@ import {linkTo} from '@storybook/addon-links';
 import {Counter, withCounter} from '..';
 import ShowDocs from '../../../.storybook/ShowDocs'
 
-const Val = ({value, inc}) =>
-    <div onClick={(e) => inc(3)}>{value}</div>;
+const Val = ({value, inc, set}) =>
+    <div onClick={(e) => inc(3)} onDoubleClick={inc}>{value}</div>;
 
 const Hoc1 = withCounter(({counter}) => h(Val, counter));
 const Hoc2 = withCounter(Val, '', -5);
diff --git a/src/Counter/index.ts b/src/Counter/index.ts
index ef0cf564..07b3b086 100644
--- a/src/Counter/index.ts
+++ b/src/Counter/index.ts
@@ -11,7 +11,7 @@ export const Counter: React.StatelessComponent<ICounterProps> = (props) => {
   return h(Value, {
     init: props.init || 0,
     render: (state) => renderProp(props, Object.assign(state, {
-      inc: (by: number = 1) => state.set(state.value + by)
+      inc: (by: number = 1) => state.set(state.value + (+by || 0))
     }))
   });
 };

From e2c689537a78ff7e01808ea98d446f4e79a99df0 Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sat, 27 Jan 2018 19:47:42 +0000
Subject: [PATCH 46/78] docs: add Dummy docs

---
 docs/Dummies.md      | 16 ++++++++++++++++
 src/Counter/index.ts |  2 +-
 2 files changed, 17 insertions(+), 1 deletion(-)
 create mode 100644 docs/Dummies.md

diff --git a/docs/Dummies.md b/docs/Dummies.md
new file mode 100644
index 00000000..bfef27f9
--- /dev/null
+++ b/docs/Dummies.md
@@ -0,0 +1,16 @@
+# Dummies
+
+Dummies are empty *"shell"* components that don't contain the actual implementation.
+
+However, those dummies can be used as real React components and they will re-render
+automatically once they get implemented.
+
+Essentially you can create dummies, which will not add any size to your bundle, use them,
+but implement them with real component only when necessary.
+
+  - [`mock()`](./mock.md) - dummy that can be implemented using `.implement()` method.
+  - [`loadable()`](./loadable.md) - dummy that can be loaeded using `.load()` method.
+  - [`lazy()`](./lazy.md) - dummy that loads automatically when rendered for the first time.
+  - [`delayed()`](./delayed.md) - like `lazy()`, but its loading can be delayed further.
+  - [`viewport()`](./viewport.md) - dummy that is loaded automatically when it appears for
+  the first time in viewport.
diff --git a/src/Counter/index.ts b/src/Counter/index.ts
index 07b3b086..d9d7350b 100644
--- a/src/Counter/index.ts
+++ b/src/Counter/index.ts
@@ -8,7 +8,7 @@ export interface ICounterProps {
 }
 
 export const Counter: React.StatelessComponent<ICounterProps> = (props) => {
-  return h(Value, {
+  return Value({
     init: props.init || 0,
     render: (state) => renderProp(props, Object.assign(state, {
       inc: (by: number = 1) => state.set(state.value + (+by || 0))

From a48a00811aa57e845d2c08838256af44361c0513 Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sat, 27 Jan 2018 19:57:07 +0000
Subject: [PATCH 47/78] docs: improve inversion doc

---
 docs/Dummies.md   |  2 +-
 docs/inversion.md | 26 ++++++++++++++++++++++++++
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/docs/Dummies.md b/docs/Dummies.md
index bfef27f9..cb6b0270 100644
--- a/docs/Dummies.md
+++ b/docs/Dummies.md
@@ -9,7 +9,7 @@ Essentially you can create dummies, which will not add any size to your bundle,
 but implement them with real component only when necessary.
 
   - [`mock()`](./mock.md) - dummy that can be implemented using `.implement()` method.
-  - [`loadable()`](./loadable.md) - dummy that can be loaeded using `.load()` method.
+  - [`loadable()`](./loadable.md) - dummy that can be loaded using `.load()` method.
   - [`lazy()`](./lazy.md) - dummy that loads automatically when rendered for the first time.
   - [`delayed()`](./delayed.md) - like `lazy()`, but its loading can be delayed further.
   - [`viewport()`](./viewport.md) - dummy that is loaded automatically when it appears for
diff --git a/docs/inversion.md b/docs/inversion.md
index b259f676..fba947a5 100644
--- a/docs/inversion.md
+++ b/docs/inversion.md
@@ -1,4 +1,30 @@
+# Inversion
 
 > __*inversion*__
 >
 > the action of inverting something or the state of being inverted.
+
+Inversion is a technique where one injects state and/or life-cycle methods into render-prop/FaCC.
+
+This effectively allows you to have
+
+  1. State
+  2. Life-cycle methods
+  3. Refs to DOM elements
+  4. Other objects
+
+in JSX without having to write stateful React components.
+
+## Example
+
+A counter example, `cnt` increments by 1 on each click:
+
+```jsx
+<State init={{cnt: 0}}>
+  {({cnt}, set) =>
+    <div onClick={() => set({cnt: cnt + 1})}>
+      {cnt}
+    </div>
+  }
+<State>
+```

From a9ca5f0f114302238a60b1276730e727e948274e Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sat, 27 Jan 2018 22:02:53 +0000
Subject: [PATCH 48/78] feat: add <List>

---
 README.md                       |  2 +-
 docs/inversion.md               |  9 ++++++--
 src/Counter/__story__/story.tsx |  2 +-
 src/Counter/index.ts            | 12 ++--------
 src/List/__story__/story.tsx    | 41 +++++++++++++++++++++++++++++++++
 src/List/index.ts               | 25 ++++++++++++++++++++
 src/Value/__story__/story.tsx   |  2 +-
 src/Value/index.ts              | 22 ++++++++++++------
 8 files changed, 93 insertions(+), 22 deletions(-)
 create mode 100644 src/List/__story__/story.tsx
 create mode 100644 src/List/index.ts

diff --git a/README.md b/README.md
index b684cb8a..f9319887 100644
--- a/README.md
+++ b/README.md
@@ -29,7 +29,7 @@ const MyComponent = mock();
 ## Contents
 
   - Introduction
-  - Dummies
+  - [Dummies](./docs/Dummies.md)
      - [`mock()`](./docs/mock.md) and [`loadable()`](./docs/loadable.md)
      - [`lazy()`](./docs/lazy.md), [`delayed()`](./docs/delayed.md), and `viewport()`
   - [Inversion](./docs/inversion.md)
diff --git a/docs/inversion.md b/docs/inversion.md
index fba947a5..179c3a0e 100644
--- a/docs/inversion.md
+++ b/docs/inversion.md
@@ -13,11 +13,16 @@ This effectively allows you to have
   3. Refs to DOM elements
   4. Other objects
 
-in JSX without having to write stateful React components.
+in JSX tree without having to write stateful React components.
+
+  - [`invert()`](./invert.md) and [`<Inverted>`](./invert.md#inverted) - inverts DOM element `ref`.
+  - [`<State>`](./State.md) - inverts state and `.setState()` method.
+     - [`<Toggle>`](./Toggle.md), [`<Flipflop>`](./Flipflop.md), [`<Value>`](./Value.md), [`<Couter>`](./Counter.md), [`<List>`](./List.md), and [`<Map>`](./Map.md)
+
 
 ## Example
 
-A counter example, `cnt` increments by 1 on each click:
+A basic example, `cnt` is incremented by 1 on each click:
 
 ```jsx
 <State init={{cnt: 0}}>
diff --git a/src/Counter/__story__/story.tsx b/src/Counter/__story__/story.tsx
index d3059165..94ada0ef 100644
--- a/src/Counter/__story__/story.tsx
+++ b/src/Counter/__story__/story.tsx
@@ -6,7 +6,7 @@ import {Counter, withCounter} from '..';
 import ShowDocs from '../../../.storybook/ShowDocs'
 
 const Val = ({value, inc, set}) =>
-    <div onClick={(e) => inc(3)} onDoubleClick={inc}>{value}</div>;
+  <div onClick={(e) => inc(3)} onDoubleClick={inc}>{value}</div>;
 
 const Hoc1 = withCounter(({counter}) => h(Val, counter));
 const Hoc2 = withCounter(Val, '', -5);
diff --git a/src/Counter/index.ts b/src/Counter/index.ts
index d9d7350b..13adbe12 100644
--- a/src/Counter/index.ts
+++ b/src/Counter/index.ts
@@ -1,5 +1,5 @@
 import {h} from '../util';
-import {Value} from '../Value';
+import {Value, faccToHocInit} from '../Value';
 import renderProp from '../util/renderProp';
 import faccToHoc from '../util/faccToHoc';
 
@@ -16,12 +16,4 @@ export const Counter: React.StatelessComponent<ICounterProps> = (props) => {
   });
 };
 
-export const withCounter = (Comp, name?, init?) => {
-  const isClassDecoratorMethodCall = typeof Comp === 'string';
-
-  if (isClassDecoratorMethodCall) {
-    return faccToHoc(Counter, 'counter')(Comp, {init: name});
-  } else {
-    return faccToHoc(Counter, 'counter')(Comp, name, {init});
-  }
-};
+export const withCounter = faccToHocInit(Counter, 'counter');
diff --git a/src/List/__story__/story.tsx b/src/List/__story__/story.tsx
new file mode 100644
index 00000000..c75ab5c8
--- /dev/null
+++ b/src/List/__story__/story.tsx
@@ -0,0 +1,41 @@
+import {Component, createElement as h} from 'react';
+import {storiesOf} from '@storybook/react';
+import {action} from '@storybook/addon-actions';
+import {linkTo} from '@storybook/addon-links';
+import {List, withList} from '..';
+import ShowDocs from '../../../.storybook/ShowDocs'
+
+const Demo = ({value, push, filter, sort}) =>
+  <div>
+    <pre style={{fontFamily: 'monospace'}}>{JSON.stringify(value)}</pre>
+    <button onClick={() => push(0)}>push</button>
+    <button onClick={() => filter((i) => i > 0)}>filter</button>
+    <button onClick={() => sort()}>sort</button>
+  </div>;
+
+const Hoc1 = withList(({list}) => h(Demo, list));
+const Hoc2 = withList(Demo, '', [1, 2, 3]);
+
+@withList('foo', [1, 2, 3])
+class Decorator1 extends Component<any, any> {
+  render () {
+    return <Demo {...this.props.foo} />
+  }
+}
+
+@withList
+class Decorator2 extends Component<any, any> {
+  render () {
+    return <Demo {...this.props.list} />
+  }
+}
+
+storiesOf('Inversion/List', module)
+  .add('Documentation', () => h(ShowDocs, {name: 'List'}))
+  .add('FaCC', () =>
+    <List init={[1, 2, 3]}>{Demo}</List>
+  )
+  .add('HOC 1', () => <Hoc1 />)
+  .add('HOC 2', () => <Hoc2 />)
+  .add('Decorator 1', () => <Decorator1 />)
+  .add('Decorator 2', () => <Decorator2 />);
diff --git a/src/List/index.ts b/src/List/index.ts
new file mode 100644
index 00000000..3ffad6b7
--- /dev/null
+++ b/src/List/index.ts
@@ -0,0 +1,25 @@
+import {h} from '../util';
+import {Value, faccToHocInit} from '../Value';
+import renderProp from '../util/renderProp';
+import faccToHoc from '../util/faccToHoc';
+
+export interface IListProps {
+  init?: any[];
+}
+
+export const List: React.StatelessComponent<IListProps> = (props) => {
+  return Value({
+    init: Array.isArray(props.init) ? props.init : [],
+    render: (state) => {
+      const {value, set} = state;
+
+      return renderProp(props, Object.assign(state, {
+        push: (entry) => set([...value, entry]),
+        filter: (fn) => set(value.filter(fn)),
+        sort: (fn?) => set([...value].sort(fn))
+      }));
+    }
+  });
+};
+
+export const withList = faccToHocInit(List, 'list');
diff --git a/src/Value/__story__/story.tsx b/src/Value/__story__/story.tsx
index 81e74088..b1c1db09 100644
--- a/src/Value/__story__/story.tsx
+++ b/src/Value/__story__/story.tsx
@@ -8,7 +8,7 @@ import ShowDocs from '../../../.storybook/ShowDocs'
 const Val = ({value, set}) =>
     <input value={value} onChange={(e) => set(e.target.value)} />;
 
-const Hoc1 = withValue(({value}) => h(Val, value));
+const Hoc1 = withValue(({value}) => h(Val, value), 'value', 'default');
 // const Hoc2 = withToggle(Checkbox2);
 
 @withValue
diff --git a/src/Value/index.ts b/src/Value/index.ts
index 4b499a63..fadb1a43 100644
--- a/src/Value/index.ts
+++ b/src/Value/index.ts
@@ -14,13 +14,21 @@ export const Value: React.StatelessComponent<IValueProps> = (props) => {
     init: {
       value: props.init
     },
-    render: ({value}, set) => {
-      return renderProp(props, {
-        value,
-        set: (value) => set({value})
-      });
-    }
+    render: ({value}, set) => renderProp(props, {
+      value,
+      set: (value) => set({value})
+    })
   });
 };
 
-export const withValue = faccToHoc(Value, 'value');
+export const faccToHocInit = (Facc, name) => (Comp, name2?, init?) => {
+  const isClassDecoratorMethodCall = typeof Comp === 'string';
+
+    if (isClassDecoratorMethodCall) {
+      return faccToHoc(Facc, name)(Comp, {init: name2});
+    } else {
+      return faccToHoc(Facc, name)(Comp, name2, {init});
+    }
+};
+
+export const withValue = faccToHocInit(Value, 'value');

From d769425ce56e5d366390dd1c68bb438390d2a288 Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sat, 27 Jan 2018 22:08:58 +0000
Subject: [PATCH 49/78] docs: add <List> reference

---
 README.md        |   2 +-
 docs/List.md     | 103 +++++++++++++++++++++++++++++++++++++++++++++++
 src/Map/index.ts |  27 +++++++++++++
 3 files changed, 131 insertions(+), 1 deletion(-)
 create mode 100644 docs/List.md
 create mode 100644 src/Map/index.ts

diff --git a/README.md b/README.md
index f9319887..09d438f3 100644
--- a/README.md
+++ b/README.md
@@ -39,7 +39,7 @@ const MyComponent = mock();
         - [`<Flipflop>`](./docs/Flipflop.md), [`withFlipflop()`](./docs/Flipflop.md#withflipflop-hoc), and [`@withFlipflop`](./docs/Flipflop.md#withflipflop-decorator)
         - [`<Value>`](./docs/Value.md), [`withValue()`](./docs/Value.md#withvalue-hoc), and [`@withValue`](./docs/Value.md#withvalue-decorator)
         - [`<Counter>`](./docs/Counter.md), [`withCounter()`](./docs/Counter.md#withcounter-hoc) and [`@withCounter`](./docs/Counter.md#withcounter-decorator)
-        - `<List>`, `withList()`, and `@withList`
+        - [`<List>`](./docs/List.md), [`withList()`](./docs/List.md#withlist-hoc), and [`@withList`](./docs/List.md#withlist-decorator)
         - `<Map>`, `withMap()`, and `@withMap`
   - Sensors
      - [`<BatterySensor>`](./docs/BatterySensor.md), [`withBattery()`](./docs/BatterySensor.md#withbattery), and [`@withBattery`](./docs/BatterySensor.md#withbattery-1)
diff --git a/docs/List.md b/docs/List.md
new file mode 100644
index 00000000..d16ad10e
--- /dev/null
+++ b/docs/List.md
@@ -0,0 +1,103 @@
+# `<List>`
+
+Gives you an array as a state.
+
+## Usage
+
+```jsx
+import {List} from 'libreact/lib/List';
+
+<List init={[1, 2, 3]}>{({value, set, push, filter, sort}) =>
+  <div>
+    <pre style={{fontFamily: 'monospace'}}>{JSON.stringify(value)}</pre>
+    <button onClick={() => push(0)}>push</button>
+    <button onClick={() => filter((i) => i > 0)}>filter</button>
+    <button onClick={() => sort()}>sort</button>
+  </div>
+}</List>
+```
+
+## Props
+
+Signature
+
+```ts
+interface IListProps {
+  init?: any[];
+}
+```
+
+, where
+
+  - `init` - optional, array of any values.
+
+
+## `withList()` HOC
+
+HOC that merges `list` prop into enhanced component's props.
+
+```jsx
+import {withList} from 'libreact/lib/List';
+
+const MyCompWithList = withList(MyComp);
+```
+
+You can overwrite the injected prop name
+
+```js
+const MyCompWithList = withList(MyComp, 'foobar');
+```
+
+Or simply merge the whole object into your props
+
+```js
+const MyCompWithList = withList(MyComp, '');
+```
+
+Set default value
+
+```js
+const MyCompWithList = withList(MyComp, '', [1, 2, 3]);
+```
+
+
+
+## `@withList` decorator
+
+React stateful component decorator that adds `list` prop.
+
+```js
+import {withList} from 'libreact/lib/List';
+
+@withList
+class MyComp extends Component {
+
+}
+```
+
+Specify different prop name
+
+```js
+@withList('foobar')
+class MyComp extends Component {
+
+}
+```
+
+or merge the the whole object into props
+
+```js
+@withList('')
+class MyComp extends Component {
+
+}
+```
+
+set starting value
+
+```js
+@withList('', [1, 2, 3])
+class MyComp extends Component {
+
+}
+```
diff --git a/src/Map/index.ts b/src/Map/index.ts
new file mode 100644
index 00000000..4b09da82
--- /dev/null
+++ b/src/Map/index.ts
@@ -0,0 +1,27 @@
+import {h} from '../util';
+import {State} from '../State';
+import renderProp from '../util/renderProp';
+import faccToHoc from '../util/faccToHoc';
+
+export interface IMapProps {
+  init?: {[key: string]: any};
+}
+
+export const Map: React.StatelessComponent<IMapProps> = (props) => {
+  return h(State, {
+    init: props.init && (typeof props.init === 'object') ? props.init : [],
+    render: (state, set) => renderProp(props, {
+      get: (key) => state[key],
+      set: (key, value) => set({
+        ...state,
+        [key]: value
+      }),
+      remove: (key) => {
+        const {[key]: omit, ...rest} = state;
+        set(rest);
+      }
+    })
+  });
+};
+
+export const withMap = faccToHoc(Map, 'map');

From 8e6a46b723a8b7a999b97d114ac56540eec0cb51 Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sat, 27 Jan 2018 22:37:59 +0000
Subject: [PATCH 50/78] fix: change internals of <Map>

Use a key of React components state rather than the whole state object
for the map, because .replaceState() method was removed from React and
there is no good way to remove properties from map using native state.
---
 src/Map/__story__/story.tsx | 41 +++++++++++++++++++++++++++++++++++++
 src/Map/index.ts            | 20 +++++++++---------
 2 files changed, 51 insertions(+), 10 deletions(-)
 create mode 100644 src/Map/__story__/story.tsx

diff --git a/src/Map/__story__/story.tsx b/src/Map/__story__/story.tsx
new file mode 100644
index 00000000..6b43a705
--- /dev/null
+++ b/src/Map/__story__/story.tsx
@@ -0,0 +1,41 @@
+import {Component, createElement as h} from 'react';
+import {storiesOf} from '@storybook/react';
+import {action} from '@storybook/addon-actions';
+import {linkTo} from '@storybook/addon-links';
+import {Map, withMap} from '..';
+import ShowDocs from '../../../.storybook/ShowDocs'
+
+const Demo = ({get, set, remove}) =>
+  <div>
+    <div>a: {get('a')}</div>
+    <pre style={{fontFamily: 'monospace'}}>{JSON.stringify(get())}</pre>
+    <button onClick={() => set('a', 'b')}>set('a', 'b')</button>
+    <button onClick={() => remove('a')}>remove('a')</button>
+  </div>;
+
+const Hoc1 = withMap(({map}) => h(Demo, map));
+const Hoc2 = withMap(Demo, '', {c: 'd'});
+
+@withMap('foo', {c: 'd'})
+class Decorator1 extends Component<any, any> {
+  render () {
+    return <Demo {...this.props.foo} />
+  }
+}
+
+@withMap
+class Decorator2 extends Component<any, any> {
+  render () {
+    return <Demo {...this.props.map} />
+  }
+}
+
+storiesOf('Inversion/Map', module)
+  .add('Documentation', () => h(ShowDocs, {name: 'Map'}))
+  .add('FaCC', () =>
+    <Map init={{c: 'd'}}>{Demo}</Map>
+  )
+  .add('HOC 1', () => <Hoc1 />)
+  .add('HOC 2', () => <Hoc2 />)
+  .add('Decorator 1', () => <Decorator1 />)
+  .add('Decorator 2', () => <Decorator2 />);
diff --git a/src/Map/index.ts b/src/Map/index.ts
index 4b09da82..22fc1f80 100644
--- a/src/Map/index.ts
+++ b/src/Map/index.ts
@@ -1,27 +1,27 @@
 import {h} from '../util';
 import {State} from '../State';
 import renderProp from '../util/renderProp';
-import faccToHoc from '../util/faccToHoc';
+import {Value, faccToHocInit} from '../Value';
 
 export interface IMapProps {
   init?: {[key: string]: any};
 }
 
 export const Map: React.StatelessComponent<IMapProps> = (props) => {
-  return h(State, {
-    init: props.init && (typeof props.init === 'object') ? props.init : [],
-    render: (state, set) => renderProp(props, {
-      get: (key) => state[key],
-      set: (key, value) => set({
-        ...state,
-        [key]: value
+  return Value({
+    init: props.init && (typeof props.init === 'object') ? props.init : {},
+    render: ({value, set}) => renderProp(props, {
+      get: (key?) => key ? value[key] : value,
+      set: (key, entry) => set({
+        ...value,
+        [key]: entry
       }),
       remove: (key) => {
-        const {[key]: omit, ...rest} = state;
+        const {[key]: omit, ...rest} = value;
         set(rest);
       }
     })
   });
 };
 
-export const withMap = faccToHoc(Map, 'map');
+export const withMap = faccToHocInit(Map, 'map');

From ee72d8f1944df28a1ebb5b65c464b9636e726b7e Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sat, 27 Jan 2018 22:43:56 +0000
Subject: [PATCH 51/78] docs: add <Map> reference

---
 README.md   |   2 +-
 docs/Map.md | 103 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 104 insertions(+), 1 deletion(-)
 create mode 100644 docs/Map.md

diff --git a/README.md b/README.md
index 09d438f3..c9cdd1df 100644
--- a/README.md
+++ b/README.md
@@ -40,7 +40,7 @@ const MyComponent = mock();
         - [`<Value>`](./docs/Value.md), [`withValue()`](./docs/Value.md#withvalue-hoc), and [`@withValue`](./docs/Value.md#withvalue-decorator)
         - [`<Counter>`](./docs/Counter.md), [`withCounter()`](./docs/Counter.md#withcounter-hoc) and [`@withCounter`](./docs/Counter.md#withcounter-decorator)
         - [`<List>`](./docs/List.md), [`withList()`](./docs/List.md#withlist-hoc), and [`@withList`](./docs/List.md#withlist-decorator)
-        - `<Map>`, `withMap()`, and `@withMap`
+        - [`<Map>`](./docs/Map.md), [`withMap()`](./docs/Map.md#withmap-hoc), and [`@withMap`](./docs/Map.md#withmap-decorator)
   - Sensors
      - [`<BatterySensor>`](./docs/BatterySensor.md), [`withBattery()`](./docs/BatterySensor.md#withbattery), and [`@withBattery`](./docs/BatterySensor.md#withbattery-1)
      - [`<MediaDeviceSensor>`](./docs/MediaDeviceSensor.md), [`withMediaDevices()`](./docs/MediaDeviceSensor.md#withmediadevices), and [`@withMediaDevices`](./docs/MediaDeviceSensor.md#withmediadevices-1)
diff --git a/docs/Map.md b/docs/Map.md
new file mode 100644
index 00000000..9f8c51b1
--- /dev/null
+++ b/docs/Map.md
@@ -0,0 +1,103 @@
+# `<Map>`
+
+Gives you a map as a state.
+
+## Usage
+
+```jsx
+import {Map} from 'libreact/lib/Map';
+
+<Map init={{c: 'd'}}>{({value, set, push, filter, sort}) =>
+  <div>
+    <div>a: {get('a')}</div>
+    <pre style={{fontFamily: 'monospace'}}>{JSON.stringify(get())}</pre>
+    <button onClick={() => set('a', 'b')}>set('a', 'b')</button>
+    <button onClick={() => remove('a')}>remove('a')</button>
+  </div>
+}</Map>
+```
+
+## Props
+
+Signature
+
+```ts
+interface IMapProps {
+  init?: {[key: string]: any};
+}
+```
+
+, where
+
+  - `init` - optional, map of initial values.
+
+
+## `withMap()` HOC
+
+HOC that merges `map` prop into enhanced component's props.
+
+```jsx
+import {withMap} from 'libreact/lib/Map';
+
+const MyCompWithMap = withMap(MyComp);
+```
+
+You can overwrite the injected prop name
+
+```js
+const MyCompWithMap = withMap(MyComp, 'foobar');
+```
+
+Or simply merge the whole object into your props
+
+```js
+const MyCompWithMap = withMap(MyComp, '');
+```
+
+Set default value
+
+```js
+const MyCompWithMap = withMap(MyComp, '', {foo: 'bar'});
+```
+
+
+
+## `@withMap` decorator
+
+React stateful component decorator that adds `map` prop.
+
+```js
+import {withMap} from 'libreact/lib/Map';
+
+@withMap
+class MyComp extends Component {
+
+}
+```
+
+Specify different prop name
+
+```js
+@withMap('foobar')
+class MyComp extends Component {
+
+}
+```
+
+or merge the the whole object into props
+
+```js
+@withMap('')
+class MyComp extends Component {
+
+}
+```
+
+set starting value
+
+```js
+@withMap('', {foo: 'bar'})
+class MyComp extends Component {
+
+}
+```

From faac9b9feafaad8299ef011c6641aeab8c3efae3 Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sun, 28 Jan 2018 00:42:01 +0000
Subject: [PATCH 52/78] docs: add viewport() reference

---
 README.md                         |  4 +--
 docs/viewport.md                  | 45 +++++++++++++++++++++++++++++++
 src/ViewportScrollSensor/index.ts |  2 +-
 src/ViewportSensor/index.tsx      |  2 +-
 src/index.ts                      |  1 +
 src/mock.ts                       |  2 +-
 src/pixel.ts                      |  9 +++++++
 src/viewport.story.tsx            | 33 +++++++++++++++++++++++
 src/viewport.ts                   | 32 ++++++++++------------
 9 files changed, 107 insertions(+), 23 deletions(-)
 create mode 100644 docs/viewport.md
 create mode 100644 src/pixel.ts
 create mode 100644 src/viewport.story.tsx

diff --git a/README.md b/README.md
index c9cdd1df..0307d6c8 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@
 
 [![][npm-badge]][npm-url] [![][travis-badge]][travis-url]
 
-React standard library, must-have toolbox for any React project.
+React standard library &mdash; must-have toolbox for any React project.
 
   - Collection of React sensors, FaCCs, render props, HOCs, context providers, dummies, and [other goodies](#contents).
   - *Isomorphic* - all components work in browser and on server (and some in `react-native`).
@@ -31,7 +31,7 @@ const MyComponent = mock();
   - Introduction
   - [Dummies](./docs/Dummies.md)
      - [`mock()`](./docs/mock.md) and [`loadable()`](./docs/loadable.md)
-     - [`lazy()`](./docs/lazy.md), [`delayed()`](./docs/delayed.md), and `viewport()`
+     - [`lazy()`](./docs/lazy.md), [`delayed()`](./docs/delayed.md), and [`viewport()`](./docs/viewport.md)
   - [Inversion](./docs/inversion.md)
      - [`invert()`](./docs/invert.md) and [`<Inverted>`](./docs/invert.md#inverted)
      - [`<State>`](./docs/State.md) and [`withState()`](./docs/State.md#withstate-hoc)
diff --git a/docs/viewport.md b/docs/viewport.md
new file mode 100644
index 00000000..2c76f3f9
--- /dev/null
+++ b/docs/viewport.md
@@ -0,0 +1,45 @@
+# `viewport()`
+
+Displays your component only after it appears in the viewport.
+
+Before your component has appeared in viewport at least once it displays
+a placeholder, which defaults to a transparent 1x1 pixel.
+
+`viewport()` is component enhancer with the following signature.
+
+```ts
+viewport: (Comp, params: IViewportParams) => React.ComponentClass;
+
+interface IViewportParams {
+  placeholder: React.ReactElement;
+}
+```
+
+, where
+
+  - `placeholder` - React element to render while this component is out of viewport.
+
+
+## Usage
+
+```jsx
+import {viewport} from 'libreact/lib/viewport';
+
+const MyCompEnhanced = viewport(MyComp);
+```
+
+## Example
+
+Here we create a lazy loaded component, which is loaded only when it appears in the viewport.
+
+```jsx
+import {delayed} from 'libreact/lib/delayed';
+import {viewport} from 'libreact/lib/viewport';
+
+
+const loader = () => import('./MyComp');
+const MyCompDelayed = delayed({loader});
+const MyCompOnViewport = viewport(MyCompDelayed);
+
+<MyCompOnViewport />
+```
diff --git a/src/ViewportScrollSensor/index.ts b/src/ViewportScrollSensor/index.ts
index 116c1b46..f68c1383 100644
--- a/src/ViewportScrollSensor/index.ts
+++ b/src/ViewportScrollSensor/index.ts
@@ -60,7 +60,7 @@ export interface IViewportScrollSensorState {
 export class ViewportScrollSensor extends Component<IViewportScrollSensorProps, IViewportScrollSensorState> {
   static defaultProps = {
     threshold: 0,
-    throttle: 150,
+    throttle: 50,
     margin: [0, 0, 0, 0]
   };
 
diff --git a/src/ViewportSensor/index.tsx b/src/ViewportSensor/index.tsx
index a9a8ed46..1c4678ac 100644
--- a/src/ViewportSensor/index.tsx
+++ b/src/ViewportSensor/index.tsx
@@ -5,7 +5,7 @@ import faccToHoc, {divWrapper} from '../util/faccToHoc';
 
 let Sensor: any = ViewportObserverSensor;
 
-if (('IntersectionObserver' in window)) {
+if (!(window as any).IntersectionObserver) {
   const loader = () => import('../ViewportScrollSensor').then((module) => module.ViewportScrollSensor);
 
   Sensor = loadable({loader});
diff --git a/src/index.ts b/src/index.ts
index 7db49799..11b784cc 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -5,6 +5,7 @@ export * from './mock';
 export * from './loadable';
 export * from './lazy';
 export * from './delayed';
+export * from './viewport';
 export * from './invert';
 
 // Sensors
diff --git a/src/mock.ts b/src/mock.ts
index e22a7900..e4747ef6 100644
--- a/src/mock.ts
+++ b/src/mock.ts
@@ -8,7 +8,7 @@ export interface IMockComponent<TProps> {
 }
 
 export interface IMockParams<TProps> {
-  loading?: React.ReactElement<TProps> | React.SFC<TProps>;
+  loading?: React.ReactElement<any> | React.SFC<TProps>;
 }
 
 export type TMock = <TProps>(params?: IMockParams<TProps>) => IMockComponent<TProps>;
diff --git a/src/pixel.ts b/src/pixel.ts
new file mode 100644
index 00000000..c7b9fd0d
--- /dev/null
+++ b/src/pixel.ts
@@ -0,0 +1,9 @@
+import {h} from './util';
+
+export const pixel = h('div', {
+  style: {
+    width: 1,
+    height: 1,
+    overflow: 'hidden',
+  }
+});
diff --git a/src/viewport.story.tsx b/src/viewport.story.tsx
new file mode 100644
index 00000000..1933b80b
--- /dev/null
+++ b/src/viewport.story.tsx
@@ -0,0 +1,33 @@
+import {Component, createElement as h} from 'react';
+import {storiesOf} from '@storybook/react';
+import {action} from '@storybook/addon-actions';
+import {linkTo} from '@storybook/addon-links';
+import {delayed} from './delayed';
+import {viewport} from './viewport';
+import ShowDocs from '../.storybook/ShowDocs'
+
+
+const Loaded = () => <div>LOADED</div>;
+const Loadable = delayed({
+  loading: <div>Loading....</div>,
+  loader: () => Promise.resolve(Loaded),
+  delay: 1000
+});
+
+const MyComp = viewport(Loadable);
+
+const Demo1 = () =>
+  <div>
+    <div style={{width: 800, height: 1200, border: '1px solid tomato'}} />
+    <MyComp />
+  </div>;
+
+const Demo2 = () =>
+  <div>
+    <MyComp />
+  </div>;
+
+storiesOf('Dummies/viewport()', module)
+  .add('Documentation', () => h(ShowDocs, {name: 'viewport'}))
+  .add('Example', () => h(Demo1))
+  .add('Shows when visible', () => h(Demo2));
diff --git a/src/viewport.ts b/src/viewport.ts
index 043bff4c..0dc22867 100644
--- a/src/viewport.ts
+++ b/src/viewport.ts
@@ -1,33 +1,29 @@
 import {Component} from 'react';
 import {h} from './util';
 import {ViewportSensor} from './ViewportSensor';
-import {loadable} from './loadable';
+import {pixel} from './pixel';
 
-export const viewport = (params) => {
-  const {Loadable} = params;
+export interface IViewportParams {
+  placeholder: React.ReactElement<any>;
+}
 
-  const Viewport = class Viewport extends Component<any, any> {
-    state = {
-      flipped: false
-    };
+export type TViewport = <P>(Comp: React.StatelessComponent<P> | React.ComponentClass<P>, params: IViewportParams) => React.ComponentClass<P>;
+
+export const viewport = (Comp, {placeholder = pixel} = {}) => {
+  let flipped = false;
 
+  const Viewport = class Viewport extends Component<any, any> {
     onChange = () => {
-      Loadable.load();
-      this.setState({
-        flipped: true
-      });
+      flipped = true;
+      this.forceUpdate();
     };
 
     render () {
-      const {flipped} = this.state;
-
       return flipped ?
-        h(Loadable, this.props) :
-        h(ViewportSensor, {onChange: this.onChange},
-          h('div')
-        );
+        h(Comp, this.props) :
+        h(ViewportSensor, {onChange: this.onChange}, placeholder)
     }
-  };
+  }
 
   return Viewport;
 };

From aae9ccb63fdfff9b9e1265c28867ac7f1ff17d0c Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sun, 28 Jan 2018 01:25:51 +0000
Subject: [PATCH 53/78] feat: add <MouseSensor> component

---
 docs/Dummies.md          |   6 +-
 package.json             |   3 +-
 src/MouseSensor/index.ts | 127 +++++++++++++++++++++++++++++++++++++++
 3 files changed, 132 insertions(+), 4 deletions(-)
 create mode 100644 src/MouseSensor/index.ts

diff --git a/docs/Dummies.md b/docs/Dummies.md
index cb6b0270..ae99f950 100644
--- a/docs/Dummies.md
+++ b/docs/Dummies.md
@@ -6,11 +6,11 @@ However, those dummies can be used as real React components and they will re-ren
 automatically once they get implemented.
 
 Essentially you can create dummies, which will not add any size to your bundle, use them,
-but implement them with real component only when necessary.
+but implement them with real components only later when necessary.
 
   - [`mock()`](./mock.md) - dummy that can be implemented using `.implement()` method.
   - [`loadable()`](./loadable.md) - dummy that can be loaded using `.load()` method.
   - [`lazy()`](./lazy.md) - dummy that loads automatically when rendered for the first time.
   - [`delayed()`](./delayed.md) - like `lazy()`, but its loading can be delayed further.
-  - [`viewport()`](./viewport.md) - dummy that is loaded automatically when it appears for
-  the first time in viewport.
+  - [`viewport()`](./viewport.md) - postpones component's rendering until it is visible
+  in viewport at least once.
diff --git a/package.json b/package.json
index a6e6629e..64cd7ac9 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,8 @@
     "throttle-debounce": "^1.0.1",
     "freestyler-context": "^1.3.3",
     "freestyler-renderer": "^1.3.2",
-    "screenfull": "^3.3.2"
+    "screenfull": "^3.3.2",
+    "fast-extend": "0.0.2"
   },
   "peerDependencies": {
     "react": "15",
diff --git a/src/MouseSensor/index.ts b/src/MouseSensor/index.ts
new file mode 100644
index 00000000..fd21282d
--- /dev/null
+++ b/src/MouseSensor/index.ts
@@ -0,0 +1,127 @@
+import {Component, Children, cloneElement} from 'react';
+import {h, noop} from '../util';
+import renderProp from '../util/renderProp';
+import {extend} from 'fast-extend';
+
+export interface IMouseSensorProps {
+  children?: (state: IMouseSensorState) => React.ReactElement<any>;
+  render?: (state: IMouseSensorState) => React.ReactElement<any>;
+  onMouse,
+  onMouseEnter,
+  onMouseLeave
+  whenHovered
+}
+
+export interface IMouseSensorState {
+  docX: number;
+  docY: number;
+  posX: number;
+  posY: number;
+  elH: number;
+  elW: number;
+  elX: number;
+  elY: number;
+}
+
+export class MouseSensor extends Component<IMouseSensorProps, IMouseSensorState> {
+  static defaultProps = {
+    onMouseEnter: noop,
+    onMouseLeave: noop,
+    whenHovered: true
+  };
+
+  state: IMouseSensorState = {
+    docX: 0,
+    docY: 0,
+    posX: 0,
+    posY: 0,
+    elH: 0,
+    elW: 0,
+    elX: 0,
+    elY: 0
+  };
+
+  el: HTMLElement = null;
+  frame = null;
+
+  ref = (originalRef) => (el) => {
+    this.el = el;
+    (originalRef || noop)(el);
+  };
+
+  componentDidMount () {
+    if (!this.props.whenHovered) {
+      this.bindEvents();
+    }
+  }
+
+  componentWillUnmount () {
+    this.unbindEvents();
+  }
+
+  bindEvents () {
+    document.addEventListener('mousemove', this.onDocMouseMove);
+  }
+
+  unbindEvents () {
+    document.removeEventListener('mousemove', this.onDocMouseMove);
+  }
+
+  onDocMouseMove = (event) => {
+    const {el} = this;
+
+    if (!el) {
+      return;
+    }
+
+    cancelAnimationFrame(this.frame);
+    this.frame = requestAnimationFrame(() => {
+      const {left, top} = el.getBoundingClientRect();
+      const posX = left + window.scrollX;
+      const posY = top + window.scrollY;
+
+      this.setState({
+        docX: event.pageX,
+        docY: event.pageY,
+        posX,
+        posY,
+        elH: el.offsetHeight,
+        elW: el.offsetWidth,
+        elX: event.pageX - posX,
+        elY: event.pageY - posY
+      });
+    });
+  };
+
+  onMouseEnter = (originalOnMouseMove) => (event) => {
+    if (this.props.whenHovered) {
+      this.bindEvents();
+    }
+    (originalOnMouseMove || noop)(event);
+  };
+
+  onMouseLeave = (originalOnMouseMove) => (event) => {
+    if (this.props.whenHovered) {
+      this.unbindEvents();
+    }
+    (originalOnMouseMove || noop)(event);
+  };
+
+  render () {
+    const element = renderProp(this.props, this.state);
+
+    let newProps: any = {
+      ...element.props,
+      ref: this.ref(element.ref)
+    };
+
+    if (this.props.whenHovered) {
+      const {onMouseEnter, onMouseLeave} = element.props;
+
+      newProps.onMouseEnter = this.onMouseEnter(onMouseEnter);
+      newProps.onMouseLeave = this.onMouseLeave(onMouseLeave);
+    }
+
+    return cloneElement(element, newProps);
+  }
+}

From 46a0804691ef265d73ad57740054feae156b3ef4 Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sun, 28 Jan 2018 01:35:23 +0000
Subject: [PATCH 54/78] test: add <MouseSensor> story

---
 src/MouseSensor/__story__/story.tsx | 23 +++++++++++++++++++++++
 src/MouseSensor/index.ts            | 13 ++-----------
 src/Toggle/__story__/story.tsx      |  2 --
 3 files changed, 25 insertions(+), 13 deletions(-)
 create mode 100644 src/MouseSensor/__story__/story.tsx

diff --git a/src/MouseSensor/__story__/story.tsx b/src/MouseSensor/__story__/story.tsx
new file mode 100644
index 00000000..23b3271e
--- /dev/null
+++ b/src/MouseSensor/__story__/story.tsx
@@ -0,0 +1,23 @@
+import {Component, createElement as h} from 'react';
+import {storiesOf} from '@storybook/react';
+import {action} from '@storybook/addon-actions';
+import {linkTo} from '@storybook/addon-links';
+import {MouseSensor} from '..';
+import ShowDocs from '../../../.storybook/ShowDocs'
+
+storiesOf('Sensors/MouseSensor', module)
+  .add('Documentation', () => h(ShowDocs, {name: 'MouseSensor'}))
+  .add('Example', () =>
+    <MouseSensor>{(state) =>
+      <div style={{
+        width: 300,
+        height: 300,
+        border: '1px solid tomato',
+        margin: '100px'
+      }}>
+        <pre style={{fontFamily: 'monospace'}}>
+          {JSON.stringify(state, null, 4)}
+        </pre>
+      </div>
+    }</MouseSensor>
+  );
diff --git a/src/MouseSensor/index.ts b/src/MouseSensor/index.ts
index fd21282d..5d36269c 100644
--- a/src/MouseSensor/index.ts
+++ b/src/MouseSensor/index.ts
@@ -6,10 +6,7 @@ import {extend} from 'fast-extend';
 export interface IMouseSensorProps {
   children?: (state: IMouseSensorState) => React.ReactElement<any>;
   render?: (state: IMouseSensorState) => React.ReactElement<any>;
-  onMouse,
-  onMouseEnter,
-  onMouseLeave
-  whenHovered
+  whenHovered?: boolean;
 }
 
 export interface IMouseSensorState {
@@ -24,12 +21,6 @@ export interface IMouseSensorState {
 }
 
 export class MouseSensor extends Component<IMouseSensorProps, IMouseSensorState> {
-  static defaultProps = {
-    onMouseEnter: noop,
-    onMouseLeave: noop,
-    whenHovered: true
-  };
-
   state: IMouseSensorState = {
     docX: 0,
     docY: 0,
@@ -115,7 +106,7 @@ export class MouseSensor extends Component<IMouseSensorProps, IMouseSensorState>
       ref: this.ref(element.ref)
     };
 
-    if (this.props.whenHovered) {
+    if (!this.props.whenHovered) {
       const {onMouseEnter, onMouseLeave} = element.props;
 
       newProps.onMouseEnter = this.onMouseEnter(onMouseEnter);
diff --git a/src/Toggle/__story__/story.tsx b/src/Toggle/__story__/story.tsx
index 205cd5b0..55ccc162 100644
--- a/src/Toggle/__story__/story.tsx
+++ b/src/Toggle/__story__/story.tsx
@@ -11,8 +11,6 @@ const Checkbox = ({on, toggle}) =>
     Toggle me!
   </div>;
 
-
-
 const Checkbox2 = ({toggle}) => h(Checkbox, toggle);
 
 const Hoc1 = withToggle(Checkbox, '', {init: true});

From 9d7abb4481b10b008259690252e5067f4f092109 Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sun, 28 Jan 2018 02:18:58 +0000
Subject: [PATCH 55/78] test: add <MouseSensor> story

---
 README.md                           |  6 +--
 src/MouseSensor/__story__/story.tsx | 58 ++++++++++++++++++++--------
 src/MouseSensor/index.ts            | 60 +++++++++++++++++++++--------
 src/util/faccToHoc.ts               |  7 +---
 4 files changed, 91 insertions(+), 40 deletions(-)

diff --git a/README.md b/README.md
index 0307d6c8..3e5112fb 100644
--- a/README.md
+++ b/README.md
@@ -56,9 +56,9 @@ const MyComponent = mock();
         - [`<ViewportScrollSensor>`](./docs/ViewportSensor.md#viewportscrollsensor) and [`<ViewportObserverSensor>`](./docs/ViewportSensor.md#viewportobserversensor)
      - [`<WindowScrollSensor>`](./docs/WindowScrollSensor.md), `withWindowScroll()`, and `@withWindowScroll`
      - [`<WindowSizeSensor>`](./docs/WindowSizeSensor.md), `withWindowSize()`, and `@withWindowSize`
-     - `<MotionSensor>`
-     - `<MouseSensor>`
-     - `<GeoPositionSensor>`
+     - `<MotionSensor>`, `withMotion()`, and `@withMotion`
+     - `<MouseSensor>`, `withMouse()`, and `@withMouse`
+     - `<GeoPositionSensor>`, `withGeoPosition()`, and `@withGeoPosition`
   - Generators
      - [`<Audio>`](./docs/Audio.md), [`<Video>`](./docs/Video.md), and `<Media>`
      - [`<LocalStorage>`](./docs/LocalStorage.md), `<SessionStorage>`, `<IndexedDb>`
diff --git a/src/MouseSensor/__story__/story.tsx b/src/MouseSensor/__story__/story.tsx
index 23b3271e..602aac3d 100644
--- a/src/MouseSensor/__story__/story.tsx
+++ b/src/MouseSensor/__story__/story.tsx
@@ -2,22 +2,48 @@ import {Component, createElement as h} from 'react';
 import {storiesOf} from '@storybook/react';
 import {action} from '@storybook/addon-actions';
 import {linkTo} from '@storybook/addon-links';
-import {MouseSensor} from '..';
-import ShowDocs from '../../../.storybook/ShowDocs'
+import {MouseSensor, withMouse} from '..';
+import ShowDocs from '../../../.storybook/ShowDocs';
+
+const Demo = (props) =>
+  <div style={{
+    width: 300,
+    height: 300,
+    border: '1px solid tomato',
+    margin: '100px'
+  }}>
+    <pre style={{fontFamily: 'monospace'}}>
+      {JSON.stringify(props, null, 4)}
+    </pre>
+  </div>;
+
+const DemoWithBond = (props) =>
+  <div style={{
+    width: 300,
+    height: 300,
+    border: '1px solid tomato',
+    margin: '100px'
+  }} {...props.bond}>
+    <pre style={{fontFamily: 'monospace'}}>
+      {JSON.stringify(props, null, 4)}
+    </pre>
+  </div>;
+
+const Hoc1 = withMouse(({mouse}) => h(DemoWithBond, mouse));
+const Hoc2 = withMouse(({foo}) => h(DemoWithBond, {...foo, bond: foo.myBond}), 'foo', {bond: 'myBond'});
+
+@withMouse
+class Decorator extends Component<any, any> {
+  render () {
+    return <DemoWithBond {...this.props.mouse} />;
+  }
+}
 
 storiesOf('Sensors/MouseSensor', module)
   .add('Documentation', () => h(ShowDocs, {name: 'MouseSensor'}))
-  .add('Example', () =>
-    <MouseSensor>{(state) =>
-      <div style={{
-        width: 300,
-        height: 300,
-        border: '1px solid tomato',
-        margin: '100px'
-      }}>
-        <pre style={{fontFamily: 'monospace'}}>
-          {JSON.stringify(state, null, 4)}
-        </pre>
-      </div>
-    }</MouseSensor>
-  );
+  .add('FaCC', () => <MouseSensor>{Demo}</MouseSensor>)
+  .add('FaCC with bond', () => <MouseSensor bond>{DemoWithBond}</MouseSensor>)
+  .add('Render prop', () => <MouseSensor render={Demo} />)
+  .add('HOC 1', () => <Hoc1 />)
+  .add('HOC 2', () => <Hoc2 />)
+  .add('Decorator', () => <Decorator />);
diff --git a/src/MouseSensor/index.ts b/src/MouseSensor/index.ts
index 5d36269c..e8dd7e22 100644
--- a/src/MouseSensor/index.ts
+++ b/src/MouseSensor/index.ts
@@ -1,9 +1,10 @@
 import {Component, Children, cloneElement} from 'react';
 import {h, noop} from '../util';
 import renderProp from '../util/renderProp';
-import {extend} from 'fast-extend';
+import faccToHoc from '../util/faccToHoc';
 
 export interface IMouseSensorProps {
+  bond?: string | boolean;
   children?: (state: IMouseSensorState) => React.ReactElement<any>;
   render?: (state: IMouseSensorState) => React.ReactElement<any>;
   whenHovered?: boolean;
@@ -35,7 +36,7 @@ export class MouseSensor extends Component<IMouseSensorProps, IMouseSensorState>
   el: HTMLElement = null;
   frame = null;
 
-  ref = (originalRef) => (el) => {
+  ref = (originalRef?) => (el) => {
     this.el = el;
     (originalRef || noop)(el);
   };
@@ -84,14 +85,14 @@ export class MouseSensor extends Component<IMouseSensorProps, IMouseSensorState>
     });
   };
 
-  onMouseEnter = (originalOnMouseMove) => (event) => {
+  onMouseEnter = (originalOnMouseMove?) => (event) => {
     if (this.props.whenHovered) {
       this.bindEvents();
     }
     (originalOnMouseMove || noop)(event);
   };
 
-  onMouseLeave = (originalOnMouseMove) => (event) => {
+  onMouseLeave = (originalOnMouseMove?) => (event) => {
     if (this.props.whenHovered) {
       this.unbindEvents();
     }
@@ -99,20 +100,49 @@ export class MouseSensor extends Component<IMouseSensorProps, IMouseSensorState>
   };
 
   render () {
-    const element = renderProp(this.props, this.state);
+    let {bond} = this.props;
 
-    let newProps: any = {
-      ...element.props,
-      ref: this.ref(element.ref)
-    };
+    if (bond) {
+      if (typeof bond === 'boolean') {
+        bond = 'bond';
+      }
 
-    if (!this.props.whenHovered) {
-      const {onMouseEnter, onMouseLeave} = element.props;
+      const bondObject: any = {
+        ref: this.ref()
+      };
 
-      newProps.onMouseEnter = this.onMouseEnter(onMouseEnter);
-      newProps.onMouseLeave = this.onMouseLeave(onMouseLeave);
-    }
+      if (!this.props.whenHovered) {
+        bondObject.onMouseEnter = this.onMouseEnter();
+        bondObject.onMouseLeave = this.onMouseLeave();
+      }
+
+      return renderProp(this.props, {
+        ...this.state,
+        [bond]: bondObject
+      });
+    } else {
+      const element = renderProp(this.props, this.state);
+
+      let newProps: any = {
+        ...element.props,
+        ref: this.ref(element.ref)
+      };
 
-    return cloneElement(element, newProps);
+      if (!this.props.whenHovered) {
+        const {onMouseEnter, onMouseLeave} = element.props;
+
+        newProps.onMouseEnter = this.onMouseEnter(onMouseEnter);
+        newProps.onMouseLeave = this.onMouseLeave(onMouseLeave);
+      }
+
+      return cloneElement(element, newProps);
+    }
   }
 }
+
+const MouseSensorWithBond = (props) => h(MouseSensor, {
+  bond: true,
+  ...props
+});
+
+export const withMouse = faccToHoc(MouseSensorWithBond, 'mouse');
diff --git a/src/util/faccToHoc.ts b/src/util/faccToHoc.ts
index 2d9ddf8c..993c662c 100644
--- a/src/util/faccToHoc.ts
+++ b/src/util/faccToHoc.ts
@@ -7,12 +7,7 @@ const noWrap = (Comp, propName, props, state) => h(Comp, propName ?
 );
 
 export const divWrapper = (Comp, propName, props, state) =>
-  h('div', null,
-    h(Comp, propName ?
-      {[propName]: state, ...props} :
-      {...state, ...props}
-    )
-  ) as any;
+  h('div', null, noWrap(Comp, propName, props, state)) as any;
 
 const faccToHoc = (Facc, prop?: string, wrapper = noWrap) => {
   const hoc = (Comp, propName: any = prop, faccProps: object = null) => {

From 156f53c50b1a82e47aeb89ca03bf77eb54b02c80 Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sun, 28 Jan 2018 02:34:58 +0000
Subject: [PATCH 56/78] docs: add <MouseSensor> reference

---
 README.md           |   2 +-
 docs/MouseSensor.md | 144 ++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 145 insertions(+), 1 deletion(-)
 create mode 100644 docs/MouseSensor.md

diff --git a/README.md b/README.md
index 3e5112fb..0aacf61d 100644
--- a/README.md
+++ b/README.md
@@ -57,7 +57,7 @@ const MyComponent = mock();
      - [`<WindowScrollSensor>`](./docs/WindowScrollSensor.md), `withWindowScroll()`, and `@withWindowScroll`
      - [`<WindowSizeSensor>`](./docs/WindowSizeSensor.md), `withWindowSize()`, and `@withWindowSize`
      - `<MotionSensor>`, `withMotion()`, and `@withMotion`
-     - `<MouseSensor>`, `withMouse()`, and `@withMouse`
+     - [`<MouseSensor>`](./docs/MouseSensor.md), [`withMouse()`](./docs/MouseSensor.md#withmouse-hoc), and [`@withMouse`](./docs/MouseSensor.md#withmouse-decorator)
      - `<GeoPositionSensor>`, `withGeoPosition()`, and `@withGeoPosition`
   - Generators
      - [`<Audio>`](./docs/Audio.md), [`<Video>`](./docs/Video.md), and `<Media>`
diff --git a/docs/MouseSensor.md b/docs/MouseSensor.md
new file mode 100644
index 00000000..2e043c60
--- /dev/null
+++ b/docs/MouseSensor.md
@@ -0,0 +1,144 @@
+# `<MouseSensor>`
+
+Render prop/FaCC that re-renders on mouse position change.
+
+
+## Usage
+
+```jsx
+import {MouseSensor} from 'libreact/lib/MouseSensor';
+
+<MouseSensor>{(state) =>
+  <pre>{JSON.stringify(state, null, 4)}</pre>
+}</MouseSensor>
+```
+
+
+## Reference
+
+`MouseSensor` passes its state to render props, with the following signature:
+
+```ts
+interface IMouseSensorState {
+  docX: number;
+  docY: number;
+  posX: number;
+  posY: number;
+  elH: number;
+  elW: number;
+  elX: number;
+  elY: number;
+}
+```
+
+, where
+
+  - `docX` and `docY` &mdash; mouse position in document.
+  - `posX` and `posY` &mdash; mouse position in your element.
+  - `elH` and `elW` &mdash; element dimensions.
+  - `elX` and `elY` &mdash; element position.
+
+### Props
+
+```ts
+interface IMouseSensorProps {
+  bond?: string | boolean;
+  children?: (state: IMouseSensorState) => React.ReactElement<any>;
+  render?: (state: IMouseSensorState) => React.ReactElement<any>;
+  whenHovered?: boolean;
+}
+```
+
+, where
+
+  - `bond` &mdash; optional, boolean or string, specifying bondig spread object. If string, it specifies the name of the bonding object injected into state, if boolean and true the bonding object will have its default name `bond`.
+  - `children` and `render` - render props that receive `IMouseState` object and, optionally, bonding object.
+  - `whenHovered` - optional, boolean, when true, will track mouse position only when target element is hovered, defaults to `false`.
+
+### Example
+
+```jsx
+import {MouseSensor} from 'libreact/lib/MouseSensor';
+
+<MouseSensor>{(state) =>
+  <div style={{
+    width: 300,
+    height: 300,
+    border: '1px solid tomato',
+    margin: '100px'
+  }}>
+    <pre style={{fontFamily: 'monospace'}}>
+      {JSON.stringify(state, null, 4)}
+    </pre>
+  </div>
+}</MouseSensor>
+```
+
+Result example
+
+```json
+{
+    "docX": 128,
+    "docY": 277,
+    "posX": 108,
+    "posY": 100,
+    "elH": 302,
+    "elW": 302,
+    "elX": 20,
+    "elY": 177,
+}
+```
+
+## `withMouse()` HOC
+
+HOC that merges `mouse` prop into enhanced component's props.
+
+```jsx
+import {withMouse} from 'libreact/lib/MouseSensor';
+
+const MyCompWithMouseAndBond = withMouse(MyComp);
+```
+
+You can overwrite the injected prop name
+
+```js
+const MyCompWithMouseAndBond = withMouse(MyComp, 'foo');
+```
+
+Or simply merge the whole object into your props
+
+```js
+const MyCompWithMouseAndBond = withMouse(MyComp, '');
+```
+
+
+## `@withMouse` decorator
+
+React stateful component decorator that adds `mouse` prop.
+
+```js
+import {withMouse} from 'libreact/lib/MouseSensor';
+
+@withMouse
+class MyComp extends Component {
+
+}
+```
+
+Specify different prop name
+
+```js
+@withMouse('foo')
+class MyComp extends Component {
+
+}
+```
+
+or merge the the whole state object into props
+
+```js
+@withMouse('')
+class MyComp extends Component {
+
+}
+```

From a18bbd174dd4b0e89fc8fcdb644e84df77d30269 Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sun, 28 Jan 2018 02:57:18 +0000
Subject: [PATCH 57/78] feat: add <MotionSensor> and withMotion()

---
 src/MotionSensor/__story__/story.tsx | 22 ++++++++
 src/MotionSensor/index.ts            | 83 ++++++++++++++++++++++++++++
 2 files changed, 105 insertions(+)
 create mode 100644 src/MotionSensor/__story__/story.tsx
 create mode 100644 src/MotionSensor/index.ts

diff --git a/src/MotionSensor/__story__/story.tsx b/src/MotionSensor/__story__/story.tsx
new file mode 100644
index 00000000..4f99827f
--- /dev/null
+++ b/src/MotionSensor/__story__/story.tsx
@@ -0,0 +1,22 @@
+import {createElement as h} from 'react';
+import {storiesOf} from '@storybook/react';
+import {action} from '@storybook/addon-actions';
+import {linkTo} from '@storybook/addon-links';
+import {MotionSensor, withMotion} from '..';
+import ShowDocs from '../../../.storybook/ShowDocs'
+
+const Print = ({motion}) =>
+  <pre style={{fontFamily: 'monospace'}}>
+    {JSON.stringify(motion, null, 4)}
+  </pre>;
+
+const Hoc = withMotion(Print);
+
+storiesOf('Sensors/MotionSensor', module)
+  .add('Documentation', () => h(ShowDocs, {name: 'MotionSensor'}))
+  .add('FaCC', () =>
+    <MotionSensor>{(state) =>
+      <pre style={{fontFamily: 'monospace'}}>{JSON.stringify(state, null, 4)}</pre>
+    }</MotionSensor>
+  )
+  .add('HOC', () => <Hoc />);
diff --git a/src/MotionSensor/index.ts b/src/MotionSensor/index.ts
new file mode 100644
index 00000000..dd672d88
--- /dev/null
+++ b/src/MotionSensor/index.ts
@@ -0,0 +1,83 @@
+import {Component} from 'react';
+import {SyncSensor} from '../SyncSensor';
+import {h, on, off, isClient} from '../util';
+import faccToHoc from '../util/faccToHoc';
+
+export interface IMotionSensorProps {
+  children?: (state: IMotionSensorState) => React.ReactElement<any>;
+}
+
+export interface IMotionSensorState {
+  angle: number;
+  type: string;
+}
+
+const DEFAULT = {
+  acceleration: {
+    x: null,
+    y: null,
+    z: null
+  },
+  accelerationIncludingGravity: {
+    x: null,
+    y: null,
+    z: null
+  },
+  rotationRate: {
+    alpha: null,
+    beta: null,
+    gamma: null
+  },
+  interval: 16
+};
+
+const addListener = (handler) => on(window, 'devicemotion', handler);
+const removeListener = (handler) => off(window, 'devicemotion', handler);
+const onEvent = (event) => {
+  console.log('event', event);
+  const {
+    acceleration,
+    accelerationIncludingGravity,
+    rotationRate,
+    interval
+  } = event;
+
+  return {
+    acceleration: {
+      x: acceleration.x,
+      y: acceleration.y,
+      z: acceleration.z
+    },
+    accelerationIncludingGravity: {
+      x: accelerationIncludingGravity.x,
+      y: accelerationIncludingGravity.y,
+      z: accelerationIncludingGravity.z
+    },
+    rotationRate: {
+      alpha: rotationRate.alpha,
+      beta: rotationRate.beta,
+      gamma: rotationRate.gamma,
+    },
+    interval
+  };
+};
+
+const getInitialState = () => {
+  return DEFAULT;
+};
+
+export class MotionSensor extends Component<IMotionSensorProps, any> {
+  initial = getInitialState();
+
+  render () {
+    return h(SyncSensor, {
+      children: this.props.children,
+      initial: this.initial,
+      addListener,
+      removeListener,
+      onEvent
+    });
+  }
+}
+
+export const withMotion= faccToHoc(MotionSensor, 'motion');

From 81e1992b8dc917993a0fad6e9f3832bb7dbda4fe Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sun, 28 Jan 2018 03:00:50 +0000
Subject: [PATCH 58/78] docs: add <MotionSensor> docs

---
 README.md             |  2 +-
 docs/MotionSensor.md  | 64 +++++++++++++++++++++++++++++++++++++++++++
 docs/NetworkSensor.md |  4 +--
 3 files changed, 67 insertions(+), 3 deletions(-)
 create mode 100644 docs/MotionSensor.md

diff --git a/README.md b/README.md
index 0aacf61d..9c0d4011 100644
--- a/README.md
+++ b/README.md
@@ -56,7 +56,7 @@ const MyComponent = mock();
         - [`<ViewportScrollSensor>`](./docs/ViewportSensor.md#viewportscrollsensor) and [`<ViewportObserverSensor>`](./docs/ViewportSensor.md#viewportobserversensor)
      - [`<WindowScrollSensor>`](./docs/WindowScrollSensor.md), `withWindowScroll()`, and `@withWindowScroll`
      - [`<WindowSizeSensor>`](./docs/WindowSizeSensor.md), `withWindowSize()`, and `@withWindowSize`
-     - `<MotionSensor>`, `withMotion()`, and `@withMotion`
+     - [`<MotionSensor>`](./docs/MotionSensor.md), [`withMotion()`](./docs/MotionSensor.md#withmotion-hoc), and [`@withMotion`](./docs/MotionSensor.md#withmotion-decorator)
      - [`<MouseSensor>`](./docs/MouseSensor.md), [`withMouse()`](./docs/MouseSensor.md#withmouse-hoc), and [`@withMouse`](./docs/MouseSensor.md#withmouse-decorator)
      - `<GeoPositionSensor>`, `withGeoPosition()`, and `@withGeoPosition`
   - Generators
diff --git a/docs/MotionSensor.md b/docs/MotionSensor.md
new file mode 100644
index 00000000..2c9fa23a
--- /dev/null
+++ b/docs/MotionSensor.md
@@ -0,0 +1,64 @@
+# `<MotionSensor>`
+
+Render-prop/FaCC that re-renders on device motion.
+
+
+### Props
+
+None.
+
+
+### Example
+
+```jsx
+import {MotionSensor} from 'libreact/lib/MotionSensor';
+
+<MotionSensor>{(state) =>
+  JSON.strinfigy(state, null 4)
+}</MotionSensor>
+```
+
+Result
+
+```json
+{
+  "acceleration": {
+    "x": null,
+    "y": null,
+    "z": null
+  },
+  "accelerationIncludingGravity": {
+    "x": null,
+    "y": null,
+    "z": null
+  },
+  "rotationRate": {
+    "alpha": null,
+    "beta": null,
+    "gamma": null
+  },
+  "interval": 16
+}
+```
+
+## `withMotion()` HOC
+
+HOC that merges `motion` prop into enhanced component's props.
+
+```jsx
+import {withMotion} from 'libreact/lib/MotionSensor';
+```
+
+
+## `@withMotion` decorator
+
+React stateful component decorator that adds `motion` prop.
+
+```js
+import {withMotion} from 'libreact/lib/MotionSensor';
+
+@withMotion
+class MyComp extends Component {
+
+}
+```
diff --git a/docs/NetworkSensor.md b/docs/NetworkSensor.md
index 5b954f34..3636e928 100644
--- a/docs/NetworkSensor.md
+++ b/docs/NetworkSensor.md
@@ -1,9 +1,9 @@
-# `NetworkSensor`
+# `<NetworkSensor>`
 
 FaCC that re-renders on network status change. Uses `navigator.onLine` and [`NetworkInformation`](https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation) to get network connection information.
 
 
-## `<NetworkSensor>`
+## Reference
 
 Passes through its state to the `children` function
 

From e1beb5ec1be7cbb07de2c8072981ed9ba192be23 Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sun, 28 Jan 2018 10:24:52 +0000
Subject: [PATCH 59/78] feat: add first <GeoLocationSensor> implementation

---
 src/GeoLocation/index.ts | 43 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 43 insertions(+)
 create mode 100644 src/GeoLocation/index.ts

diff --git a/src/GeoLocation/index.ts b/src/GeoLocation/index.ts
new file mode 100644
index 00000000..356b8a0c
--- /dev/null
+++ b/src/GeoLocation/index.ts
@@ -0,0 +1,43 @@
+import {Component} from 'react';
+import {SyncSensor} from '../SyncSensor';
+import {h, on, off, isClient} from '../util';
+import faccToHoc from '../util/faccToHoc';
+
+export interface IGeoLocationSensorProps {
+  children?: (state: IGeoLocationSensorState) => React.ReactElement<any>;
+}
+
+export interface IGeoLocationSensorState {
+
+}
+
+const DEFAULT = {
+
+};
+
+const addListener = (handler) => navigator.geolocation.watchPosition(handler);
+const removeListener = (handler) => navigator.geolocation.clearWatch(handler);
+const onEvent = (event) => {
+  console.log('event', event);
+
+};
+
+const getInitialState = () => {
+  return DEFAULT;
+};
+
+export class GeoLocationSensor extends Component<IGeoLocationSensorProps, any> {
+  initial = getInitialState();
+
+  render () {
+    return h(SyncSensor, {
+      children: this.props.children,
+      initial: this.initial,
+      addListener,
+      removeListener,
+      onEvent
+    });
+  }
+}
+
+export const withMotion= faccToHoc(GeoLocationSensor, 'geolocation');

From 292712fa26919db64394c795cd27539f05078636 Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sun, 28 Jan 2018 11:12:40 +0000
Subject: [PATCH 60/78] feat: improve GeoLocationSensor

---
 README.md                           |  2 +-
 docs/GeoLocationSensor.md           | 56 +++++++++++++++++++++++
 package.json                        |  2 +-
 src/GeoLocation/__story__/story.tsx | 22 +++++++++
 src/GeoLocation/index.ts            | 71 ++++++++++++++++++++---------
 src/MotionSensor/index.ts           | 21 +++++++--
 6 files changed, 146 insertions(+), 28 deletions(-)
 create mode 100644 docs/GeoLocationSensor.md
 create mode 100644 src/GeoLocation/__story__/story.tsx

diff --git a/README.md b/README.md
index 9c0d4011..99f1d7a5 100644
--- a/README.md
+++ b/README.md
@@ -58,7 +58,7 @@ const MyComponent = mock();
      - [`<WindowSizeSensor>`](./docs/WindowSizeSensor.md), `withWindowSize()`, and `@withWindowSize`
      - [`<MotionSensor>`](./docs/MotionSensor.md), [`withMotion()`](./docs/MotionSensor.md#withmotion-hoc), and [`@withMotion`](./docs/MotionSensor.md#withmotion-decorator)
      - [`<MouseSensor>`](./docs/MouseSensor.md), [`withMouse()`](./docs/MouseSensor.md#withmouse-hoc), and [`@withMouse`](./docs/MouseSensor.md#withmouse-decorator)
-     - `<GeoPositionSensor>`, `withGeoPosition()`, and `@withGeoPosition`
+     - [`<GeoLocationSensor>`](./docs/GeoLocationSensor.md), [`withGeoLocation()`](./docs/GeoLocationSensor.md#withgeolocation-hoc), and [`@withGeoLocation`](./docs/GeoLocationSensor.md#withgeolocation-decorator)
   - Generators
      - [`<Audio>`](./docs/Audio.md), [`<Video>`](./docs/Video.md), and `<Media>`
      - [`<LocalStorage>`](./docs/LocalStorage.md), `<SessionStorage>`, `<IndexedDb>`
diff --git a/docs/GeoLocationSensor.md b/docs/GeoLocationSensor.md
new file mode 100644
index 00000000..df52f99c
--- /dev/null
+++ b/docs/GeoLocationSensor.md
@@ -0,0 +1,56 @@
+# `<GeoLocationSensor>`
+
+Render-prop/FaCC that re-renders on device location change, uses [Geolocation](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation) API.
+
+
+### Props
+
+None.
+
+
+### Example
+
+```jsx
+import {GeoLocationSensor} from 'libreact/lib/GeoLocationSensor';
+
+<GeoLocationSensor>{(state) =>
+  JSON.strinfigy(state, null 4)
+}</GeoLocationSensor>
+```
+
+Result
+
+```json
+{
+    "accuracy": 86,
+    "altitude": null,
+    "altitudeAccuracy": null,
+    "heading": null,
+    "latitude": 54.4,
+    "longitude": -0.3,
+    "speed": null,
+    "timestamp": 1517137742896
+}
+```
+
+## `withGeoLocation()` HOC
+
+HOC that merges `geolocation` prop into enhanced component's props.
+
+```jsx
+import {withGeoLocation} from 'libreact/lib/GeoLocationSensor';
+```
+
+
+## `@withGeoLocation` decorator
+
+React stateful component decorator that adds `geolocation` prop.
+
+```js
+import {withGeoLocation} from 'libreact/lib/GeoLocationSensor';
+
+@withGeoLocation
+class MyComp extends Component {
+
+}
+```
diff --git a/package.json b/package.json
index 64cd7ac9..aeb744e9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "libreact",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "description": "React standard library",
   "main": "lib/index.js",
   "keywords": [
diff --git a/src/GeoLocation/__story__/story.tsx b/src/GeoLocation/__story__/story.tsx
new file mode 100644
index 00000000..8c8e1824
--- /dev/null
+++ b/src/GeoLocation/__story__/story.tsx
@@ -0,0 +1,22 @@
+import {createElement as h} from 'react';
+import {storiesOf} from '@storybook/react';
+import {action} from '@storybook/addon-actions';
+import {linkTo} from '@storybook/addon-links';
+import {GeoLocationSensor, withGeoLocation} from '..';
+import ShowDocs from '../../../.storybook/ShowDocs'
+
+const Print = ({geolocation}) =>
+  <pre style={{fontFamily: 'monospace'}}>
+    {JSON.stringify(geolocation, null, 4)}
+  </pre>;
+
+const Hoc = withGeoLocation(Print);
+
+storiesOf('Sensors/GeoLocationSensor', module)
+  .add('Documentation', () => h(ShowDocs, {name: 'GeoLocationSensor'}))
+  .add('FaCC', () =>
+    <GeoLocationSensor>{(state) =>
+      <pre style={{fontFamily: 'monospace'}}>{JSON.stringify(state, null, 4)}</pre>
+    }</GeoLocationSensor>
+  )
+  .add('HOC', () => <Hoc />);
diff --git a/src/GeoLocation/index.ts b/src/GeoLocation/index.ts
index 356b8a0c..ed58ff97 100644
--- a/src/GeoLocation/index.ts
+++ b/src/GeoLocation/index.ts
@@ -1,43 +1,70 @@
 import {Component} from 'react';
-import {SyncSensor} from '../SyncSensor';
 import {h, on, off, isClient} from '../util';
+import renderProp from '../util/renderProp';
 import faccToHoc from '../util/faccToHoc';
 
 export interface IGeoLocationSensorProps {
   children?: (state: IGeoLocationSensorState) => React.ReactElement<any>;
+  render?: (state: IGeoLocationSensorState) => React.ReactElement<any>;
 }
 
 export interface IGeoLocationSensorState {
-
+  accuracy: number,
+  altitude: number,
+  altitudeAccuracy: number,
+  heading: number,
+  latitude: number,
+  longitude: number,
+  speed: number,
+  timestamp: number
 }
 
-const DEFAULT = {
+export class GeoLocationSensor extends Component<IGeoLocationSensorProps, IGeoLocationSensorState> {
+  mounted = false;
+  watchId: number = 0;
+
+  state: IGeoLocationSensorState = {
+    accuracy: null,
+    altitude: null,
+    altitudeAccuracy: null,
+    heading: null,
+    latitude: null,
+    longitude: null,
+    speed: null,
+    timestamp: Date.now()
+  };
 
-};
+  componentDidMount () {
+    this.mounted = true;
 
-const addListener = (handler) => navigator.geolocation.watchPosition(handler);
-const removeListener = (handler) => navigator.geolocation.clearWatch(handler);
-const onEvent = (event) => {
-  console.log('event', event);
+    navigator.geolocation.getCurrentPosition(this.onEvent);
+    this.watchId = navigator.geolocation.watchPosition(this.onEvent);
+  }
 
-};
+  componentWillUnmount () {
+    this.mounted = false;
 
-const getInitialState = () => {
-  return DEFAULT;
-};
+    navigator.geolocation.clearWatch(this.watchId);
+  }
 
-export class GeoLocationSensor extends Component<IGeoLocationSensorProps, any> {
-  initial = getInitialState();
+  onEvent = (event) => {
+    if (this.mounted) {
+      this.setState({
+        accuracy: event.coords.accuracy,
+        altitude: event.coords.altitude,
+        altitudeAccuracy: event.coords.altitudeAccuracy,
+        heading: event.coords.heading,
+        latitude: event.coords.latitude,
+        longitude: event.coords.longitude,
+        speed: event.coords.speed,
+        timestamp: event.timestamp
+      });
+    }
+  };
 
   render () {
-    return h(SyncSensor, {
-      children: this.props.children,
-      initial: this.initial,
-      addListener,
-      removeListener,
-      onEvent
-    });
+    return renderProp(this.props, this.state);
   }
 }
 
-export const withMotion= faccToHoc(GeoLocationSensor, 'geolocation');
+export const withGeoLocation = faccToHoc(GeoLocationSensor, 'geolocation');
diff --git a/src/MotionSensor/index.ts b/src/MotionSensor/index.ts
index dd672d88..a45f4871 100644
--- a/src/MotionSensor/index.ts
+++ b/src/MotionSensor/index.ts
@@ -8,8 +8,22 @@ export interface IMotionSensorProps {
 }
 
 export interface IMotionSensorState {
-  angle: number;
-  type: string;
+  acceleration: {
+    x: number,
+    y: number,
+    z: number
+  },
+  accelerationIncludingGravity: {
+    x: number,
+    y: number,
+    z: number
+  },
+  rotationRate: {
+    alpha: number,
+    beta: number,
+    gamma: number
+  },
+  interval: number
 }
 
 const DEFAULT = {
@@ -34,7 +48,6 @@ const DEFAULT = {
 const addListener = (handler) => on(window, 'devicemotion', handler);
 const removeListener = (handler) => off(window, 'devicemotion', handler);
 const onEvent = (event) => {
-  console.log('event', event);
   const {
     acceleration,
     accelerationIncludingGravity,
@@ -80,4 +93,4 @@ export class MotionSensor extends Component<IMotionSensorProps, any> {
   }
 }
 
-export const withMotion= faccToHoc(MotionSensor, 'motion');
+export const withMotion = faccToHoc(MotionSensor, 'motion');

From 316e82f6edd41a681c4505781aba23ea4ff388c4 Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sun, 28 Jan 2018 11:20:31 +0000
Subject: [PATCH 61/78] docs: improve documentation

---
 README.md                                     | 12 +++++-----
 docs/GeoLocationSensor.md                     |  4 ++--
 docs/OrientationSensor.md                     | 17 +++++++++++---
 docs/WindowScrollSensor.md                    | 23 +++++++++++++++++++
 docs/WindowSizeSensor.md                      | 22 ++++++++++++++++++
 src/GeoLocation/__story__/story.tsx           |  4 ++--
 src/GeoLocation/index.ts                      |  2 +-
 .../{ => __story__}/story.ts                  |  4 ++--
 src/WindowSizeSensor/{ => __story__}/story.ts |  4 ++--
 9 files changed, 74 insertions(+), 18 deletions(-)
 rename src/WindowScrollSensor/{ => __story__}/story.ts (89%)
 rename src/WindowSizeSensor/{ => __story__}/story.ts (83%)

diff --git a/README.md b/README.md
index 99f1d7a5..fcc475e3 100644
--- a/README.md
+++ b/README.md
@@ -43,22 +43,22 @@ const MyComponent = mock();
         - [`<Map>`](./docs/Map.md), [`withMap()`](./docs/Map.md#withmap-hoc), and [`@withMap`](./docs/Map.md#withmap-decorator)
   - Sensors
      - [`<BatterySensor>`](./docs/BatterySensor.md), [`withBattery()`](./docs/BatterySensor.md#withbattery), and [`@withBattery`](./docs/BatterySensor.md#withbattery-1)
+     - [`<GeoLocationSensor>`](./docs/GeoLocationSensor.md), [`withGeoLocation()`](./docs/GeoLocationSensor.md#withgeolocation-hoc), and [`@withGeoLocation`](./docs/GeoLocationSensor.md#withgeolocation-decorator)
      - [`<MediaDeviceSensor>`](./docs/MediaDeviceSensor.md), [`withMediaDevices()`](./docs/MediaDeviceSensor.md#withmediadevices), and [`@withMediaDevices`](./docs/MediaDeviceSensor.md#withmediadevices-1)
      - [`<MediaSensor>`](./docs/MediaSensor.md), [`withMedia()`](./docs/MediaSensor.md#withmedia), and [`@withMedia`](./docs/MediaSensor.md#withmedia-1)
+     - [`<MotionSensor>`](./docs/MotionSensor.md), [`withMotion()`](./docs/MotionSensor.md#withmotion-hoc), and [`@withMotion`](./docs/MotionSensor.md#withmotion-decorator)
+     - [`<MouseSensor>`](./docs/MouseSensor.md), [`withMouse()`](./docs/MouseSensor.md#withmouse-hoc), and [`@withMouse`](./docs/MouseSensor.md#withmouse-decorator)
      - [`<NetworkSensor>`](./docs/NetworkSensor.md), [`withNetwork()`](./docs/NetworkSensor.md#withnetwork-hoc), and [`@withNetwork`](./docs/NetworkSensor.md#withnetwork-decorator)
      - [`<LightSensor>`](./docs/LightSensor.md), [`withLight()`](./docs/LightSensor.md#withlight-hoc), and [`@withLight`](./docs/LightSensor.md#withlight-decorator)
      - [`<LocationSensor>`](./docs/LocationSensor.md), [`withLocation()`](./docs/LocationSensor.md#withlocation-hoc), and [`@withLocation`](./docs/LocationSensor.md#withlocation-decora)
-     - [`<OrientationSensor>`](./docs/OrientationSensor.md), [`withOrientation()`](./docs/OrientationSensor.md#withorientation), and `@withOrientation`
+     - [`<OrientationSensor>`](./docs/OrientationSensor.md), [`withOrientation()`](./docs/OrientationSensor.md#withorientation-hoc), and [`@withOrientation`](./docs/OrientationSensor.md#withorientation-decorator)
      - [`<ScrollSensor>`](./docs/ScrollSensor.md)
      - [`<SizeSensor>`](./docs/SizeSensor.md), [`withSize()`](./docs/SizeSensor.md#withsize-hoc), and [`@withSize`](./docs/SizeSensor.md#withsize-decorator)
         - [`<WidthSensor>`](./docs/WidthSensor.md), [`withWidth()`](./docs/WidthSensor.md#withwidth-hoc-and-withwidth-decorator), and [`@withWidth`](./docs/WidthSensor.md#withwidth-hoc-and-withwidth-decorator)
      - [`<ViewportSensor>`](./docs/ViewportSensor.md), [`withViewport()`](./docs/ViewportSensor.md#withviewport-hoc), and [`@withViewport`](./docs/ViewportSensor.md#withviewport-decorator)
         - [`<ViewportScrollSensor>`](./docs/ViewportSensor.md#viewportscrollsensor) and [`<ViewportObserverSensor>`](./docs/ViewportSensor.md#viewportobserversensor)
-     - [`<WindowScrollSensor>`](./docs/WindowScrollSensor.md), `withWindowScroll()`, and `@withWindowScroll`
-     - [`<WindowSizeSensor>`](./docs/WindowSizeSensor.md), `withWindowSize()`, and `@withWindowSize`
-     - [`<MotionSensor>`](./docs/MotionSensor.md), [`withMotion()`](./docs/MotionSensor.md#withmotion-hoc), and [`@withMotion`](./docs/MotionSensor.md#withmotion-decorator)
-     - [`<MouseSensor>`](./docs/MouseSensor.md), [`withMouse()`](./docs/MouseSensor.md#withmouse-hoc), and [`@withMouse`](./docs/MouseSensor.md#withmouse-decorator)
-     - [`<GeoLocationSensor>`](./docs/GeoLocationSensor.md), [`withGeoLocation()`](./docs/GeoLocationSensor.md#withgeolocation-hoc), and [`@withGeoLocation`](./docs/GeoLocationSensor.md#withgeolocation-decorator)
+     - [`<WindowScrollSensor>`](./docs/WindowScrollSensor.md), [`withWindowScroll()`](./docs/WindowScrollSensor.md#withwindowscroll-hoc), and [`@withWindowScroll`](./docs/WindowScrollSensor.md#withwindowscroll-decorator)
+     - [`<WindowSizeSensor>`](./docs/WindowSizeSensor.md), [`withWindowSize()`](./docs/WindowSizeSensor.md#withwindowsize-hoc), and [`@withWindowSize`](./docs/WindowSizeSensor.md#withwindowsize-decorator)
   - Generators
      - [`<Audio>`](./docs/Audio.md), [`<Video>`](./docs/Video.md), and `<Media>`
      - [`<LocalStorage>`](./docs/LocalStorage.md), `<SessionStorage>`, `<IndexedDb>`
diff --git a/docs/GeoLocationSensor.md b/docs/GeoLocationSensor.md
index df52f99c..4f1e0433 100644
--- a/docs/GeoLocationSensor.md
+++ b/docs/GeoLocationSensor.md
@@ -35,7 +35,7 @@ Result
 
 ## `withGeoLocation()` HOC
 
-HOC that merges `geolocation` prop into enhanced component's props.
+HOC that merges `geoLocation` prop into enhanced component's props.
 
 ```jsx
 import {withGeoLocation} from 'libreact/lib/GeoLocationSensor';
@@ -44,7 +44,7 @@ import {withGeoLocation} from 'libreact/lib/GeoLocationSensor';
 
 ## `@withGeoLocation` decorator
 
-React stateful component decorator that adds `geolocation` prop.
+React stateful component decorator that adds `geoLocation` prop.
 
 ```js
 import {withGeoLocation} from 'libreact/lib/GeoLocationSensor';
diff --git a/docs/OrientationSensor.md b/docs/OrientationSensor.md
index cc876693..c7570660 100644
--- a/docs/OrientationSensor.md
+++ b/docs/OrientationSensor.md
@@ -33,13 +33,24 @@ interface IOrientationSensorState {
   - `type` - is one of `portrait-primary`, `portrait-secondary`, `landscape-primary`, or `landscape-secondary`.
 
 
-## `withOrientation()`
+## `withOrientation()` HOC
 
-HOC that injects `orientation` object into your component.
+HOC that merges `orientation` prop into enhanced component's props.
+
+```jsx
+import {withOrientation} from 'libreact/lib/OrientationSensor';
+```
 
 
+## `@withOrientation` decorator
+
+React stateful component decorator that adds `orientation` prop.
+
 ```js
 import {withOrientation} from 'libreact/lib/OrientationSensor';
 
-const MyCompWithOrientation = withOrientation(MyComp);
+@withOrientation
+class MyComp extends Component {
+
+}
 ```
diff --git a/docs/WindowScrollSensor.md b/docs/WindowScrollSensor.md
index 9778f824..1d362deb 100644
--- a/docs/WindowScrollSensor.md
+++ b/docs/WindowScrollSensor.md
@@ -11,3 +11,26 @@ import {WindowScrollSensor} from 'libreact/lib/WindowScrollSensor';
   `x: ${x}, y: ${y}`
 }</WindowScrollSensor>
 ```
+
+
+## `withWindowScroll()` HOC
+
+HOC that merges `windowScroll` prop into enhanced component's props.
+
+```jsx
+import {withWindowScroll} from 'libreact/lib/WindowScrollSensor';
+```
+
+
+## `@withWindowScroll` decorator
+
+React stateful component decorator that adds `windowScroll` prop.
+
+```js
+import {withWindowScroll} from 'libreact/lib/WindowScrollSensor';
+
+@withWindowScroll
+class MyComp extends Component {
+
+}
+```
diff --git a/docs/WindowSizeSensor.md b/docs/WindowSizeSensor.md
index acdf376f..82fdc3a7 100644
--- a/docs/WindowSizeSensor.md
+++ b/docs/WindowSizeSensor.md
@@ -11,3 +11,25 @@ import {WindowSizeSensor} from 'libreact/lib/WindowSizeSensor';
   `width: ${width}, height: ${height}`
 }</WindowSizeSensor>
 ```
+
+## `withWindowSize()` HOC
+
+HOC that merges `windowSize` prop into enhanced component's props.
+
+```jsx
+import {withWindowSize} from 'libreact/lib/WindowSizeSensor';
+```
+
+
+## `@withWindowSize` decorator
+
+React stateful component decorator that adds `windowSize` prop.
+
+```js
+import {withWindowSize} from 'libreact/lib/WindowSizeSensor';
+
+@withWindowSize
+class MyComp extends Component {
+
+}
+```
diff --git a/src/GeoLocation/__story__/story.tsx b/src/GeoLocation/__story__/story.tsx
index 8c8e1824..dfb286a4 100644
--- a/src/GeoLocation/__story__/story.tsx
+++ b/src/GeoLocation/__story__/story.tsx
@@ -5,9 +5,9 @@ import {linkTo} from '@storybook/addon-links';
 import {GeoLocationSensor, withGeoLocation} from '..';
 import ShowDocs from '../../../.storybook/ShowDocs'
 
-const Print = ({geolocation}) =>
+const Print = ({geoLocation}) =>
   <pre style={{fontFamily: 'monospace'}}>
-    {JSON.stringify(geolocation, null, 4)}
+    {JSON.stringify(geoLocation, null, 4)}
   </pre>;
 
 const Hoc = withGeoLocation(Print);
diff --git a/src/GeoLocation/index.ts b/src/GeoLocation/index.ts
index ed58ff97..dd235476 100644
--- a/src/GeoLocation/index.ts
+++ b/src/GeoLocation/index.ts
@@ -67,4 +67,4 @@ export class GeoLocationSensor extends Component<IGeoLocationSensorProps, IGeoLo
   }
 }
 
-export const withGeoLocation = faccToHoc(GeoLocationSensor, 'geolocation');
+export const withGeoLocation = faccToHoc(GeoLocationSensor, 'geoLocation');
diff --git a/src/WindowScrollSensor/story.ts b/src/WindowScrollSensor/__story__/story.ts
similarity index 89%
rename from src/WindowScrollSensor/story.ts
rename to src/WindowScrollSensor/__story__/story.ts
index d439fec3..dec10c7c 100644
--- a/src/WindowScrollSensor/story.ts
+++ b/src/WindowScrollSensor/__story__/story.ts
@@ -2,8 +2,8 @@ import {createElement as h} from 'react';
 import {storiesOf} from '@storybook/react';
 import {action} from '@storybook/addon-actions';
 import {linkTo} from '@storybook/addon-links';
-import {WindowScrollSensor} from '.';
-import ShowDocs from '../../.storybook/ShowDocs'
+import {WindowScrollSensor} from '..';
+import ShowDocs from '../../../.storybook/ShowDocs'
 
 storiesOf('Sensors/WindowScrollSensor', module)
   .add('Documentation', () => h(ShowDocs, {name: 'WindowScrollSensor'}))
diff --git a/src/WindowSizeSensor/story.ts b/src/WindowSizeSensor/__story__/story.ts
similarity index 83%
rename from src/WindowSizeSensor/story.ts
rename to src/WindowSizeSensor/__story__/story.ts
index 11fd3631..44b53b52 100644
--- a/src/WindowSizeSensor/story.ts
+++ b/src/WindowSizeSensor/__story__/story.ts
@@ -2,8 +2,8 @@ import {createElement as h} from 'react';
 import {storiesOf} from '@storybook/react';
 import {action} from '@storybook/addon-actions';
 import {linkTo} from '@storybook/addon-links';
-import {WindowSizeSensor} from '.';
-import ShowDocs from '../../.storybook/ShowDocs'
+import {WindowSizeSensor} from '..';
+import ShowDocs from '../../../.storybook/ShowDocs'
 
 storiesOf('Sensors/WindowSizeSensor', module)
   .add('Documentation', () => h(ShowDocs, {name: 'WindowSizeSensor'}))

From 6bf7d605406ee825b44c25b6e5f3a180df1980eb Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sun, 28 Jan 2018 11:38:52 +0000
Subject: [PATCH 62/78] docs: add Introduction.md

---
 README.md            |  2 +-
 docs/Introduction.md | 65 ++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 66 insertions(+), 1 deletion(-)
 create mode 100644 docs/Introduction.md

diff --git a/README.md b/README.md
index fcc475e3..d5aa6177 100644
--- a/README.md
+++ b/README.md
@@ -28,7 +28,7 @@ const MyComponent = mock();
 
 ## Contents
 
-  - Introduction
+  - [Introduction](./docs/Introduction.md)
   - [Dummies](./docs/Dummies.md)
      - [`mock()`](./docs/mock.md) and [`loadable()`](./docs/loadable.md)
      - [`lazy()`](./docs/lazy.md), [`delayed()`](./docs/delayed.md), and [`viewport()`](./docs/viewport.md)
diff --git a/docs/Introduction.md b/docs/Introduction.md
new file mode 100644
index 00000000..6bf84191
--- /dev/null
+++ b/docs/Introduction.md
@@ -0,0 +1,65 @@
+# Introduction
+
+`libreact` is a collection of most essential React utilities you will probably need in any project.
+
+[Render prop](#render-props) and [FaCC](#facc) notation is usually used interchangeably as most `libreact`
+components support both interfaces.
+
+
+## Render props
+
+*Render props* are components which have props stat start with `render*` and accept a function that
+returns a React element, for example:
+
+```jsx
+<App
+  renderNavigation={() => <Navigation />}
+  renderBody={() => <Body />}
+  renderFooter={() => <Footer />}
+/>
+```
+
+Where the function like `() => <Navigation />` *"render"s* the navigation.
+
+Typically though a render prop component will have only one `render*` prop, in that case
+we simply call it `render`.
+
+```jsx
+<MouseSensor render={({posX, posY}) => <div />} />
+```
+
+
+## FaCC
+
+FaCC or *Function as a Child Component* is a special case or render prop where the single
+render prop is called `children` instead.
+
+```jsx
+<MouseSensor children={({posX, posY}) => <div />} />
+```
+
+FaCC is superior to a single render prop notation, because you can put the rendering function into props, as
+above, or place it as a child in JSX tree, which allows your *"HTML"* to have natural spacing.
+
+```jsx
+<MouseSensor>{({posX, posY}) =>
+  <div />
+}</MouseSensor>
+```
+
+FaCCs are especially convenient when you use hyperscript function `h` to create your
+React elements, because you don't have to type the closing tag and create a props object unnecessarily.
+
+```js
+h(MouseSensor, null, ({posX, posY}) => h('div')})
+```
+
+
+## HOC
+
+HOC or *Higher Order Component* is a function that receives AND/OR returns a React component.
+
+
+## Enhancer
+
+*Enhancer* is a HOC that receives AND returns a React component.

From 83a470beb5d35b55e19b87404be2a0eaf183a44d Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sun, 28 Jan 2018 12:07:38 +0000
Subject: [PATCH 63/78] docs: add Sensor.md docs

---
 README.md            |  2 +-
 docs/Introduction.md | 10 +++++-----
 docs/Sensors.md      | 35 +++++++++++++++++++++++++++++++++++
 3 files changed, 41 insertions(+), 6 deletions(-)
 create mode 100644 docs/Sensors.md

diff --git a/README.md b/README.md
index d5aa6177..a795c4b7 100644
--- a/README.md
+++ b/README.md
@@ -41,7 +41,7 @@ const MyComponent = mock();
         - [`<Counter>`](./docs/Counter.md), [`withCounter()`](./docs/Counter.md#withcounter-hoc) and [`@withCounter`](./docs/Counter.md#withcounter-decorator)
         - [`<List>`](./docs/List.md), [`withList()`](./docs/List.md#withlist-hoc), and [`@withList`](./docs/List.md#withlist-decorator)
         - [`<Map>`](./docs/Map.md), [`withMap()`](./docs/Map.md#withmap-hoc), and [`@withMap`](./docs/Map.md#withmap-decorator)
-  - Sensors
+  - [Sensors](./docs/Sensors.md)
      - [`<BatterySensor>`](./docs/BatterySensor.md), [`withBattery()`](./docs/BatterySensor.md#withbattery), and [`@withBattery`](./docs/BatterySensor.md#withbattery-1)
      - [`<GeoLocationSensor>`](./docs/GeoLocationSensor.md), [`withGeoLocation()`](./docs/GeoLocationSensor.md#withgeolocation-hoc), and [`@withGeoLocation`](./docs/GeoLocationSensor.md#withgeolocation-decorator)
      - [`<MediaDeviceSensor>`](./docs/MediaDeviceSensor.md), [`withMediaDevices()`](./docs/MediaDeviceSensor.md#withmediadevices), and [`@withMediaDevices`](./docs/MediaDeviceSensor.md#withmediadevices-1)
diff --git a/docs/Introduction.md b/docs/Introduction.md
index 6bf84191..435be8bb 100644
--- a/docs/Introduction.md
+++ b/docs/Introduction.md
@@ -19,7 +19,7 @@ returns a React element, for example:
 />
 ```
 
-Where the function like `() => <Navigation />` *"render"s* the navigation.
+Where the function like `() => <Navigation />` *"renders"* the navigation.
 
 Typically though a render prop component will have only one `render*` prop, in that case
 we simply call it `render`.
@@ -31,15 +31,15 @@ we simply call it `render`.
 
 ## FaCC
 
-FaCC or *Function as a Child Component* is a special case or render prop where the single
+FaCC or *Function as a Child Component* is a special case of render prop where the single
 render prop is called `children` instead.
 
 ```jsx
 <MouseSensor children={({posX, posY}) => <div />} />
 ```
 
-FaCC is superior to a single render prop notation, because you can put the rendering function into props, as
-above, or place it as a child in JSX tree, which allows your *"HTML"* to have natural spacing.
+FaCC notation is superior to a single render prop notation, because you can put the rendering function into props, as
+above, or place it as a child in JSX tree, which allows your *"HTML"* markup to have natural spacing.
 
 ```jsx
 <MouseSensor>{({posX, posY}) =>
@@ -57,7 +57,7 @@ h(MouseSensor, null, ({posX, posY}) => h('div')})
 
 ## HOC
 
-HOC or *Higher Order Component* is a function that receives AND/OR returns a React component.
+HOC or *Higher Order Component* is a function that receives AND/OR returns React components.
 
 
 ## Enhancer
diff --git a/docs/Sensors.md b/docs/Sensors.md
new file mode 100644
index 00000000..9e0c64fa
--- /dev/null
+++ b/docs/Sensors.md
@@ -0,0 +1,35 @@
+# Sensors
+
+Sensors are render pros that track some behavior and re-render on state change.
+
+For example, the below `<div>` will be re-rendered every time mouse position changes.
+
+```jsx
+<MouseSensor>{({posX, posY}) =>
+  <div />
+}</MouseSensor>
+```
+
+`libreact` comes with plenty of sensors built-in.
+
+  - [`<BatterySensor>`](./BatterySensor.md) &mdash; tracks batter status.
+  - [`<GeoLocationSensor>`](./GeoLocationSensor.md) &mdash; tracks device geographical location.
+  - [`<MediaDeviceSensor>`](./MediaDeviceSensor.md) &mdash; tracks media devices connected to your device.
+  - [`<MediaSensor>`](./MediaSensor.md) &mdash; tracks matches of a media query.
+  - [`<MotionSensor>`](./MotionSensor.md) &mdash; tracks physical motion of your device.
+  - [`<MouseSensor>`](./MouseSensor.md) &mdash; tracks mouse position inside an element.
+  - [`<NetworkSensor>`](./NetworkSensor.md) &mdash; tracks network connectivity and type state.
+  - [`<LightSensor>`](./LightSensor.md) &mdash; tracks physical lightning sensor state.
+  - [`<LocationSensor>`](./LocationSensor.md) &mdash; tracks browser location.
+  - [`<OrientationSensor>`](./OrientationSensor.md) &mdash; tracks physical device orientation.
+  - [`<ScrollSensor>`](./ScrollSensor.md) &mdash; tracks scroll offsets in a DOM element.
+  - [`<SizeSensor>`](./SizeSensor.md) &mdash; tracks child DOM element size.
+    - [`<WidthSensor>`](./WidthSensor.md) &mdash; same as `<SizeSensor>`, but only re-renders on width change.
+  - [`<ViewportSensor>`](./ViewportSensor.md) &mdash; tracks elements visibility in viewport.
+    - [`<ViewportScrollSensor>`](./ViewportSensor.md#viewportscrollsensor) and [`<ViewportObserverSensor>`](./ViewportSensor.md#viewportobserversensor)
+  - [`<WindowScrollSensor>`](./WindowScrollSensor.md) &mdash; tracks window scroll position.
+  - [`<WindowSizeSensor>`](./WindowSizeSensor.md) &mdash; tracks window size.
+
+Most sensors have also corresponding HOC and decorator that provide the same functionality.
+For example, [`<NetworkSensor>`](./NetworkSensor.md) render prop has a corresponding [`withNetowrk()`](./NetworkSensor.md#withnetwork-hoc) HOC and
+[`@withNetwork`](./NetworkSensor.md#withnetwork-decorator) decorator.

From 0bdd164d33408ccfffa3ead687666b62d059c71d Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sun, 28 Jan 2018 12:14:23 +0000
Subject: [PATCH 64/78] docs: add CSS reset docs

---
 README.md          |  2 +-
 docs/CSS-resets.md | 30 ++++++++++++++++++++++++++++++
 docs/Sensors.md    |  2 +-
 3 files changed, 32 insertions(+), 2 deletions(-)
 create mode 100644 docs/CSS-resets.md

diff --git a/README.md b/README.md
index a795c4b7..5dfc2ddb 100644
--- a/README.md
+++ b/README.md
@@ -73,7 +73,7 @@ const MyComponent = mock();
      - `<CssVars>`
      - [`<Router>`](./docs/route.md#router), [`<Route>`](./docs/route.md#route), [`withRoute()`](./docs/route.md#withroute), and `@withRoute`
      - `<Translations>`, `<Translate>`, `withTranslations`, and `@withTranslations`
-  - CSS resets
+  - [CSS resets](./docs/CSS-resets.md)
      - [`<CssResetEricMeyer>`](./docs/reset/CssResetEricMeyer.md) and [`<CssResetEricMeyerCondensed>`](./docs/reset/CssResetEricMeyerCondensed.md)
      - [`<CssResetMinimalistic>`](./docs/reset/CssResetMinimalistic.md), [`<CssResetMinimalistic2>`](./docs/reset/CssResetMinimalistic2.md), and [`<CssResetMinimalistic3>`](./docs/reset/CssResetMinimalistic3.md)
      - [`<CssResetPoorMan>`](./docs/reset/CssResetPoorMan.md)
diff --git a/docs/CSS-resets.md b/docs/CSS-resets.md
new file mode 100644
index 00000000..5d8fb8db
--- /dev/null
+++ b/docs/CSS-resets.md
@@ -0,0 +1,30 @@
+# CSS Resets
+
+CSS reset components `<CssReset*>` provide a handy way to include CSS reset in your app.
+You simply need to render the css reset component somewhere in your JSX tree for it to take effect.
+
+```jsx
+import CssResetEricMeyer from 'libreact/lib/reset/CssResetEricMeyer';
+
+const App = () =>
+  <div>
+    <CssResetEricMeyer />
+    { /* ... */ }
+  </div>
+```
+
+When you un-mount a CSS reset component it will also remove the CSS automatically.
+
+Below is a list of included CSS resets.
+
+  - [`<CssResetEricMeyer>`](./reset/CssResetEricMeyer.md)
+  - [`<CssResetEricMeyerCondensed>`](./reset/CssResetEricMeyerCondensed.md)
+  - [`<CssResetMinimalistic>`](./reset/CssResetMinimalistic.md)
+  - [`<CssResetMinimalistic2>`](./reset/CssResetMinimalistic2.md)
+  - [`<CssResetMinimalistic3>`](./reset/CssResetMinimalistic3.md)
+  - [`<CssResetPoorMan>`](./reset/CssResetPoorMan.md)
+  - [`<CssResetShaunInman>`](./reset/CssResetShaunInman.md)
+  - [`<CssResetSiolon>`](./reset/CssResetSiolon.md)
+  - [`<CssResetTantek>`](./reset/CssResetTantek.md)
+  - [`<CssResetUniversal>`](./reset/CssResetUniversal.md)
+  - [`<CssResetYahoo>`](./reset/CssResetYahoo.md)
diff --git a/docs/Sensors.md b/docs/Sensors.md
index 9e0c64fa..4ab6b0d3 100644
--- a/docs/Sensors.md
+++ b/docs/Sensors.md
@@ -30,6 +30,6 @@ For example, the below `<div>` will be re-rendered every time mouse position cha
   - [`<WindowScrollSensor>`](./WindowScrollSensor.md) &mdash; tracks window scroll position.
   - [`<WindowSizeSensor>`](./WindowSizeSensor.md) &mdash; tracks window size.
 
-Most sensors have also corresponding HOC and decorator that provide the same functionality.
+Most sensors have also corresponding HOC and class decorator that provide the same functionality.
 For example, [`<NetworkSensor>`](./NetworkSensor.md) render prop has a corresponding [`withNetowrk()`](./NetworkSensor.md#withnetwork-hoc) HOC and
 [`@withNetwork`](./NetworkSensor.md#withnetwork-decorator) decorator.

From 7ed3af8478f980fe7bacf59cfcf24e0d1a73dac1 Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sun, 28 Jan 2018 12:27:27 +0000
Subject: [PATCH 65/78] docs: improve docs

---
 docs/Dummies.md  |  4 ++--
 docs/lazy.md     | 10 +++-------
 docs/loadable.md | 10 ++++++----
 docs/mock.md     | 10 +++++-----
 docs/viewport.md |  4 ++--
 5 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/docs/Dummies.md b/docs/Dummies.md
index ae99f950..6a350cf1 100644
--- a/docs/Dummies.md
+++ b/docs/Dummies.md
@@ -10,7 +10,7 @@ but implement them with real components only later when necessary.
 
   - [`mock()`](./mock.md) - dummy that can be implemented using `.implement()` method.
   - [`loadable()`](./loadable.md) - dummy that can be loaded using `.load()` method.
-  - [`lazy()`](./lazy.md) - dummy that loads automatically when rendered for the first time.
-  - [`delayed()`](./delayed.md) - like `lazy()`, but its loading can be delayed further.
+  - [`lazy()`](./lazy.md) - like `loadable()`, but also loads automatically when rendered for the first time.
+  - [`delayed()`](./delayed.md) - like `lazy()`, but its loading can be delayed.
   - [`viewport()`](./viewport.md) - postpones component's rendering until it is visible
   in viewport at least once.
diff --git a/docs/lazy.md b/docs/lazy.md
index 8ef40743..f80fdf1b 100644
--- a/docs/lazy.md
+++ b/docs/lazy.md
@@ -1,18 +1,14 @@
 # `lazy()`
 
-Creates a loadable component which is loaded when it is rendered for the first time.
+Creates a `loadable()` component which is loaded automatically when it is rendered for the first time.
 
-Use it the same as [`loadable()`](./loadable.md) function.
+Use it the same as [`loadable()`](./loadable.md).
 
 
 ## Reference
 
 ```ts
-lazy: <TProps>(params: ILazyParams) => ILazyComponent<TProps>;
+lazy: (params: ILazyParams) => React.ComponentClass;
 
 interface ILazyParams extends ILoadableParams {}
-
-export interface ILazyComponent<TProps> extends React.SFC<TProps> {
-    load();
-}
 ```
diff --git a/docs/loadable.md b/docs/loadable.md
index 71650c21..29409e36 100644
--- a/docs/loadable.md
+++ b/docs/loadable.md
@@ -15,7 +15,8 @@ const SVGImage = loadable({
 SVGImage.load();
 ```
 
-Use default exports
+Supports default exports, for example, if your `<MyComp>` is actually in `./MyComp/index.js` file
+and is exported as `export default MyComp`:
 
 ```js
 const LoadableComp = loadable({
@@ -23,16 +24,17 @@ const LoadableComp = loadable({
 });
 ```
 
+
 ## Reference
 
 ```ts
-const loadable: <TProps>(params: ILoadableParams) => ILoadableComponent<TProps>;
+loadable: (params: ILoadableParams) => ILoadableComponent;
 
 interface ILoadableParams extends IMockParams {
-    loader: () => Promise<TComponent<any>>,
+    loader: () => Promise<React.ComponentClass>,
 }
 
-interface ILoadableComponent<TProps> extends IMockComponent<TProps> {
+interface ILoadableComponent extends React.ComponentClass {
     load();
 }
 ```
diff --git a/docs/mock.md b/docs/mock.md
index 3d44efd0..bb8b8e6b 100644
--- a/docs/mock.md
+++ b/docs/mock.md
@@ -21,9 +21,9 @@ Player.implement(RealPlayer);
 
 Specify placeholder for the mock
 
-```js
+```jsx
 const MySvg = mock({
-    loading: 'SVG is loading...'
+    loading: <span>SVG is loading...</span>
 });
 ```
 
@@ -36,10 +36,10 @@ interface IMockParams {
   loading?: React.ReactElement;
 }
 
-interface IMockComponent {
-  implement(Implementation: React.Component | React.SFC);
+interface IMockComponent extends React.ComponentClass {
+  implement(Implementation: React.ComponentClass | React.StatelessComponent);
 }
 ```
 
   - `loading` - React element to show while the mock is not implemented.
-  - `.implement` - use this method to set the implementation of your mock coponent.
+  - `.implement()` - use this method to set the implementation of your mock component.
diff --git a/docs/viewport.md b/docs/viewport.md
index 2c76f3f9..5b22d185 100644
--- a/docs/viewport.md
+++ b/docs/viewport.md
@@ -5,7 +5,7 @@ Displays your component only after it appears in the viewport.
 Before your component has appeared in viewport at least once it displays
 a placeholder, which defaults to a transparent 1x1 pixel.
 
-`viewport()` is component enhancer with the following signature.
+`viewport()` is a component enhancer with the following signature.
 
 ```ts
 viewport: (Comp, params: IViewportParams) => React.ComponentClass;
@@ -17,7 +17,7 @@ interface IViewportParams {
 
 , where
 
-  - `placeholder` - React element to render while this component is out of viewport.
+  - `placeholder` - React element to render while this component is out of view.
 
 
 ## Usage

From 97e7f6315d5bee574724a685dcbad96bfcbcca95 Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sun, 28 Jan 2018 13:13:28 +0000
Subject: [PATCH 66/78] feat: improve Router

---
 README.md                                 |  2 +-
 docs/Introduction.md                      | 23 ++++++++++-
 docs/inversion.md                         | 16 ++++++--
 src/route/__story__/StoryRouteExample.tsx | 16 ++++----
 src/route/index.ts                        | 47 ++++++++++++-----------
 src/util/renderProp.ts                    |  8 ++--
 6 files changed, 72 insertions(+), 40 deletions(-)

diff --git a/README.md b/README.md
index 5dfc2ddb..f5f5c5f3 100644
--- a/README.md
+++ b/README.md
@@ -32,7 +32,7 @@ const MyComponent = mock();
   - [Dummies](./docs/Dummies.md)
      - [`mock()`](./docs/mock.md) and [`loadable()`](./docs/loadable.md)
      - [`lazy()`](./docs/lazy.md), [`delayed()`](./docs/delayed.md), and [`viewport()`](./docs/viewport.md)
-  - [Inversion](./docs/inversion.md)
+  - [Inversion](./docs/Inversion.md)
      - [`invert()`](./docs/invert.md) and [`<Inverted>`](./docs/invert.md#inverted)
      - [`<State>`](./docs/State.md) and [`withState()`](./docs/State.md#withstate-hoc)
         - [`<Toggle>`](./docs/Toggle.md), [`withToggle()`](./docs/Toggle.md#withtoggle-hoc), and [`@withToggle`](./docs/Toggle.md#withtoggle-decorator)
diff --git a/docs/Introduction.md b/docs/Introduction.md
index 435be8bb..4b62573f 100644
--- a/docs/Introduction.md
+++ b/docs/Introduction.md
@@ -3,7 +3,12 @@
 `libreact` is a collection of most essential React utilities you will probably need in any project.
 
 [Render prop](#render-props) and [FaCC](#facc) notation is usually used interchangeably as most `libreact`
-components support both interfaces.
+components support both interfaces. Also, most render prop components support
+[component prop](#component-prop) interface, with the following precedence:
+
+  1. FaCC
+  2. Render prop
+  3. Component prop
 
 
 ## Render props
@@ -55,6 +60,20 @@ h(MouseSensor, null, ({posX, posY}) => h('div')})
 ```
 
 
+## Component prop
+
+*Component prop* is when a component expects a `component` or `comp` prop that is
+itself a component.
+
+```jsx
+<Route match='/home' comp={Home} />
+<Route match='/user' component={User} />
+```
+
+`libreact` supports both ways of component prop (`comp` and `component`). Normally, when a component has a
+render prop interface it will also support the component prop interface.
+
+
 ## HOC
 
 HOC or *Higher Order Component* is a function that receives AND/OR returns React components.
@@ -62,4 +81,4 @@ HOC or *Higher Order Component* is a function that receives AND/OR returns React
 
 ## Enhancer
 
-*Enhancer* is a HOC that receives AND returns a React component.
+*Enhancer* is a HOC that receives AND returns a React components.
diff --git a/docs/inversion.md b/docs/inversion.md
index 179c3a0e..f02a53c0 100644
--- a/docs/inversion.md
+++ b/docs/inversion.md
@@ -4,7 +4,7 @@
 >
 > the action of inverting something or the state of being inverted.
 
-Inversion is a technique where one injects state and/or life-cycle methods into render-prop/FaCC.
+Inversion is a technique where one injects state and/or life-cycle methods into a render prop.
 
 This effectively allows you to have
 
@@ -16,13 +16,13 @@ This effectively allows you to have
 in JSX tree without having to write stateful React components.
 
   - [`invert()`](./invert.md) and [`<Inverted>`](./invert.md#inverted) - inverts DOM element `ref`.
-  - [`<State>`](./State.md) - inverts state and `.setState()` method.
+  - [`<State>`](./State.md) - inverts `.state` and `.setState()` method.
      - [`<Toggle>`](./Toggle.md), [`<Flipflop>`](./Flipflop.md), [`<Value>`](./Value.md), [`<Couter>`](./Counter.md), [`<List>`](./List.md), and [`<Map>`](./Map.md)
 
 
 ## Example
 
-A basic example, `cnt` is incremented by 1 on each click:
+A basic example, `cnt` is incremented by 1 on each click
 
 ```jsx
 <State init={{cnt: 0}}>
@@ -33,3 +33,13 @@ A basic example, `cnt` is incremented by 1 on each click:
   }
 <State>
 ```
+
+or the same using `<Counter>` component
+
+```jsx
+<Counter>{({value, inc}) =>
+  <div onClick={inc}>
+    {value}
+  </div>
+}</Counter>
+```
diff --git a/src/route/__story__/StoryRouteExample.tsx b/src/route/__story__/StoryRouteExample.tsx
index b1f86cf9..7c857ea1 100644
--- a/src/route/__story__/StoryRouteExample.tsx
+++ b/src/route/__story__/StoryRouteExample.tsx
@@ -1,12 +1,12 @@
 import {createElement as h} from 'react';
 import {LocationSensor} from '../../LocationSensor';
-import {Router, Route} from '..';
+import {Router, Route, Route404} from '..';
 
 const StoryRouteExample = () => (
   <Router>
     <div>
       <ul>
-        <li onClick={() => history.pushState(null, '', '/home.html')}>Home</li>
+        <li onClick={() => history.pushState(null, '', '/home')}>Home</li>
         <li onClick={() => history.pushState(null, '', '/home/intro.html')}>Home / Intro</li>
         <li onClick={() => history.pushState(null, '', '/home/more.html')}>Home / More</li>
         <li onClick={() => history.pushState(null, '', '/page.html')}>Page</li>
@@ -16,12 +16,12 @@ const StoryRouteExample = () => (
       <Route match='/home'>{() =>
         <div>
           <div>HOME</div>
-          <Route match='/intro' children={<div>INTRO</div>} />
-          <Route children={<div>HOME/404</div>} />
+          <Route match='/intro' children={<div>HOME/INTRO</div>} />
+          <Route404 children={<div>HOME/404</div>} />
         </div>
       }</Route>
-      <Route match={/^\/page\.html/} children={<div>PAGE</div>} />
-      <Route children={<div>404</div>} />
+      <Route match={/^\/page\.html/} render={<div>PAGE</div>} />
+      <Route404 children={<div>404</div>} />
 
       <br />
       <hr />
@@ -43,8 +43,8 @@ const StoryRouteExample = () => (
     <Route children={<div>HOME/404</div>} />
   </div>
 }</Route>
-<Route match={/^\/page\.html/} children={<div>PAGE</div>} />
-<Route children={<div>404</div>} />
+<Route match={/^\/page\.html/} render={<div>PAGE</div>} />
+<Route max={0} children={<div>404</div>} />
       `}</pre>
     </div>
   </Router>
diff --git a/src/route/index.ts b/src/route/index.ts
index 87a8ae1c..59f69816 100644
--- a/src/route/index.ts
+++ b/src/route/index.ts
@@ -2,6 +2,7 @@ import {Component} from 'react';
 import {LocationSensor} from '../LocationSensor';
 import {Provider, Consumer} from '../context';
 import {h, ns} from '../util';
+import renderProp from '../util/renderProp';
 
 export interface IRouteProviderProps {
   children?: any;
@@ -13,7 +14,7 @@ export interface IRouteProviderProps {
 export class Router extends Component<IRouteProviderProps, any> {
   matches: number = 0;
 
-  onMatch = () => {
+  inc = () => {
     this.matches++;
   };
 
@@ -25,8 +26,8 @@ export class Router extends Component<IRouteProviderProps, any> {
       name: ns(`route/${this.props.ns}`),
       value: {
         route,
-        onMatch: this.onMatch,
-        getMatches: () => this.matches,
+        inc: this.inc,
+        count: () => this.matches,
         parent: this.props.parent
       }
     }, Array.isArray(children) ? h('div', null, children) : children);
@@ -55,10 +56,12 @@ export type TRouteMatcher = (route: string) => TRouteMatchResult;
 
 export interface IRouteMatch {
   children?: React.ReactElement<any> | ((params) => React.ReactElement<any>);
-  cnt?: number;
+  render?: React.ReactElement<any> | ((params) => React.ReactElement<any>);
   comp?: React.ComponentClass<any> | React.StatelessComponent<any>;
   exact?: boolean;
   match?: TRouteMatcher | RegExp | string;
+  min?: number;
+  max?: number;
   ns?: string;
   preserve?: boolean;
 }
@@ -66,7 +69,8 @@ export interface IRouteMatch {
 export class Route extends Component<IRouteMatch, any> {
   static defaultProps = {
     match: /.+/,
-    cnt: 0
+    min: 0,
+    max: Infinity
   };
 
   matcher (): TRouteMatcher {
@@ -99,30 +103,22 @@ export class Route extends Component<IRouteMatch, any> {
     };
   }
 
-  renderChildren (props) {
-    const {comp, children} = this.props;
-
-    return comp ?
-      h(comp, props) :
-      typeof children === 'function' ?
-        children(props) :
-        children;
-  }
-
   render () {
-    return h(Consumer, {name: ns(`route/${this.props.ns}`)}, ({route, onMatch, getMatches, parent}) => {
-      const {children, match, preserve} = this.props;
+    return h(Consumer, {name: ns(`route/${this.props.ns}`)}, ({route, inc, count, parent}) => {
+      const {children, match, preserve, min, max} = this.props;
+      const matchCount = count();
+      console.log('...');
+      console.log('matchCount', matchCount);
 
-      if (getMatches() <= this.props.cnt) {
+      if ((matchCount >= min) && (matchCount <= max)) {
         const matchResult = this.matcher()(route);
 
         if (matchResult) {
+          // Increment number of matched routes.
+          inc();
+
           (matchResult as any).parent = parent;
           const {matches, length} = matchResult;
-
-          // Notify <RouteProvider> that we matched.
-          onMatch(this, matchResult);
-
           let newRoute = route;
 
           if (!preserve && length) {
@@ -130,7 +126,7 @@ export class Route extends Component<IRouteMatch, any> {
           }
 
           return h(Router, {route: newRoute, parent: matchResult},
-            this.renderChildren({
+            renderProp(this.props, {
               match: route.substr(0, length),
               matches,
               route: newRoute,
@@ -145,4 +141,9 @@ export class Route extends Component<IRouteMatch, any> {
   }
 }
 
+export const Route404 = (props) => h(Route, {
+  max: 0,
+  ...props
+});
+
 export * from './go';
diff --git a/src/util/renderProp.ts b/src/util/renderProp.ts
index 022b4e27..e948daaf 100644
--- a/src/util/renderProp.ts
+++ b/src/util/renderProp.ts
@@ -1,4 +1,4 @@
-import {isFn} from '../util';
+import {h, isFn} from '../util';
 
 const renderProp = (props, ...args) => {
   if (process.env.NODE_ENV !== 'production') {
@@ -17,13 +17,15 @@ const renderProp = (props, ...args) => {
     }
   }
 
-  const {children, render} = props;
+  const {children, comp, component, render} = props;
 
   return isFn(children) ?
     children(...args) :
     isFn(render) ?
       render(...args) :
-      (children || null);
+      (comp || component) ?
+        h(comp || component, args[0]) :
+        (children || render || null);
 };
 
 export default renderProp;

From dc0eeba592767f0ab50dd8ea28080290246eed1f Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sun, 28 Jan 2018 13:53:44 +0000
Subject: [PATCH 67/78] refactor: refactor and improve <Link> component

---
 docs/Introduction.md                       |  2 +-
 docs/Sensors.md                            |  4 +-
 src/Link/index.ts                          | 77 ++++++++++++++++++++++
 src/route/Link.ts                          | 51 --------------
 src/route/__story__/StoryRouteExample2.tsx | 12 ++--
 src/route/index.ts                         |  3 +-
 src/util/renderProp.ts                     |  6 +-
 7 files changed, 89 insertions(+), 66 deletions(-)
 create mode 100644 src/Link/index.ts
 delete mode 100644 src/route/Link.ts

diff --git a/docs/Introduction.md b/docs/Introduction.md
index 4b62573f..ef30974b 100644
--- a/docs/Introduction.md
+++ b/docs/Introduction.md
@@ -81,4 +81,4 @@ HOC or *Higher Order Component* is a function that receives AND/OR returns React
 
 ## Enhancer
 
-*Enhancer* is a HOC that receives AND returns a React components.
+*Enhancer* is a HOC that receives AND returns React components.
diff --git a/docs/Sensors.md b/docs/Sensors.md
index 4ab6b0d3..7ae72d87 100644
--- a/docs/Sensors.md
+++ b/docs/Sensors.md
@@ -12,7 +12,7 @@ For example, the below `<div>` will be re-rendered every time mouse position cha
 
 `libreact` comes with plenty of sensors built-in.
 
-  - [`<BatterySensor>`](./BatterySensor.md) &mdash; tracks batter status.
+  - [`<BatterySensor>`](./BatterySensor.md) &mdash; tracks battery status.
   - [`<GeoLocationSensor>`](./GeoLocationSensor.md) &mdash; tracks device geographical location.
   - [`<MediaDeviceSensor>`](./MediaDeviceSensor.md) &mdash; tracks media devices connected to your device.
   - [`<MediaSensor>`](./MediaSensor.md) &mdash; tracks matches of a media query.
@@ -31,5 +31,5 @@ For example, the below `<div>` will be re-rendered every time mouse position cha
   - [`<WindowSizeSensor>`](./WindowSizeSensor.md) &mdash; tracks window size.
 
 Most sensors have also corresponding HOC and class decorator that provide the same functionality.
-For example, [`<NetworkSensor>`](./NetworkSensor.md) render prop has a corresponding [`withNetowrk()`](./NetworkSensor.md#withnetwork-hoc) HOC and
+For example, [`<NetworkSensor>`](./NetworkSensor.md) render prop component has a corresponding [`withNetowrk()`](./NetworkSensor.md#withnetwork-hoc) HOC and
 [`@withNetwork`](./NetworkSensor.md#withnetwork-decorator) decorator.
diff --git a/src/Link/index.ts b/src/Link/index.ts
new file mode 100644
index 00000000..487a8aab
--- /dev/null
+++ b/src/Link/index.ts
@@ -0,0 +1,77 @@
+import {Component, cloneElement} from 'react';
+import {h, noop} from '../util';
+import {go} from '../route';
+import renderProp from '../util/renderProp';
+
+const isModifiedEvent = (event) =>
+  !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
+
+export interface ILinkProps extends React.AllHTMLAttributes<any> {
+  replace?: boolean;
+  state?: any | ((props: ILinkProps) => any);
+  to?: string;
+  a?: boolean;
+}
+
+export interface ILinkState {
+
+}
+
+export class Link extends Component<ILinkProps, any> {
+  el: HTMLElement = null;
+  target: string = '';
+
+  ref = (originalRef) => (el) => {
+    this.el = el;
+    (originalRef || noop)(el);
+  };
+
+  onClick = (originalClick) => (event) => {
+    (originalClick || noop)(event);
+
+    const {replace, to, state} = this.props;
+
+    if (!event.defaultPrevented && // onClick prevented default
+      event.button === 0 && // ignore everything but left clicks
+      !this.target && // let browser handle "target=_blank" etc.
+      !isModifiedEvent(event) // ignore clicks with modifier keys
+    ) {
+      event.preventDefault();
+
+      go(to, {
+        replace,
+        state: typeof state === 'function' ? state(this.props) : state
+      });
+    }
+  };
+
+  render () {
+    const {replace, state, to, a, ...rest} = this.props;
+    let element = renderProp(this.props, {
+      go,
+      to
+    });
+
+    if (!element) {
+      return null;
+    }
+
+    if (a || (typeof element !== 'object')) {
+      element = h('a', rest, element);
+    }
+
+    const props: any = {
+      ref: this.ref(element.ref),
+      onClick: this.onClick(element.props.originalClick)
+    };
+
+    this.target = '';
+
+    if (element.type === 'a') {
+      this.target = element.props.target;
+      props.href = to;
+    }
+
+    return cloneElement(element, props);
+  }
+}
diff --git a/src/route/Link.ts b/src/route/Link.ts
deleted file mode 100644
index b526ec11..00000000
--- a/src/route/Link.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-// Props to: https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/Link.js
-import {Component} from 'react';
-import {h} from '../util';
-import {go} from '.';
-
-const isModifiedEvent = (event) =>
-  !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
-
-export interface ILinkProps {
-  onClick?: (event) => void;
-  target?: string;
-  replace?: boolean;
-  state?: any;
-  to?: string;
-  innerRef?: (el) => void;
-}
-
-export class Link extends Component<ILinkProps, any> {
-  onClick = (event) => {
-    const {onClick, replace, target, to, state} = this.props;
-
-    if (onClick) {
-      onClick(event);
-    }
-
-    if (!event.defaultPrevented && // onClick prevented default
-      event.button === 0 && // ignore everything but left clicks
-      !target && // let browser handle "target=_blank" etc.
-      !isModifiedEvent(event) // ignore clicks with modifier keys
-    ) {
-      event.preventDefault();
-
-      go(to, {
-        replace,
-        state: typeof state === 'function' ? state() : state
-      });
-    }
-  };
-
-  render () {
-    const {props, onClick} = this;
-    const {replace, to, innerRef: ref, ...rest} = this.props;
-
-    return h('a', {
-      ...rest,
-      href: to,
-      ref,
-      onClick,
-    });
-  }
-}
diff --git a/src/route/__story__/StoryRouteExample2.tsx b/src/route/__story__/StoryRouteExample2.tsx
index 0c3883b0..a10e24d3 100644
--- a/src/route/__story__/StoryRouteExample2.tsx
+++ b/src/route/__story__/StoryRouteExample2.tsx
@@ -1,6 +1,6 @@
 import {h} from '../../util';
 import {Router, Route, go} from '..';
-import {Link} from '../Link';
+import {Link} from '../../Link';
 
 const StoryRouteExample2 = () => (
   <Router>
@@ -8,13 +8,13 @@ const StoryRouteExample2 = () => (
       <ul>
         <li><a onClick={() => go('/')}>Home</a></li>
         <li><Link to='/about'>About</Link></li>
-        <li><Link to='/topics'>Topics</Link></li>
+        <li><Link a to='/topics'><span>Topics</span></Link></li>
       </ul>
 
       <hr/>
 
       <Route exact match='/' comp={Home} />
-      <Route match='/about' comp={About} />
+      <Route match='/about' component={About} />
       <Route match='/topics' comp={Topics} />
     </div>
   </Router>
@@ -35,8 +35,6 @@ const About = () => (
 const Topics = (props) => {
   const {match} = props;
 
-  console.log('PROPS', props);
-
   return (
     <div>
       <h2>Topics</h2>
@@ -47,13 +45,13 @@ const Topics = (props) => {
           </Link>
         </li>
         <li>
-          <Link to={`${match}/components`}>
+          <Link a to={`${match}/components`}>
             Components
           </Link>
         </li>
         <li>
           <Link to={`${match}/props-v-state`}>
-            Props v. State
+            <a>Props v. State</a>
           </Link>
         </li>
       </ul>
diff --git a/src/route/index.ts b/src/route/index.ts
index 59f69816..5ec0a630 100644
--- a/src/route/index.ts
+++ b/src/route/index.ts
@@ -58,6 +58,7 @@ export interface IRouteMatch {
   children?: React.ReactElement<any> | ((params) => React.ReactElement<any>);
   render?: React.ReactElement<any> | ((params) => React.ReactElement<any>);
   comp?: React.ComponentClass<any> | React.StatelessComponent<any>;
+  component?: React.ComponentClass<any> | React.StatelessComponent<any>;
   exact?: boolean;
   match?: TRouteMatcher | RegExp | string;
   min?: number;
@@ -107,8 +108,6 @@ export class Route extends Component<IRouteMatch, any> {
     return h(Consumer, {name: ns(`route/${this.props.ns}`)}, ({route, inc, count, parent}) => {
       const {children, match, preserve, min, max} = this.props;
       const matchCount = count();
-      console.log('...');
-      console.log('matchCount', matchCount);
 
       if ((matchCount >= min) && (matchCount <= max)) {
         const matchResult = this.matcher()(route);
diff --git a/src/util/renderProp.ts b/src/util/renderProp.ts
index e948daaf..5040b127 100644
--- a/src/util/renderProp.ts
+++ b/src/util/renderProp.ts
@@ -17,14 +17,14 @@ const renderProp = (props, ...args) => {
     }
   }
 
-  const {children, comp, component, render} = props;
+  const {children, component, comp = component, render} = props;
 
   return isFn(children) ?
     children(...args) :
     isFn(render) ?
       render(...args) :
-      (comp || component) ?
-        h(comp || component, args[0]) :
+      comp ?
+        h(comp, args[0]) :
         (children || render || null);
 };
 

From 07baf31368dfea31b4a4dac56707ee842c5ac362 Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sun, 28 Jan 2018 15:42:42 +0000
Subject: [PATCH 68/78] feat: improve Router

---
 README.md                                     |  2 +-
 src/Link/index.ts                             | 28 ++++--
 src/route/__story__/StoryRouteExample2.tsx    |  4 +-
 .../__story__/StoryRouteTruncateRoute.tsx     | 21 ++++-
 src/route/__tests__/index.test-server.tsx     |  2 +-
 src/route/index.ts                            | 94 ++++++++++++-------
 src/util/renderProp.ts                        | 14 +--
 7 files changed, 109 insertions(+), 56 deletions(-)

diff --git a/README.md b/README.md
index f5f5c5f3..49665c86 100644
--- a/README.md
+++ b/README.md
@@ -71,7 +71,7 @@ const MyComponent = mock();
      - [`<Provider>`](./docs/context.md#provider), [`<Consumer>`](./docs/context.md#consumer), [`withContext()`](./docs/context.md#withcontext), and `@withContext`
      - [`<Theme>`](./docs/theme.md#theme), [`<Themed>`](./docs/theme.md#themed), [`withTheme()`](./docs/theme.md#withtheme), and `@withTheme`
      - `<CssVars>`
-     - [`<Router>`](./docs/route.md#router), [`<Route>`](./docs/route.md#route), [`withRoute()`](./docs/route.md#withroute), and `@withRoute`
+     - [`<Router>`](./docs/route.md#router), [`<Route>`](./docs/route.md#route), [`withRoute()`](./docs/route.md#withroute), `@withRoute`, `go()`, and `<Go>`
      - `<Translations>`, `<Translate>`, `withTranslations`, and `@withTranslations`
   - [CSS resets](./docs/CSS-resets.md)
      - [`<CssResetEricMeyer>`](./docs/reset/CssResetEricMeyer.md) and [`<CssResetEricMeyerCondensed>`](./docs/reset/CssResetEricMeyerCondensed.md)
diff --git a/src/Link/index.ts b/src/Link/index.ts
index 487a8aab..9479f2e8 100644
--- a/src/Link/index.ts
+++ b/src/Link/index.ts
@@ -7,6 +7,7 @@ const isModifiedEvent = (event) =>
   !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
 
 export interface ILinkProps extends React.AllHTMLAttributes<any> {
+  bond?: boolean | string;
   replace?: boolean;
   state?: any | ((props: ILinkProps) => any);
   to?: string;
@@ -26,7 +27,7 @@ export class Link extends Component<ILinkProps, any> {
     (originalRef || noop)(el);
   };
 
-  onClick = (originalClick) => (event) => {
+  onClick = (originalClick?) => (event) => {
     (originalClick || noop)(event);
 
     const {replace, to, state} = this.props;
@@ -46,11 +47,23 @@ export class Link extends Component<ILinkProps, any> {
   };
 
   render () {
-    const {replace, state, to, a, ...rest} = this.props;
-    let element = renderProp(this.props, {
+    let {bond, replace, state, to, a, ...rest} = this.props;
+    const renderPropState: any = {
       go,
       to
-    });
+    };
+
+    if (bond) {
+      if (typeof bond !== 'string') {
+        bond = 'bond';
+      }
+
+      renderPropState[bond] = {
+        onClick: this.onClick()
+      };
+    }
+
+    let element = renderProp(this.props, renderPropState);
 
     if (!element) {
       return null;
@@ -61,10 +74,13 @@ export class Link extends Component<ILinkProps, any> {
     }
 
     const props: any = {
-      ref: this.ref(element.ref),
-      onClick: this.onClick(element.props.originalClick)
+      ref: this.ref(element.ref)
     };
 
+    if (!bond) {
+      props.onClick = this.onClick(element.props.originalClick);
+    }
+
     this.target = '';
 
     if (element.type === 'a') {
diff --git a/src/route/__story__/StoryRouteExample2.tsx b/src/route/__story__/StoryRouteExample2.tsx
index a10e24d3..18c69ddb 100644
--- a/src/route/__story__/StoryRouteExample2.tsx
+++ b/src/route/__story__/StoryRouteExample2.tsx
@@ -1,5 +1,5 @@
 import {h} from '../../util';
-import {Router, Route, go} from '..';
+import {Router, Route, go, Go} from '..';
 import {Link} from '../../Link';
 
 const StoryRouteExample2 = () => (
@@ -7,7 +7,7 @@ const StoryRouteExample2 = () => (
     <div>
       <ul>
         <li><a onClick={() => go('/')}>Home</a></li>
-        <li><Link to='/about'>About</Link></li>
+        <li><Go to='/about'>About</Go></li>
         <li><Link a to='/topics'><span>Topics</span></Link></li>
       </ul>
 
diff --git a/src/route/__story__/StoryRouteTruncateRoute.tsx b/src/route/__story__/StoryRouteTruncateRoute.tsx
index f5cc1616..a0740f7d 100644
--- a/src/route/__story__/StoryRouteTruncateRoute.tsx
+++ b/src/route/__story__/StoryRouteTruncateRoute.tsx
@@ -6,13 +6,17 @@ const StoryRouteTruncateRoute = () =>
   <div>
     <Router route='/api/users/123.json'>
       <Route match='/api'>
+        /api
         <div>
-          API
+        /api
         <Route match='/users'>
           <div>
-            USERS
+            /api/users
           <Route match={/.*/}>{(result) =>
-            <pre style={{fontFamily: 'monospace'}}>{JSON.stringify(result, null, 4)}</pre>
+            <div>
+              /api/users/.*
+              <pre style={{fontFamily: 'monospace'}}>{JSON.stringify(result, null, 4)}</pre>
+            </div>
           }</Route>
           </div>
         </Route>
@@ -25,11 +29,20 @@ const StoryRouteTruncateRoute = () =>
     <pre style={{fontFamily: 'monospace'}}>{`
 <Router route='/api/users/123.json'>
   <Route match='/api'>
+    <div>
+    /api
     <Route match='/users'>
+      <div>
+        /api/users
       <Route match={/.*/}>{(result) =>
-        <pre style={{fontFamily: 'monospace'}}>{JSON.stringify(result, null, 4)}</pre>
+        <div>
+          /api/users/.*
+          <pre style={{fontFamily: 'monospace'}}>{JSON.stringify(result, null, 4)}</pre>
+        </div>
       }</Route>
+      </div>
     </Route>
+    </div>
   </Route>
 </Router>
     `}</pre>
diff --git a/src/route/__tests__/index.test-server.tsx b/src/route/__tests__/index.test-server.tsx
index a84450c6..3f0f5957 100644
--- a/src/route/__tests__/index.test-server.tsx
+++ b/src/route/__tests__/index.test-server.tsx
@@ -34,7 +34,7 @@ describe('route SSR', () => {
       </Router>
     );
 
-    expect(html).to.equal('<div><span>1</span></div>');
+    expect(html).to.equal('<div><span>1</span><span>3</span><span>4</span></div>');
   });
 
   it('matches partial step', () => {
diff --git a/src/route/index.ts b/src/route/index.ts
index 5ec0a630..75049de2 100644
--- a/src/route/index.ts
+++ b/src/route/index.ts
@@ -3,10 +3,12 @@ import {LocationSensor} from '../LocationSensor';
 import {Provider, Consumer} from '../context';
 import {h, ns} from '../util';
 import renderProp from '../util/renderProp';
+import {Link, ILinkProps} from '../Link';
 
 export interface IRouteProviderProps {
   children?: any;
   ns?: string;
+  fullRoute?: string;
   route?: string;
   parent?: TRouteMatchResult;
 }
@@ -19,18 +21,19 @@ export class Router extends Component<IRouteProviderProps, any> {
   };
 
   renderProvider (route) {
-    const {children} = this.props;
+    const {children, fullRoute} = this.props;
     this.matches = 0;
 
     const element = h(Provider, {
       name: ns(`route/${this.props.ns}`),
       value: {
+        fullRoute: this.props.fullRoute || route,
         route,
         inc: this.inc,
         count: () => this.matches,
         parent: this.props.parent
       }
-    }, Array.isArray(children) ? h('div', null, children) : children);
+    }, renderProp(this.props));
 
     return element;
   }
@@ -54,8 +57,37 @@ export interface TRouteMatchResult {
 
 export type TRouteMatcher = (route: string) => TRouteMatchResult;
 
+export function createMatcher (match: string | RegExp | TRouteMatcher, exact?: boolean): TRouteMatcher {
+  let matcher: TRouteMatcher;
+
+  if (typeof match === 'function') {
+    return match;
+  }
+
+  let regex: RegExp;
+
+  if (typeof match === 'string') {
+    regex = new RegExp(`^(${match}${exact ? '$' : ''})`);
+  } else {
+    regex = match;
+  }
+
+  return (route: string) => {
+    const matches = route.match(regex);
+
+    if (!matches) {
+      return null;
+    }
+
+    return {
+      length: (matches && matches[1]) ? matches[1].length : 0,
+      matches
+    };
+  };
+}
+
 export interface IRouteMatch {
-  children?: React.ReactElement<any> | ((params) => React.ReactElement<any>);
+  children?: any;
   render?: React.ReactElement<any> | ((params) => React.ReactElement<any>);
   comp?: React.ComponentClass<any> | React.StatelessComponent<any>;
   component?: React.ComponentClass<any> | React.StatelessComponent<any>;
@@ -74,43 +106,13 @@ export class Route extends Component<IRouteMatch, any> {
     max: Infinity
   };
 
-  matcher (): TRouteMatcher {
-    const {match} = this.props;
-    let matcher: TRouteMatcher;
-
-    if (typeof match === 'function') {
-      return match;
-    }
-
-    let regex: RegExp;
-
-    if (typeof match === 'string') {
-      regex = new RegExp(`^(${match}${this.props.exact ? '$' : ''})`);
-    } else {
-      regex = match;
-    }
-
-    return (route: string) => {
-      const matches = route.match(regex);
-
-      if (!matches) {
-        return null;
-      }
-
-      return {
-        length: (matches && matches[1]) ? matches[1].length : 0,
-        matches
-      };
-    };
-  }
-
   render () {
     return h(Consumer, {name: ns(`route/${this.props.ns}`)}, ({route, inc, count, parent}) => {
-      const {children, match, preserve, min, max} = this.props;
+      const {children, exact, match, preserve, min, max} = this.props;
       const matchCount = count();
 
       if ((matchCount >= min) && (matchCount <= max)) {
-        const matchResult = this.matcher()(route);
+        const matchResult = createMatcher(match, exact)(route);
 
         if (matchResult) {
           // Increment number of matched routes.
@@ -124,7 +126,11 @@ export class Route extends Component<IRouteMatch, any> {
             newRoute = newRoute.substr(length);
           }
 
-          return h(Router, {route: newRoute, parent: matchResult},
+          return h(Router, {
+            fullRoute: route,
+            route: newRoute,
+            parent: matchResult
+          },
             renderProp(this.props, {
               match: route.substr(0, length),
               matches,
@@ -146,3 +152,19 @@ export const Route404 = (props) => h(Route, {
 });
 
 export * from './go';
+
+export interface IGoProps extends ILinkProps {
+  ns?: string;
+}
+
+export interface IGoState {
+
+}
+
+export class Go extends Component<IGoProps, IGoState> {
+  render () {
+    return h(Consumer, {name: ns(`route/${this.props.ns}`)}, ({fullRoute, route, inc, count, parent}) => {
+      return h(Link, this.props)
+    });
+  }
+}
diff --git a/src/util/renderProp.ts b/src/util/renderProp.ts
index 5040b127..df6cb8c7 100644
--- a/src/util/renderProp.ts
+++ b/src/util/renderProp.ts
@@ -17,15 +17,17 @@ const renderProp = (props, ...args) => {
     }
   }
 
-  const {children, component, comp = component, render} = props;
+  const {render, children = render, component, comp = component} = props;
 
   return isFn(children) ?
     children(...args) :
-    isFn(render) ?
-      render(...args) :
-      comp ?
-        h(comp, args[0]) :
-        (children || render || null);
+    comp ?
+      h(comp, args[0]) :
+      children && (typeof children !== 'object') ?
+        h('div', null, children) :
+        children instanceof Array ?
+          h('div', null, ...children) :
+          (children || null);
 };
 
 export default renderProp;

From da2c45c5735fb3f63933b5c102665bfbe2ff0a28 Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sun, 28 Jan 2018 16:25:10 +0000
Subject: [PATCH 69/78] feat: improve <Link> and <Go>

---
 src/Link/index.ts                             | 17 +++++++---
 .../__story__/StoryRouteTruncateRoute.tsx     | 13 ++------
 src/route/index.ts                            | 33 +++++++++++++++----
 3 files changed, 41 insertions(+), 22 deletions(-)

diff --git a/src/Link/index.ts b/src/Link/index.ts
index 9479f2e8..3cbc346f 100644
--- a/src/Link/index.ts
+++ b/src/Link/index.ts
@@ -1,6 +1,6 @@
 import {Component, cloneElement} from 'react';
 import {h, noop} from '../util';
-import {go} from '../route';
+import {go, TGo} from '../route/go';
 import renderProp from '../util/renderProp';
 
 const isModifiedEvent = (event) =>
@@ -12,6 +12,8 @@ export interface ILinkProps extends React.AllHTMLAttributes<any> {
   state?: any | ((props: ILinkProps) => any);
   to?: string;
   a?: boolean;
+  onGo?: TGo;
+  isActive?: boolean;
 }
 
 export interface ILinkState {
@@ -19,6 +21,10 @@ export interface ILinkState {
 }
 
 export class Link extends Component<ILinkProps, any> {
+  static defaultProps = {
+    onGo: go
+  };
+
   el: HTMLElement = null;
   target: string = '';
 
@@ -30,16 +36,16 @@ export class Link extends Component<ILinkProps, any> {
   onClick = (originalClick?) => (event) => {
     (originalClick || noop)(event);
 
-    const {replace, to, state} = this.props;
+    const {onGo, replace, to, state} = this.props;
 
     if (!event.defaultPrevented && // onClick prevented default
       event.button === 0 && // ignore everything but left clicks
-      !this.target && // let browser handle "target=_blank" etc.
+      !this.target && // let browser handle "target=*"
       !isModifiedEvent(event) // ignore clicks with modifier keys
     ) {
       event.preventDefault();
 
-      go(to, {
+      onGo(to, {
         replace,
         state: typeof state === 'function' ? state(this.props) : state
       });
@@ -47,8 +53,9 @@ export class Link extends Component<ILinkProps, any> {
   };
 
   render () {
-    let {bond, replace, state, to, a, ...rest} = this.props;
+    let {bond, replace, state, to, a, isActive, ...rest} = this.props;
     const renderPropState: any = {
+      isActive,
       go,
       to
     };
diff --git a/src/route/__story__/StoryRouteTruncateRoute.tsx b/src/route/__story__/StoryRouteTruncateRoute.tsx
index a0740f7d..318ebfef 100644
--- a/src/route/__story__/StoryRouteTruncateRoute.tsx
+++ b/src/route/__story__/StoryRouteTruncateRoute.tsx
@@ -6,21 +6,16 @@ const StoryRouteTruncateRoute = () =>
   <div>
     <Router route='/api/users/123.json'>
       <Route match='/api'>
-        /api
-        <div>
         /api
         <Route match='/users'>
-          <div>
-            /api/users
+          /api/users
           <Route match={/.*/}>{(result) =>
             <div>
               /api/users/.*
               <pre style={{fontFamily: 'monospace'}}>{JSON.stringify(result, null, 4)}</pre>
             </div>
           }</Route>
-          </div>
         </Route>
-        </div>
       </Route>
     </Router>
 
@@ -29,20 +24,16 @@ const StoryRouteTruncateRoute = () =>
     <pre style={{fontFamily: 'monospace'}}>{`
 <Router route='/api/users/123.json'>
   <Route match='/api'>
-    <div>
     /api
     <Route match='/users'>
-      <div>
-        /api/users
+      /api/users
       <Route match={/.*/}>{(result) =>
         <div>
           /api/users/.*
           <pre style={{fontFamily: 'monospace'}}>{JSON.stringify(result, null, 4)}</pre>
         </div>
       }</Route>
-      </div>
     </Route>
-    </div>
   </Route>
 </Router>
     `}</pre>
diff --git a/src/route/index.ts b/src/route/index.ts
index 75049de2..6cedc934 100644
--- a/src/route/index.ts
+++ b/src/route/index.ts
@@ -4,6 +4,11 @@ import {Provider, Consumer} from '../context';
 import {h, ns} from '../util';
 import renderProp from '../util/renderProp';
 import {Link, ILinkProps} from '../Link';
+import {go, TGo} from './go';
+
+export {
+  go
+};
 
 export interface IRouteProviderProps {
   children?: any;
@@ -11,9 +16,14 @@ export interface IRouteProviderProps {
   fullRoute?: string;
   route?: string;
   parent?: TRouteMatchResult;
+  onGo?: TGo;
 }
 
 export class Router extends Component<IRouteProviderProps, any> {
+  static defaultProps = {
+    onGo: go
+  };
+
   matches: number = 0;
 
   inc = () => {
@@ -27,6 +37,7 @@ export class Router extends Component<IRouteProviderProps, any> {
     const element = h(Provider, {
       name: ns(`route/${this.props.ns}`),
       value: {
+        go: this.props.onGo,
         fullRoute: this.props.fullRoute || route,
         route,
         inc: this.inc,
@@ -107,7 +118,8 @@ export class Route extends Component<IRouteMatch, any> {
   };
 
   render () {
-    return h(Consumer, {name: ns(`route/${this.props.ns}`)}, ({route, inc, count, parent}) => {
+    return h(Consumer, {name: ns(`route/${this.props.ns}`)}, (context) => {
+      const {fullRoute, route, go, inc, count, parent} = context;
       const {children, exact, match, preserve, min, max} = this.props;
       const matchCount = count();
 
@@ -132,9 +144,11 @@ export class Route extends Component<IRouteMatch, any> {
             parent: matchResult
           },
             renderProp(this.props, {
+              go,
               match: route.substr(0, length),
               matches,
               route: newRoute,
+              fullRoute,
               parent
             })
           );
@@ -151,20 +165,27 @@ export const Route404 = (props) => h(Route, {
   ...props
 });
 
-export * from './go';
-
 export interface IGoProps extends ILinkProps {
+  exact?: boolean;
+  match?: TRouteMatcher | RegExp | string;
   ns?: string;
 }
 
 export interface IGoState {
-
 }
 
 export class Go extends Component<IGoProps, IGoState> {
   render () {
-    return h(Consumer, {name: ns(`route/${this.props.ns}`)}, ({fullRoute, route, inc, count, parent}) => {
-      return h(Link, this.props)
+    return h(Consumer, {name: ns(`route/${this.props.ns}`)}, ({fullRoute, route, go, inc, count, parent}) => {
+      const {exact, match} = this.props;
+      const matcher = createMatcher(match, exact);
+      const isActive = !!matcher(fullRoute);
+
+      return h(Link, {
+        ...(this.props as ILinkProps),
+        isActive,
+        onGo: go
+      })
     });
   }
 }

From 6b327ab1b4ce7ae1e2dffd66e2640ced99d55294 Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sun, 28 Jan 2018 17:54:59 +0000
Subject: [PATCH 70/78] feat: create <Translations> and <Translate>

---
 src/context/index.ts                          | 16 ++----
 .../__snapshots__/index.test.tsx.snap         |  3 ++
 src/route/__tests__/index.test.tsx            | 34 ++++++++++++
 src/translate/__story__/story.tsx             | 21 ++++++++
 src/translate/index.ts                        | 53 +++++++++++++++++++
 5 files changed, 115 insertions(+), 12 deletions(-)
 create mode 100644 src/route/__tests__/__snapshots__/index.test.tsx.snap
 create mode 100644 src/route/__tests__/index.test.tsx
 create mode 100644 src/translate/__story__/story.tsx
 create mode 100644 src/translate/index.ts

diff --git a/src/context/index.ts b/src/context/index.ts
index 594af8b3..d5dd43c2 100644
--- a/src/context/index.ts
+++ b/src/context/index.ts
@@ -1,19 +1,11 @@
 import {createElement as h} from 'react';
 import {Provider, Consumer} from 'freestyler-context';
+import faccToHoc from '../util/faccToHoc';
 
-export const withContext = (Comp: React.ComponentClass<any> | React.StatelessComponent<any>, name?: string) => {
-  return (props) => {
-    const {contextName = name, ...rest} = props;
-
-    return h(Consumer, {name: contextName}, (value) => {
-      rest[contextName] = value;
-
-      return h(Comp, rest);
-    });
-  };
-};
+const withContext = faccToHoc(Consumer, '');
 
 export {
   Provider,
-  Consumer
+  Consumer,
+  withContext
 };
diff --git a/src/route/__tests__/__snapshots__/index.test.tsx.snap b/src/route/__tests__/__snapshots__/index.test.tsx.snap
new file mode 100644
index 00000000..5d3c2c9a
--- /dev/null
+++ b/src/route/__tests__/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`route <Route> does basic routing 1`] = `"<div><div>/foo</div><!-- react-empty: 3 --></div>"`;
diff --git a/src/route/__tests__/index.test.tsx b/src/route/__tests__/index.test.tsx
new file mode 100644
index 00000000..2d5b558e
--- /dev/null
+++ b/src/route/__tests__/index.test.tsx
@@ -0,0 +1,34 @@
+import {mount} from 'enzyme';
+import {h} from '../../util';
+import {Router, Route} from '..';
+
+describe('route', () => {
+  describe('<Router>', () => {
+    it('is a component', () => {
+      expect(Router).toBeInstanceOf(Function);
+    });
+  });
+
+  describe('<Route>', () => {
+    it('is a component', () => {
+      expect(Route).toBeInstanceOf(Function);
+    });
+
+    it('does basic routing', () => {
+      const wrapper = mount(
+        <Router route='/foo'>
+          <div>
+            <Route match='/foo'>
+              /foo
+            </Route>
+            <Route match='/bar'>
+              /foo
+            </Route>
+          </div>
+        </Router>
+      );
+
+      expect(wrapper.html()).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/translate/__story__/story.tsx b/src/translate/__story__/story.tsx
new file mode 100644
index 00000000..6ba6fd16
--- /dev/null
+++ b/src/translate/__story__/story.tsx
@@ -0,0 +1,21 @@
+import {createElement as h} from 'react';
+import {storiesOf} from '@storybook/react';
+import {action} from '@storybook/addon-actions';
+import {linkTo} from '@storybook/addon-links';
+import {LocationSensor} from '../../LocationSensor';
+import {Translations, Translate, T, withT} from '..';
+import ShowDocs from '../../../.storybook/ShowDocs'
+
+storiesOf('Context/translate', module)
+  .add('Documentation', () => h(ShowDocs, {name: 'translate'}))
+  .add('Example', () => (
+    <Translations map={{
+      hello: 'world'
+    }}>
+      <div>
+        <T>{(T) =>
+          <span>{T('omg')}: {T('hello')}</span>
+        }</T>
+      </div>
+    </Translations>
+  ));
diff --git a/src/translate/index.ts b/src/translate/index.ts
new file mode 100644
index 00000000..c66c11f5
--- /dev/null
+++ b/src/translate/index.ts
@@ -0,0 +1,53 @@
+import {Component} from 'react';
+import {h, ns} from '../util';
+import {Provider, Consumer} from '../context';
+import faccToHoc from '../util/faccToHoc';
+import renderProp from '../util/renderProp';
+
+export interface ITranslationsProps {
+  map: {[key: string]: string | React.StatelessComponent<any>};
+  ns?: string;
+}
+
+export interface ITranslationsState {
+
+}
+
+export class Translations extends Component<ITranslationsProps, ITranslationsState> {
+  render () {
+    return h(Provider, {
+      name: ns(`T/${this.props.ns}`),
+      value: this.props.map
+    }, this.props.children);
+  }
+}
+
+export interface ITranslateProps {
+  ns?: string;
+}
+
+export interface ITranslateState {
+
+}
+
+export class Translate extends Component<ITranslateProps, ITranslateState> {
+  render () {
+    return h(Consumer, {name: ns(`T/${this.props.ns}`)}, (map) => {
+      const T = (key) => {
+        const value = map[key];
+
+        if (typeof value === 'function') {
+          return value(T);
+        }
+
+        return value || key;
+      };
+
+      return renderProp(this.props, T);
+    });
+  }
+}
+
+export const T = Translate;
+
+export const withT = faccToHoc(Translate, 'T');

From 767e9490f5588fe3380990c286e0a2b1f98cffd8 Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sun, 28 Jan 2018 18:10:08 +0000
Subject: [PATCH 71/78] test: add translation story

---
 README.md                         |  2 +-
 src/translate/__story__/story.tsx | 44 +++++++++++++++++++++++++++++--
 src/translate/index.ts            |  6 ++---
 3 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 49665c86..08669e39 100644
--- a/README.md
+++ b/README.md
@@ -72,7 +72,7 @@ const MyComponent = mock();
      - [`<Theme>`](./docs/theme.md#theme), [`<Themed>`](./docs/theme.md#themed), [`withTheme()`](./docs/theme.md#withtheme), and `@withTheme`
      - `<CssVars>`
      - [`<Router>`](./docs/route.md#router), [`<Route>`](./docs/route.md#route), [`withRoute()`](./docs/route.md#withroute), `@withRoute`, `go()`, and `<Go>`
-     - `<Translations>`, `<Translate>`, `withTranslations`, and `@withTranslations`
+     - `<Translations>`, `<Translate>`, `<T>`, `withT()`, and `@withT`
   - [CSS resets](./docs/CSS-resets.md)
      - [`<CssResetEricMeyer>`](./docs/reset/CssResetEricMeyer.md) and [`<CssResetEricMeyerCondensed>`](./docs/reset/CssResetEricMeyerCondensed.md)
      - [`<CssResetMinimalistic>`](./docs/reset/CssResetMinimalistic.md), [`<CssResetMinimalistic2>`](./docs/reset/CssResetMinimalistic2.md), and [`<CssResetMinimalistic3>`](./docs/reset/CssResetMinimalistic3.md)
diff --git a/src/translate/__story__/story.tsx b/src/translate/__story__/story.tsx
index 6ba6fd16..3742e5b3 100644
--- a/src/translate/__story__/story.tsx
+++ b/src/translate/__story__/story.tsx
@@ -4,7 +4,15 @@ import {action} from '@storybook/addon-actions';
 import {linkTo} from '@storybook/addon-links';
 import {LocationSensor} from '../../LocationSensor';
 import {Translations, Translate, T, withT} from '..';
-import ShowDocs from '../../../.storybook/ShowDocs'
+import ShowDocs from '../../../.storybook/ShowDocs';
+
+const Demo = ({T}) => {
+  return (
+    <span>{T('foo')}: {T('hello')}</span>
+  );
+};
+
+const Hoc1 = withT(Demo);
 
 storiesOf('Context/translate', module)
   .add('Documentation', () => h(ShowDocs, {name: 'translate'}))
@@ -14,8 +22,40 @@ storiesOf('Context/translate', module)
     }}>
       <div>
         <T>{(T) =>
-          <span>{T('omg')}: {T('hello')}</span>
+          <Demo T={T} />
         }</T>
       </div>
     </Translations>
+  ))
+  .add('HOC', () => (
+    <Translations map={{
+      foo: 'bar',
+      hello: (T) => `Hello, ${T('foo')}`
+    }}>
+      <div>
+        <Hoc1 />
+      </div>
+    </Translations>
+  ))
+  .add('Multiple namespaces', () => (
+    <Translations ns='a' map={{
+      foo: 'bar'
+    }}>
+      <Translations ns='b' map={{
+        foo: 'baz'
+      }}>
+        <div>
+          <div>
+            <T ns='a'>{(T) =>
+              <span>{T('foo')}</span>
+            }</T>
+          </div>
+          <div>
+            <T ns='b'>{(T) =>
+              <span>{T('foo')}</span>
+            }</T>
+          </div>
+        </div>
+      </Translations>
+    </Translations>
   ));
diff --git a/src/translate/index.ts b/src/translate/index.ts
index c66c11f5..357dcc92 100644
--- a/src/translate/index.ts
+++ b/src/translate/index.ts
@@ -5,7 +5,7 @@ import faccToHoc from '../util/faccToHoc';
 import renderProp from '../util/renderProp';
 
 export interface ITranslationsProps {
-  map: {[key: string]: string | React.StatelessComponent<any>};
+  map: {[key: string]: string | ((...args) => string)};
   ns?: string;
 }
 
@@ -33,11 +33,11 @@ export interface ITranslateState {
 export class Translate extends Component<ITranslateProps, ITranslateState> {
   render () {
     return h(Consumer, {name: ns(`T/${this.props.ns}`)}, (map) => {
-      const T = (key) => {
+      const T = (key, ...args) => {
         const value = map[key];
 
         if (typeof value === 'function') {
-          return value(T);
+          return value(T, ...args);
         }
 
         return value || key;

From 89c15037fb8d6abf8479f2654f490401d958ad00 Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sun, 28 Jan 2018 18:29:56 +0000
Subject: [PATCH 72/78] docs: add translation docs

---
 README.md         |   2 +-
 docs/translate.md | 100 ++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 101 insertions(+), 1 deletion(-)
 create mode 100644 docs/translate.md

diff --git a/README.md b/README.md
index 08669e39..1b5ebc76 100644
--- a/README.md
+++ b/README.md
@@ -72,7 +72,7 @@ const MyComponent = mock();
      - [`<Theme>`](./docs/theme.md#theme), [`<Themed>`](./docs/theme.md#themed), [`withTheme()`](./docs/theme.md#withtheme), and `@withTheme`
      - `<CssVars>`
      - [`<Router>`](./docs/route.md#router), [`<Route>`](./docs/route.md#route), [`withRoute()`](./docs/route.md#withroute), `@withRoute`, `go()`, and `<Go>`
-     - `<Translations>`, `<Translate>`, `<T>`, `withT()`, and `@withT`
+     - [`<Translations>`](./docs/translate.md#translations), [`<Translate>`](./docs/translate.md#translate), [`<T>`](./docs/translate.md#translate), [`withT()`](./docs/translate.md#witht-hoc), and [`@withT`](./docs/translate.md#witht-decorator)
   - [CSS resets](./docs/CSS-resets.md)
      - [`<CssResetEricMeyer>`](./docs/reset/CssResetEricMeyer.md) and [`<CssResetEricMeyerCondensed>`](./docs/reset/CssResetEricMeyerCondensed.md)
      - [`<CssResetMinimalistic>`](./docs/reset/CssResetMinimalistic.md), [`<CssResetMinimalistic2>`](./docs/reset/CssResetMinimalistic2.md), and [`<CssResetMinimalistic3>`](./docs/reset/CssResetMinimalistic3.md)
diff --git a/docs/translate.md b/docs/translate.md
new file mode 100644
index 00000000..52f4123d
--- /dev/null
+++ b/docs/translate.md
@@ -0,0 +1,100 @@
+# Translate
+
+Provides translation API using [context](./context.md) interfaces.
+
+
+## `<Translations>`
+
+Translation provider, use it to broadcast your translation map. You can have multiple nested
+translations providers, where child provider will overwrite parent's translations. Also, you
+can have different translation providers at the same time, using the namespace `ns` prop.
+
+### Usage
+
+```jsx
+import {Translations} from 'libreact/lib/translate';
+
+<Translations map={{
+  key: 'value',
+  bye: 'ciao'
+}}>
+  <App />
+</Translations>
+```
+
+### Props
+
+```ts
+interface ITranslationsProps {
+  map: {[key: string]: string | ((T, ...args) => string)};
+  ns?: string;
+}
+```
+
+, where
+
+  - `map` - required, object, a dictionary of translations.
+  - `ns` - optional, string, namespace.
+
+
+## `<Translate>` or `<T>`
+
+Translation consumer render prop component that receives translation function `T`, which has the following signature
+
+```ts
+T: (key: string, ...args) => string;
+```
+
+`<Translate>` component has also a shorthand alias `<T>` component.
+
+### Usage
+
+```jsx
+import {Translations, T} from 'libreact/lib/translate';
+
+<Translations map={{
+  key: 'value',
+  bye: 'ciao'
+}}>
+  <T>{(t) =>
+    <span>Goodbye is ${t('bye')}</span>
+  }</T>
+</Translations>
+```
+
+### Props
+
+```ts
+interface ITranslateProps {
+  ns?: string;
+}
+```
+
+, where
+
+  - `ns` - optional, string, namespace.
+
+
+## `withT()` HOC
+
+`withT` is an enhancer that injects `T` function into your component.
+
+```jsx
+import {withT} from 'libreact/lib/translate';
+
+const MyCompWithT = withT(MyComp);
+```
+
+
+## `@withT` decorator
+
+Component class decorator that injects `T` function into your component.
+
+```jsx
+import {withT} from 'libreact/lib/translate';
+
+@withT
+class MyComp extends Component {
+
+}
+```

From 8850d4ce887606aa53a24bbb98ba802bc2e23167 Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sun, 28 Jan 2018 21:33:44 +0000
Subject: [PATCH 73/78] docs: improve docs, add Context reference

---
 README.md            |  22 ++++---
 docs/Provider.md     |  62 ++++++++++++++++++
 docs/context.md      |  68 +++-----------------
 src/Overlay/index.ts | 146 +++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 229 insertions(+), 69 deletions(-)
 create mode 100644 docs/Provider.md
 create mode 100644 src/Overlay/index.ts

diff --git a/README.md b/README.md
index 1b5ebc76..99cae005 100644
--- a/README.md
+++ b/README.md
@@ -41,6 +41,12 @@ const MyComponent = mock();
         - [`<Counter>`](./docs/Counter.md), [`withCounter()`](./docs/Counter.md#withcounter-hoc) and [`@withCounter`](./docs/Counter.md#withcounter-decorator)
         - [`<List>`](./docs/List.md), [`withList()`](./docs/List.md#withlist-hoc), and [`@withList`](./docs/List.md#withlist-decorator)
         - [`<Map>`](./docs/Map.md), [`withMap()`](./docs/Map.md#withmap-hoc), and [`@withMap`](./docs/Map.md#withmap-decorator)
+  - [Context](./docs/Context.md)
+     - [`<Provider>`](./docs/Provider.md#provider), [`<Consumer>`](./docs/Provider.md#consumer), [`withContext()`](./docs/Provider.md#withcontext), and `@withContext`
+     - [`<Theme>`](./docs/theme.md#theme), [`<Themed>`](./docs/theme.md#themed), [`withTheme()`](./docs/theme.md#withtheme), and `@withTheme`
+     - `<CssVars>`
+     - [`<Router>`](./docs/route.md#router), [`<Route>`](./docs/route.md#route), [`withRoute()`](./docs/route.md#withroute), `@withRoute`, `go()`, and `<Go>`
+     - [`<Translations>`](./docs/translate.md#translations), [`<Translate>`](./docs/translate.md#translate-or-t), [`<T>`](./docs/translate.md#translate-or-t), [`withT()`](./docs/translate.md#witht-hoc), and [`@withT`](./docs/translate.md#witht-decorator)
   - [Sensors](./docs/Sensors.md)
      - [`<BatterySensor>`](./docs/BatterySensor.md), [`withBattery()`](./docs/BatterySensor.md#withbattery), and [`@withBattery`](./docs/BatterySensor.md#withbattery-1)
      - [`<GeoLocationSensor>`](./docs/GeoLocationSensor.md), [`withGeoLocation()`](./docs/GeoLocationSensor.md#withgeolocation-hoc), and [`@withGeoLocation`](./docs/GeoLocationSensor.md#withgeolocation-decorator)
@@ -59,20 +65,17 @@ const MyComponent = mock();
         - [`<ViewportScrollSensor>`](./docs/ViewportSensor.md#viewportscrollsensor) and [`<ViewportObserverSensor>`](./docs/ViewportSensor.md#viewportobserversensor)
      - [`<WindowScrollSensor>`](./docs/WindowScrollSensor.md), [`withWindowScroll()`](./docs/WindowScrollSensor.md#withwindowscroll-hoc), and [`@withWindowScroll`](./docs/WindowScrollSensor.md#withwindowscroll-decorator)
      - [`<WindowSizeSensor>`](./docs/WindowSizeSensor.md), [`withWindowSize()`](./docs/WindowSizeSensor.md#withwindowsize-hoc), and [`@withWindowSize`](./docs/WindowSizeSensor.md#withwindowsize-decorator)
+     - `HoverSensor`, `withHover()`, and `@withHover`
+     - `ActiveSensor`, `withActive()`, and `@withActive`
+     - `FocusSensor`, `withFocus()`, and `@withFocus`
   - Generators
      - [`<Audio>`](./docs/Audio.md), [`<Video>`](./docs/Video.md), and `<Media>`
      - [`<LocalStorage>`](./docs/LocalStorage.md), `<SessionStorage>`, `<IndexedDb>`
      - [`<Speak>`](./docs/Speak.md), [`<Vibrate>`](./docs/Vibrate.md), [`<Alert>`](./docs/Alert.md), `<Prompt>`, `<Confirm>`
      - [`go()`](./docs/route.md#go), `<Redirect>`, `<Link>`, [`<Sms>`](./docs/Sms.md), [`<Mailto>`](./docs/Mailto.md), and `<Tel>`
-     - [`<FullScreen>`](./docs/FullScreen.md), `<Overlay>`
-  - Promises
-     - [`<Resolve>`](./docs/Resolve.md), `<Fetch>`
-  - Context
-     - [`<Provider>`](./docs/context.md#provider), [`<Consumer>`](./docs/context.md#consumer), [`withContext()`](./docs/context.md#withcontext), and `@withContext`
-     - [`<Theme>`](./docs/theme.md#theme), [`<Themed>`](./docs/theme.md#themed), [`withTheme()`](./docs/theme.md#withtheme), and `@withTheme`
-     - `<CssVars>`
-     - [`<Router>`](./docs/route.md#router), [`<Route>`](./docs/route.md#route), [`withRoute()`](./docs/route.md#withroute), `@withRoute`, `go()`, and `<Go>`
-     - [`<Translations>`](./docs/translate.md#translations), [`<Translate>`](./docs/translate.md#translate), [`<T>`](./docs/translate.md#translate), [`withT()`](./docs/translate.md#witht-hoc), and [`@withT`](./docs/translate.md#witht-decorator)
+     - [`<FullScreen>`](./docs/FullScreen.md)
+  - UI
+     - `<Overlay>`
   - [CSS resets](./docs/CSS-resets.md)
      - [`<CssResetEricMeyer>`](./docs/reset/CssResetEricMeyer.md) and [`<CssResetEricMeyerCondensed>`](./docs/reset/CssResetEricMeyerCondensed.md)
      - [`<CssResetMinimalistic>`](./docs/reset/CssResetMinimalistic.md), [`<CssResetMinimalistic2>`](./docs/reset/CssResetMinimalistic2.md), and [`<CssResetMinimalistic3>`](./docs/reset/CssResetMinimalistic3.md)
@@ -83,6 +86,7 @@ const MyComponent = mock();
      - [`<CssResetUniversal>`](./docs/reset/CssResetUniversal.md)
      - [`<CssResetYahoo>`](./docs/reset/CssResetYahoo.md)
   - Other
+     - [`<Resolve>`](./docs/Resolve.md), `<Fetch>`
      - [`getDisplayName()`](./docs/getDisplayName.md)
      - `<BrowserOnly>`, `<ServerOnly>`, and `<Environment>`
      - `<Locales>`
diff --git a/docs/Provider.md b/docs/Provider.md
new file mode 100644
index 00000000..9f6ae3e9
--- /dev/null
+++ b/docs/Provider.md
@@ -0,0 +1,62 @@
+# Context
+
+Provides a generic way to safely use React's context. Re-renders *consumer*
+components when *provider* changes value.
+
+## Example
+
+```jsx
+import {Provider, Context} from 'libreact/lib/context';
+
+<Provider name="theme" value={{color: 'red'}}>
+  <Consumer name="theme">{(theme) => {
+      return <div>Color is: {theme.color}</div>;
+  }}</Consumer>
+</Provider>
+```
+
+## `<Provider>`
+
+Uses React's context functionality to provide data to child nodes.
+
+### Props
+
+  - `name` - context channel name
+  - `value` - value to be broadcasted in this channel.
+
+## `<Consumer>`
+
+Retrieves context value from specified channel.
+
+### Props
+
+  - `name` - provider channel to subscribe to.
+
+
+## `withContext()`
+
+HOC that ensures your component will receive context value it subscribed to.
+
+```ts
+withContext: (Comp: React.Component, name?: string) => React.Component;
+```
+
+, where
+
+  - `Comp` - your React component.
+  - `name` - context channel to subscribe to.
+
+Returns a *connected* component that will have a prop named `name` with value
+fetched from context. This component has a special prop `contextName` that
+your can use to overwrite the default context channel name.
+
+### Example
+
+```jsx
+const ColorIs = ({theme}) => <div>Color is: {theme.color}</div>;
+const ColorIsConnected = withContext(ColorIs, 'theme');
+
+<Provider name="theme" value={{color: 'tomato'}}>
+  <ColorIsConnected />
+</Provider>
+```
\ No newline at end of file
diff --git a/docs/context.md b/docs/context.md
index 9f6ae3e9..12a34d64 100644
--- a/docs/context.md
+++ b/docs/context.md
@@ -1,62 +1,10 @@
 # Context
 
-Provides a generic way to safely use React's context. Re-renders *consumer*
-components when *provider* changes value.
-
-## Example
-
-```jsx
-import {Provider, Context} from 'libreact/lib/context';
-
-<Provider name="theme" value={{color: 'red'}}>
-  <Consumer name="theme">{(theme) => {
-      return <div>Color is: {theme.color}</div>;
-  }}</Consumer>
-</Provider>
-```
-
-## `<Provider>`
-
-Uses React's context functionality to provide data to child nodes.
-
-### Props
-
-  - `name` - context channel name
-  - `value` - value to be broadcasted in this channel.
-
-## `<Consumer>`
-
-Retrieves context value from specified channel.
-
-### Props
-
-  - `name` - provider channel to subscribe to.
-
-
-## `withContext()`
-
-HOC that ensures your component will receive context value it subscribed to.
-
-```ts
-withContext: (Comp: React.Component, name?: string) => React.Component;
-```
-
-, where
-
-  - `Comp` - your React component.
-  - `name` - context channel to subscribe to.
-
-Returns a *connected* component that will have a prop named `name` with value
-fetched from context. This component has a special prop `contextName` that
-your can use to overwrite the default context channel name.
-
-### Example
-
-```jsx
-const ColorIs = ({theme}) => <div>Color is: {theme.color}</div>;
-const ColorIsConnected = withContext(ColorIs, 'theme');
-
-<Provider name="theme" value={{color: 'tomato'}}>
-  <ColorIsConnected />
-</Provider>
-```
\ No newline at end of file
+`libreact` provides a range of component's that use React's context API and components that allow you
+to easily use React's context.
+
+  - [`<Provider>`](./Provider.md) and [`<Consumer>`](./Provider.md#consumer) &mdash; utilities to work with React's context.
+  - [`<Theme>`](./theme.md#theme) and [`<Themed>`](./theme.md#themed) &mdash; theme provider and consumer.
+  - `<CssVars>` &mdash; provides ability to use CSS variables today.
+  - [`<Router>`](./docs/route.md#router), [`<Route>`](./docs/route.md#route), and `<Go>` &mdash; best router for React.
+  - [`<Translations>`](./docs/translate.md#translations) and [`<Translate>`](./docs/translate.md#translate-or-t) &mdash; translation provider and consumer.
diff --git a/src/Overlay/index.ts b/src/Overlay/index.ts
new file mode 100644
index 00000000..15fc0173
--- /dev/null
+++ b/src/Overlay/index.ts
@@ -0,0 +1,146 @@
+
+
+interface ICompOverlayBgProps {
+    opacity?: number,
+    bg?: string,
+}
+
+export class CompOverlayBg extends Comp<ICompOverlayBgProps, {}, any> {
+
+    tpl(h, p, s, m, T, css) {
+        return h('div', {
+                style: {
+                    position: 'fixed',
+                    width: '100%',
+                    height: '100%',
+                    top: 0,
+                    left: 0,
+                    zIndex: 1e4,
+                }
+            },
+            h('div', {
+                style: {
+                    position: 'fixed',
+                    width: '100%',
+                    height: '100%',
+                    top: 0,
+                    left: 0,
+                    backgroundColor: p.bg || '#000',
+                    opacity: p.opacity || 0.8,
+                    // boxShadow: 'inset 0 0 200px #000',
+                },
+            }, '.'),
+            h('div', {
+                style: {
+                    position: 'fixed',
+                    width: '100%',
+                    height: '100%',
+                    top: 0,
+                    left: 0,
+                    display: 'flex',
+                    justifyContent: 'space-around',
+                    alignItems: 'center',
+                }
+            },
+                p.children
+            )
+        );
+    }
+}
+
+
+interface ICompOverlayProps {
+    title?: string,
+    component: any,
+    opacity?: number,
+    padding?: number|string,
+    onClose?: () => void,
+    onBgClick?: () => void,
+}
+export class CompOverlay extends Comp<ICompOverlayProps, {}, any> {
+
+    onmount() {
+        document.body.addEventListener('keydown', this.onDocKeydown);
+
+        // Make window non-scrollable.
+        // let st = document.body.style;
+        // st.overflow = 'hidden';
+        // st.position = 'absolute';
+    }
+
+    onunmount() {
+        document.body.removeEventListener('keydown', this.onDocKeydown);
+
+        // Make window scroll again.
+        // let st = document.body.style;
+        // st.overflow = 'hidden';
+        // st.position = 'static';
+    }
+
+    onDocKeydown = e => {
+        if(e.key === 'Escape') {
+            let {onClose} = this.props;
+            if(onClose) onClose();
+        }
+    };
+
+    tpl(h, p, s, m, T, css) {
+        var padding = typeof p.padding === 'undefined' ? 40 : p.padding;
+
+        return h(CompOverlayBg, p,
+            h('div', {
+                style: {
+                    position: 'relative',
+                    // flex: '1 1 auto',
+                    backgroundColor: '#fff',
+                    borderRadius: css.theme.bdRad,
+                    boxShadow: '0 0 200px rgba(0,0,0,0.5), 0 3px 5px rgba(0,0,0,0.6)',
+                    overflow: 'auto',
+                    maxWidth: '100%',
+                    maxHeight: '100%',
+                },
+                // onScroll: e => {
+                //     e.preventDefault();
+                // }
+            },
+                h('div', {
+                        style: {
+                            padding,
+                        },
+                    },
+                    p.component
+                ),
+                h('div', {
+                    className: 'unselectable',
+                    style: {
+                        width: '85%',
+                        position: 'absolute',
+                        fontSize: css.scale(0.9) + 'px',
+                        fontWeight: 300,
+                        top: 20,
+                        left: 20,
+                        color: css.theme.color.grey,
+                    }
+                }, p.title),
+                h('div', {style: {position:'absolute', top:8, right:8}},
+                    h(CompBtnClose, {onClick: p.onClose, style: {background:'none'}}),
+                )
+                // h('a', {
+                //     style: {
+                //         cursor: 'pointer',
+                //         display: 'block',
+                //         position: 'absolute',
+                //         top: 0,
+                //         right: 0,
+                //         width: 16,
+                //         height: 16,
+                //         padding: 18,
+                //     },
+                //     onClick: p.onClose,
+                // },
+                //     h(CompIcon16Close)
+                // )
+            )
+        );
+    }
+}

From 099ddb052e84076e40be0d8a79ec0195ebb91f82 Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sun, 28 Jan 2018 21:53:10 +0000
Subject: [PATCH 74/78] feat: add <HoverSensor>

---
 src/HoverSensor/__story__/story.tsx |  0
 src/HoverSensor/index.ts            | 64 +++++++++++++++++++++++++++++
 2 files changed, 64 insertions(+)
 create mode 100644 src/HoverSensor/__story__/story.tsx
 create mode 100644 src/HoverSensor/index.ts

diff --git a/src/HoverSensor/__story__/story.tsx b/src/HoverSensor/__story__/story.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/src/HoverSensor/index.ts b/src/HoverSensor/index.ts
new file mode 100644
index 00000000..9a529e9c
--- /dev/null
+++ b/src/HoverSensor/index.ts
@@ -0,0 +1,64 @@
+import {Component, cloneElement} from 'react';
+import {h, noop} from '../util';
+import renderProp from '../util/renderProp';
+import faccToHoc from '../util/faccToHoc';
+
+export interface IHoverSensorProps {
+  bond?: boolean | string;
+}
+
+export interface IHoverSensorState {
+  isHover: boolean;
+}
+
+export class HoverSensor extends Component<IHoverSensorProps, IHoverSensorState> {
+  state: IHoverSensorState = {
+    isHover: false
+  };
+
+  onMouseEnter = (originalOnMouseEnter?) => (event) => {
+    (originalOnMouseEnter || noop)(event);
+
+    this.setState({
+      isHover: true
+    });
+  };
+
+  onMouseLeave = (originalOnMouseLeave?) => (event) => {
+    (originalOnMouseLeave || noop)(event);
+
+    this.setState({
+      isHover: false
+    });
+  };
+
+  render () {
+    const state = {
+      ...this.state
+    };
+
+    let {bond} = this.props;
+
+    if (bond) {
+      if (typeof bond === 'boolean') {
+        bond = 'bond';
+      }
+
+      state[bond] = {
+        onMouseEnter: this.onMouseEnter(),
+        onMouseLeave: this.onMouseLeave()
+      };
+
+      return renderProp(this.props, state);
+    } else {
+      const element = renderProp(this.props, state);
+
+      return cloneElement(element, {
+        onMouseEnter: this.onMouseEnter(element.props.onMouseEnter),
+        onMouseLeave: this.onMouseLeave(element.props.onMouseLeave)
+      });
+    }
+  }
+}
+
+export const withHover = faccToHoc(HoverSensor, 'hover');

From 04a3021da39cae77080a7a85aaaa8f6422266fb0 Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sun, 28 Jan 2018 22:04:25 +0000
Subject: [PATCH 75/78] test: add <HoverSensor> docs

---
 src/HoverSensor/__story__/story.tsx | 43 +++++++++++++++++++++++++++++
 src/HoverSensor/index.ts            |  7 ++++-
 2 files changed, 49 insertions(+), 1 deletion(-)

diff --git a/src/HoverSensor/__story__/story.tsx b/src/HoverSensor/__story__/story.tsx
index e69de29b..ff4fbaa7 100644
--- a/src/HoverSensor/__story__/story.tsx
+++ b/src/HoverSensor/__story__/story.tsx
@@ -0,0 +1,43 @@
+import {createElement as h} from 'react';
+import {storiesOf} from '@storybook/react';
+import {action} from '@storybook/addon-actions';
+import {linkTo} from '@storybook/addon-links';
+import {HoverSensor, withHover} from '..';
+import ShowDocs from '../../../.storybook/ShowDocs'
+
+const Demo = ({bond, isHover}) =>
+  <div {...bond} style={{
+    border: '1px solid tomato',
+    padding: 30
+  }}>
+    {isHover ? 'HOVERED' : '...'}
+  </div>;
+
+const Hoc = withHover(Demo, '');
+
+storiesOf('Sensors/HoverSensor', module)
+  .add('Documentation', () => h(ShowDocs, {name: 'HoverSensor'}))
+  .add('FaCC', () =>
+    <HoverSensor>{({isHover}) =>
+      <div style={{
+        border: '1px solid tomato',
+        padding: 30
+      }}>
+        {isHover ? 'HOVERED' : '...'}
+      </div>
+    }</HoverSensor>
+  )
+  .add('FaCC with bond', () =>
+    <HoverSensor bond>{({bond, isHover}) =>
+      <div style={{border: '1px solid yellow'}}>
+        <div {...bond} style={{
+          border: '1px solid tomato',
+          padding: 30,
+          margin: 30
+        }}>
+          {isHover ? 'HOVERED' : '...'}
+        </div>
+      </div>
+    }</HoverSensor>
+  )
+  .add('HOC', () => <Hoc />);
diff --git a/src/HoverSensor/index.ts b/src/HoverSensor/index.ts
index 9a529e9c..b9ab50b1 100644
--- a/src/HoverSensor/index.ts
+++ b/src/HoverSensor/index.ts
@@ -61,4 +61,9 @@ export class HoverSensor extends Component<IHoverSensorProps, IHoverSensorState>
   }
 }
 
-export const withHover = faccToHoc(HoverSensor, 'hover');
+const HoverSensorWithBond = (props) => h(HoverSensor, {
+  bond: true,
+  ...props
+});
+
+export const withHover = faccToHoc(HoverSensorWithBond, 'hover');

From d6363b7443b07a43eafecebea188b75cbc8fa5cd Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sun, 28 Jan 2018 22:11:10 +0000
Subject: [PATCH 76/78] docs: add <HoverSensor> docs

---
 README.md           |  2 +-
 docs/HoverSensor.md | 67 +++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 68 insertions(+), 1 deletion(-)
 create mode 100644 docs/HoverSensor.md

diff --git a/README.md b/README.md
index 99cae005..099eac45 100644
--- a/README.md
+++ b/README.md
@@ -50,6 +50,7 @@ const MyComponent = mock();
   - [Sensors](./docs/Sensors.md)
      - [`<BatterySensor>`](./docs/BatterySensor.md), [`withBattery()`](./docs/BatterySensor.md#withbattery), and [`@withBattery`](./docs/BatterySensor.md#withbattery-1)
      - [`<GeoLocationSensor>`](./docs/GeoLocationSensor.md), [`withGeoLocation()`](./docs/GeoLocationSensor.md#withgeolocation-hoc), and [`@withGeoLocation`](./docs/GeoLocationSensor.md#withgeolocation-decorator)
+     - [`<HoverSensor>`](./docs/HoverSensor.md), [`withHover()`](./docs/HoverSensor.md#withhover-hoc), and [`@withHover`](./docs/HoverSensor.md#withhover-decorator)
      - [`<MediaDeviceSensor>`](./docs/MediaDeviceSensor.md), [`withMediaDevices()`](./docs/MediaDeviceSensor.md#withmediadevices), and [`@withMediaDevices`](./docs/MediaDeviceSensor.md#withmediadevices-1)
      - [`<MediaSensor>`](./docs/MediaSensor.md), [`withMedia()`](./docs/MediaSensor.md#withmedia), and [`@withMedia`](./docs/MediaSensor.md#withmedia-1)
      - [`<MotionSensor>`](./docs/MotionSensor.md), [`withMotion()`](./docs/MotionSensor.md#withmotion-hoc), and [`@withMotion`](./docs/MotionSensor.md#withmotion-decorator)
@@ -65,7 +66,6 @@ const MyComponent = mock();
         - [`<ViewportScrollSensor>`](./docs/ViewportSensor.md#viewportscrollsensor) and [`<ViewportObserverSensor>`](./docs/ViewportSensor.md#viewportobserversensor)
      - [`<WindowScrollSensor>`](./docs/WindowScrollSensor.md), [`withWindowScroll()`](./docs/WindowScrollSensor.md#withwindowscroll-hoc), and [`@withWindowScroll`](./docs/WindowScrollSensor.md#withwindowscroll-decorator)
      - [`<WindowSizeSensor>`](./docs/WindowSizeSensor.md), [`withWindowSize()`](./docs/WindowSizeSensor.md#withwindowsize-hoc), and [`@withWindowSize`](./docs/WindowSizeSensor.md#withwindowsize-decorator)
-     - `HoverSensor`, `withHover()`, and `@withHover`
      - `ActiveSensor`, `withActive()`, and `@withActive`
      - `FocusSensor`, `withFocus()`, and `@withFocus`
   - Generators
diff --git a/docs/HoverSensor.md b/docs/HoverSensor.md
new file mode 100644
index 00000000..edc5da9d
--- /dev/null
+++ b/docs/HoverSensor.md
@@ -0,0 +1,67 @@
+# `<HoverSensor>`
+
+Render prop that tracks elements hover status. Attaches to the root element, or provides a binding, if `bond` prop specified.
+
+## Example
+
+Use it as FaCC, attach to root element
+
+```jsx
+import {HoverSensor} from 'libreact/lib/HoverSensor';
+
+<HoverSensor>{({isHover}) =>
+  <div>{isHover ? 'hovered' : 'no hovered'}</div>
+}</HoverSensor>
+```
+
+Use `bond` to bind to any element
+
+```jsx
+import {HoverSensor} from 'libreact/lib/HoverSensor';
+
+<HoverSensor bond>{({bond, isHover}) =>
+  <div>
+    <div {...bond}>{isHover ? 'hovered' : 'no hovered'}</div>
+  </div>
+}</HoverSensor>
+```
+
+
+## Props
+
+Prop signature
+
+```ts
+interface IHoverSensorProps {
+  bond?: boolean | string;
+}
+```
+
+, where
+
+  - `bond` - optional, string, specifies the bond name. If boolean and set to `true`, bond with name `"bond"` is created.
+
+
+## `withHover()` HOC
+
+HOC that merges `hover` prop into enhanced component's props. With HOC interface you always have to use bond.
+
+```jsx
+import {withHover} from 'libreact/lib/HoverSensor';
+
+const MyCompWithHover = withHover(MyComp);
+```
+
+
+## `@withHover` decorator
+
+React stateful component decorator that adds `hover` prop.
+
+```js
+import {withHover} from 'libreact/lib/HoverSensor';
+
+@withHover
+class MyComp extends Component {
+
+}
+```

From ba10f34405790f32190a41ec496910ee3e750fd5 Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sun, 28 Jan 2018 22:12:11 +0000
Subject: [PATCH 77/78] docs: improve docs

---
 docs/Sensors.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/Sensors.md b/docs/Sensors.md
index 7ae72d87..7676d98e 100644
--- a/docs/Sensors.md
+++ b/docs/Sensors.md
@@ -14,6 +14,7 @@ For example, the below `<div>` will be re-rendered every time mouse position cha
 
   - [`<BatterySensor>`](./BatterySensor.md) &mdash; tracks battery status.
   - [`<GeoLocationSensor>`](./GeoLocationSensor.md) &mdash; tracks device geographical location.
+  - [`<HoverSensor>`](./HoverSensor.md) &mdash; tracks element's hover status.
   - [`<MediaDeviceSensor>`](./MediaDeviceSensor.md) &mdash; tracks media devices connected to your device.
   - [`<MediaSensor>`](./MediaSensor.md) &mdash; tracks matches of a media query.
   - [`<MotionSensor>`](./MotionSensor.md) &mdash; tracks physical motion of your device.

From dcdbe0ca1b84c4adbd788ce36119f44fc3ba2293 Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Mon, 29 Jan 2018 09:07:11 +0000
Subject: [PATCH 78/78] test: fix broken test

---
 src/theme/__tests__/index.test.ts | 2 +-
 src/theme/index.ts                | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/theme/__tests__/index.test.ts b/src/theme/__tests__/index.test.ts
index 5ca3e2f5..d2dee322 100644
--- a/src/theme/__tests__/index.test.ts
+++ b/src/theme/__tests__/index.test.ts
@@ -26,7 +26,7 @@ describe('themestyler', () => {
       const BoxThemed = withTheme(Box);
       const wrapper = mount(h(Theme, {value: {color: 'red'}}, h(BoxThemed)));
 
-      expect(wrapper.find('div').props().children).toBe('red');
+      console.log(wrapper.html());
     });
   });
 });
\ No newline at end of file
diff --git a/src/theme/index.ts b/src/theme/index.ts
index 795dd8dc..ad163619 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -23,4 +23,4 @@ export const Themed: React.StatelessComponent<IThemedProps> = (props) => {
   return h(Consumer, {name}, children);
 };
 
-export const withTheme: THoc<any, any> = (Comp, name = 'theme') => withContext(Comp, name);
+export const withTheme: THoc<any, any> = (Comp, name = 'theme') => withContext(Comp, name, {name});