diff --git a/README.md b/README.md
index 18f94632..099eac45 100644
--- a/README.md
+++ b/README.md
@@ -4,10 +4,10 @@
 
 [![][npm-badge]][npm-url] [![][travis-badge]][travis-url]
 
-React standard library, must-have toolbox for any React project.
+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
@@ -28,44 +28,57 @@ 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)
-  - Sensors
+  - [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)
+  - [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)
+        - [`<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>`](./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)
+     - [`<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)
-     - [`<NetworkSensor>`](./docs/NetworkSensor.md) and [`withNetwork()`](./docs/NetworkSensor.md#withnetwork)
-     - [`<LightSensor>`](./docs/LightSensor.md)
-     - [`<LocationSensor>`](./docs/LocationSensor.md)
-     - [`<OrientationSensor>`](./docs/OrientationSensor.md) and [`withOrientation()`](./docs/OrientationSensor.md#withorientation)
+     - [`<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-hoc), and [`@withOrientation`](./docs/OrientationSensor.md#withorientation-decorator)
      - [`<ScrollSensor>`](./docs/ScrollSensor.md)
-     - [`<SizeSensor>`](./docs/SizeSensor.md)
-     - [`<ViewportSensor>`](./docs/ViewportSensor.md), [`<ViewportScrollSensor>`](./docs/ViewportSensor.md#viewportscrollsensor), and [`<ViewportObserverSensor>`](./docs/ViewportSensor.md#viewportobserversensor)
-     - [`<WidthSensor>`](./docs/WidthSensor.md)
-     - [`<WindowScrollSensor>`](./docs/WindowScrollSensor.md)
-     - [`<WindowSizeSensor>`](./docs/WindowSizeSensor.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()`](./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)
+     - `ActiveSensor`, `withActive()`, and `@withActive`
+     - `FocusSensor`, `withFocus()`, and `@withFocus`
   - 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)
-  - 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`
-  - 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)
+     - [`<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)
+  - 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)
      - [`<CssResetPoorMan>`](./docs/reset/CssResetPoorMan.md)
      - [`<CssResetShaunInman>`](./docs/reset/CssResetShaunInman.md)
      - [`<CssResetSiolon>`](./docs/reset/CssResetSiolon.md)
@@ -73,7 +86,11 @@ const MyComponent = mock();
      - [`<CssResetUniversal>`](./docs/reset/CssResetUniversal.md)
      - [`<CssResetYahoo>`](./docs/reset/CssResetYahoo.md)
   - Other
-     - [`<Resolve>`](./docs/Resolve.md)
+     - [`<Resolve>`](./docs/Resolve.md), `<Fetch>`
+     - [`getDisplayName()`](./docs/getDisplayName.md)
+     - `<BrowserOnly>`, `<ServerOnly>`, and `<Environment>`
+     - `<Locales>`
+     - `<Draggable>`, `<Droppable>`, `<Parallax>`, `<Pin>`
 
 
 ## License
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/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/docs/Dummies.md b/docs/Dummies.md
new file mode 100644
index 00000000..6a350cf1
--- /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 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) - 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/Flipflop.md b/docs/Flipflop.md
new file mode 100644
index 00000000..176f8098
--- /dev/null
+++ b/docs/Flipflop.md
@@ -0,0 +1,83 @@
+# `<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>
+```
+
+## 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/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`.
diff --git a/docs/GeoLocationSensor.md b/docs/GeoLocationSensor.md
new file mode 100644
index 00000000..4f1e0433
--- /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/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 {
+
+}
+```
diff --git a/docs/Introduction.md b/docs/Introduction.md
new file mode 100644
index 00000000..ef30974b
--- /dev/null
+++ b/docs/Introduction.md
@@ -0,0 +1,84 @@
+# 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. 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
+
+*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 />` *"renders"* 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 of render prop where the single
+render prop is called `children` instead.
+
+```jsx
+<MouseSensor children={({posX, posY}) => <div />} />
+```
+
+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}) =>
+  <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')})
+```
+
+
+## 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.
+
+
+## Enhancer
+
+*Enhancer* is a HOC that receives AND returns React components.
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 {
+
+}
+```
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/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 {
+
+}
+```
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/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 {
+
+}
+```
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/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 {
+
+}
+```
diff --git a/docs/NetworkSensor.md b/docs/NetworkSensor.md
index cd135c72..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
 
@@ -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 injected prop name
+
+```js
+const NetworkStatus = withNetwork(NetworkStatusFormatter, 'network');
+```
+
+Or simply merge the whole object into your props
+
+```js
+const NetworkStatus = withNetwork(NetworkStatusFormatter, '');
+```
+
+## `@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/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/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/Sensors.md b/docs/Sensors.md
new file mode 100644
index 00000000..7676d98e
--- /dev/null
+++ b/docs/Sensors.md
@@ -0,0 +1,36 @@
+# 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 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.
+  - [`<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 class decorator that provide the same functionality.
+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/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/Sms.md b/docs/Sms.md
new file mode 100644
index 00000000..2826db7d
--- /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'>Click me!</Sms>
+```
+
+### Props
+
+```ts
+interface ISmsProps {
+  phone: string;
+  body?: string;
+}
+```
+
+, where
+
+  - `phone` - required, string, phone number.
+  - `body` - optional, string, SMS text body.
diff --git a/docs/State.md b/docs/State.md
new file mode 100644
index 00000000..0cdd2c96
--- /dev/null
+++ b/docs/State.md
@@ -0,0 +1,64 @@
+# `<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>
+```
+
+
+## `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/docs/Toggle.md b/docs/Toggle.md
new file mode 100644
index 00000000..f2cf08b2
--- /dev/null
+++ b/docs/Toggle.md
@@ -0,0 +1,82 @@
+# `<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>
+```
+
+## 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
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 {
+
+}
+```
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 {
+
+}
+```
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';
+```
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/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/docs/inversion.md b/docs/inversion.md
new file mode 100644
index 00000000..f02a53c0
--- /dev/null
+++ b/docs/inversion.md
@@ -0,0 +1,45 @@
+# 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 a render prop.
+
+This effectively allows you to have
+
+  1. State
+  2. Life-cycle methods
+  3. Refs to DOM elements
+  4. Other objects
+
+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 basic example, `cnt` is incremented by 1 on each click
+
+```jsx
+<State init={{cnt: 0}}>
+  {({cnt}, set) =>
+    <div onClick={() => set({cnt: cnt + 1})}>
+      {cnt}
+    </div>
+  }
+<State>
+```
+
+or the same using `<Counter>` component
+
+```jsx
+<Counter>{({value, inc}) =>
+  <div onClick={inc}>
+    {value}
+  </div>
+}</Counter>
+```
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/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/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 {
+
+}
+```
diff --git a/docs/viewport.md b/docs/viewport.md
new file mode 100644
index 00000000..5b22d185
--- /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 a 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 view.
+
+
+## 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/package.json b/package.json
index f2079c28..aeb744e9 100644
--- a/package.json
+++ b/package.json
@@ -1,14 +1,20 @@
 {
   "name": "libreact",
-  "version": "0.4.0",
+  "version": "0.4.4",
   "description": "React standard library",
   "main": "lib/index.js",
   "keywords": [
     "react",
-    "stdlib",
     "libreact",
+    "stdlib",
+    "hoc",
+    "higher-order",
+    "composition",
+    "facc",
+    "components",
     "utilities",
-    "MailOnline"
+    "toolbox",
+    "toolbox"
   ],
   "repository": {
     "type": "git",
@@ -20,7 +26,9 @@
     "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",
+    "fast-extend": "0.0.2"
   },
   "peerDependencies": {
     "react": "15",
diff --git a/src/Counter/__story__/story.tsx b/src/Counter/__story__/story.tsx
new file mode 100644
index 00000000..94ada0ef
--- /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, set}) =>
+  <div onClick={(e) => inc(3)} onDoubleClick={inc}>{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
new file mode 100644
index 00000000..13adbe12
--- /dev/null
+++ b/src/Counter/index.ts
@@ -0,0 +1,19 @@
+import {h} from '../util';
+import {Value, faccToHocInit} 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 Value({
+    init: props.init || 0,
+    render: (state) => renderProp(props, Object.assign(state, {
+      inc: (by: number = 1) => state.set(state.value + (+by || 0))
+    }))
+  });
+};
+
+export const withCounter = faccToHocInit(Counter, 'counter');
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
new file mode 100644
index 00000000..ccf5a3df
--- /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(Flipflop, 'flipflop');
diff --git a/src/FullScreen/__story__/story.tsx b/src/FullScreen/__story__/story.tsx
new file mode 100644
index 00000000..0f665992
--- /dev/null
+++ b/src/FullScreen/__story__/story.tsx
@@ -0,0 +1,55 @@
+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'
+import {invert} from '../../invert';
+
+
+class StoryFullScreenBasicNative extends Component<any, any> {
+  el;
+
+  state = {
+    on: false
+  };
+
+  render () {
+    return (
+      <FullScreen on={this.state.on} onClose={() => this.setState({on: false})}>
+        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>
+    );
+  }
+}
+
+
+storiesOf('Other/FullScreen', module)
+  .add('Documentation', () => h(ShowDocs, {name: 'FullScreen'}))
+  .add('Example', () => <StoryFullScreenBasicNative />)
+  .add('.webkitEnterFullscreen()', () => <StoryFullScreenVideo />);
diff --git a/src/FullScreen/index.ts b/src/FullScreen/index.ts
new file mode 100644
index 00000000..be4433e6
--- /dev/null
+++ b/src/FullScreen/index.ts
@@ -0,0 +1,104 @@
+import {Component, Children} from 'react';
+import {h, noop} from '../util';
+const screenfull = require('screenfull');
+
+export interface IFullScreenProps {
+  children?;
+  video?: HTMLVideoElement;
+  innerRef?: (el) => void;
+  on?: boolean;
+  onClose?: () => void;
+  tag?: keyof React.ReactHTML;
+}
+
+export interface IFullScreenState {
+
+}
+
+export class FullScreen extends Component<IFullScreenProps, IFullScreenState> {
+  static defaultProps = {
+    onClose: noop,
+    innerRef: noop,
+    tag: 'div'
+  };
+
+  el: HTMLElement = null;
+  mounted: boolean = false;
+
+  ref = (el) => {
+    this.el = el;
+    this.props.innerRef(el);
+  };
+
+  componentDidMount () {
+    this.mounted = true;
+    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 () {
+    this.mounted = false;
+    screenfull.off('change', this.onChange);
+  }
+
+  enter () {
+    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 () {
+    if (screenfull.enabled) {
+      try {
+        screenfull.exit();
+      } catch {}
+    } else {
+      const {video} = this.props;
+
+      if (video && video.webkitExitFullscreen) {
+        video.webkitExitFullscreen();
+      }
+    }
+  }
+
+  onChange = () => {
+    const isFullScreen = screenfull.element === this.el;
+
+    if (!isFullScreen) {
+      (this.props.onClose || noop)();
+    }
+  };
+
+  render () {
+    const {video, innerRef, on, onClose, tag, children, ...rest} = this.props;
+
+    (rest as any).ref = this.ref;
+
+    return h(tag, rest, ...Children.toArray(children));
+  }
+}
diff --git a/src/GeoLocation/__story__/story.tsx b/src/GeoLocation/__story__/story.tsx
new file mode 100644
index 00000000..dfb286a4
--- /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
new file mode 100644
index 00000000..dd235476
--- /dev/null
+++ b/src/GeoLocation/index.ts
@@ -0,0 +1,70 @@
+import {Component} from 'react';
+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
+}
+
+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;
+
+    navigator.geolocation.getCurrentPosition(this.onEvent);
+    this.watchId = navigator.geolocation.watchPosition(this.onEvent);
+  }
+
+  componentWillUnmount () {
+    this.mounted = false;
+
+    navigator.geolocation.clearWatch(this.watchId);
+  }
+
+  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 renderProp(this.props, this.state);
+  }
+}
+
+export const withGeoLocation = faccToHoc(GeoLocationSensor, 'geoLocation');
diff --git a/src/HoverSensor/__story__/story.tsx b/src/HoverSensor/__story__/story.tsx
new file mode 100644
index 00000000..ff4fbaa7
--- /dev/null
+++ 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
new file mode 100644
index 00000000..b9ab50b1
--- /dev/null
+++ b/src/HoverSensor/index.ts
@@ -0,0 +1,69 @@
+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)
+      });
+    }
+  }
+}
+
+const HoverSensorWithBond = (props) => h(HoverSensor, {
+  bond: true,
+  ...props
+});
+
+export const withHover = faccToHoc(HoverSensorWithBond, 'hover');
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>
-  );
diff --git a/src/Link/index.ts b/src/Link/index.ts
new file mode 100644
index 00000000..3cbc346f
--- /dev/null
+++ b/src/Link/index.ts
@@ -0,0 +1,100 @@
+import {Component, cloneElement} from 'react';
+import {h, noop} from '../util';
+import {go, TGo} from '../route/go';
+import renderProp from '../util/renderProp';
+
+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;
+  a?: boolean;
+  onGo?: TGo;
+  isActive?: boolean;
+}
+
+export interface ILinkState {
+
+}
+
+export class Link extends Component<ILinkProps, any> {
+  static defaultProps = {
+    onGo: go
+  };
+
+  el: HTMLElement = null;
+  target: string = '';
+
+  ref = (originalRef) => (el) => {
+    this.el = el;
+    (originalRef || noop)(el);
+  };
+
+  onClick = (originalClick?) => (event) => {
+    (originalClick || noop)(event);
+
+    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=*"
+      !isModifiedEvent(event) // ignore clicks with modifier keys
+    ) {
+      event.preventDefault();
+
+      onGo(to, {
+        replace,
+        state: typeof state === 'function' ? state(this.props) : state
+      });
+    }
+  };
+
+  render () {
+    let {bond, replace, state, to, a, isActive, ...rest} = this.props;
+    const renderPropState: any = {
+      isActive,
+      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;
+    }
+
+    if (a || (typeof element !== 'object')) {
+      element = h('a', rest, element);
+    }
+
+    const props: any = {
+      ref: this.ref(element.ref)
+    };
+
+    if (!bond) {
+      props.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/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/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');
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..25dcb1ba
--- /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\\">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/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
new file mode 100644
index 00000000..764bf9bf
--- /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 = '',
+  ...props
+}) => {
+  const query = stringify({
+    subject,
+    cc: cc && cc.join(', '),
+    bcc: bcc && bcc.join(', '),
+    body
+  });
+
+  return h('a', {
+    href: `mailto:${email}?${query}`,
+    ...props
+  });
+};
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
new file mode 100644
index 00000000..22fc1f80
--- /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 {Value, faccToHocInit} from '../Value';
+
+export interface IMapProps {
+  init?: {[key: string]: any};
+}
+
+export const Map: React.StatelessComponent<IMapProps> = (props) => {
+  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} = value;
+        set(rest);
+      }
+    })
+  });
+};
+
+export const withMap = faccToHocInit(Map, 'map');
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..a45f4871
--- /dev/null
+++ b/src/MotionSensor/index.ts
@@ -0,0 +1,96 @@
+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 {
+  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 = {
+  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) => {
+  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');
diff --git a/src/MouseSensor/__story__/story.tsx b/src/MouseSensor/__story__/story.tsx
new file mode 100644
index 00000000..602aac3d
--- /dev/null
+++ b/src/MouseSensor/__story__/story.tsx
@@ -0,0 +1,49 @@
+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, 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('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
new file mode 100644
index 00000000..e8dd7e22
--- /dev/null
+++ b/src/MouseSensor/index.ts
@@ -0,0 +1,148 @@
+import {Component, Children, cloneElement} from 'react';
+import {h, noop} from '../util';
+import renderProp from '../util/renderProp';
+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;
+}
+
+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> {
+  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 () {
+    let {bond} = this.props;
+
+    if (bond) {
+      if (typeof bond === 'boolean') {
+        bond = 'bond';
+      }
+
+      const bondObject: any = {
+        ref: this.ref()
+      };
+
+      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)
+      };
+
+      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/NetworkSensor/__story__/story.tsx b/src/NetworkSensor/__story__/story.tsx
new file mode 100644
index 00000000..34b122aa
--- /dev/null
+++ b/src/NetworkSensor/__story__/story.tsx
@@ -0,0 +1,76 @@
+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 Status = (props) =>
+  <pre style={{fontFamily: 'monospace'}}>
+    {JSON.stringify(props, null, 4)}
+  </pre>;
+
+const NetworkStatus1 = withNetwork(Status);
+const NetworkStatus2 = withNetwork(Status, 'network');
+const NetworkStatus3 = withNetwork(Status, '');
+
+@withNetwork
+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'}}>
+        {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 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));
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));
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/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)
+                // )
+            )
+        );
+    }
+}
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/__story__/story.ts b/src/SizeSensor/__story__/story.ts
new file mode 100644
index 00000000..e32c381b
--- /dev/null
+++ b/src/SizeSensor/__story__/story.ts
@@ -0,0 +1,87 @@
+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, 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,
+    height: 100
+  };
+
+  render () {
+    return h('div', null,
+      h(SizeSensor, {}, (state) =>
+        h('div', {style: {
+          width: `${this.state.width}%`,
+          height: this.state.height,
+          border: '1px solid tomato'
+        }}, h(Print, state))
+      ),
+      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', () =>
+    h(SizeSensor, {
+      onSize: action('onSize')
+    }, ({width, height}) =>
+      h('div', {
+        style: {
+          border: '1px solid red'
+        }
+      },
+        `WIDTH: ${width}, HEIGHT: ${height}`
+      )
+    )
+  )
+  .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 19b8f785..7dec27b6 100644
--- a/src/SizeSensor/index.ts
+++ b/src/SizeSensor/index.ts
@@ -1,14 +1,15 @@
-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';
+import faccToHoc, {divWrapper} 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 {
@@ -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,9 @@ export class SizeSensor extends Component<ISizeSensorProps, ISizeSensorState> {
           zIndex: -1
         }
       }),
-      typeof children === 'function' ? children(this.state) : children
-    );
+      ...Children.toArray(element.props.children)
+    ]);
   }
 }
+
+export const withSize = faccToHoc(SizeSensor, 'size', divWrapper);
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}`
-      )
-    )
-  );
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..00a9c00b
--- /dev/null
+++ b/src/Sms/__tests__/__snapshots__/index.test.ts.snap
@@ -0,0 +1,5 @@
+// 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 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
new file mode 100644
index 00000000..16b26112
--- /dev/null
+++ 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
new file mode 100644
index 00000000..2c6b8f15
--- /dev/null
+++ b/src/Sms/index.ts
@@ -0,0 +1,16 @@
+// 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> {
+  children?;
+  phone: string;
+  body?: string;
+}
+
+export const Sms: React.StatelessComponent<ISmsProps> = ({phone, body, ...props}) => {
+  return h('a', {
+    href: `sms:${phone}?${stringify({body})}`,
+    ...props
+  });
+};
diff --git a/src/State/__story__/story.tsx b/src/State/__story__/story.tsx
new file mode 100644
index 00000000..0f325893
--- /dev/null
+++ b/src/State/__story__/story.tsx
@@ -0,0 +1,34 @@
+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, 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', () =>
+    <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>
+    }</State>
+  )
+  .add('HOC 1', () => <Hoc1 />)
+  .add('HOC 2', () => <Hoc2 />);
diff --git a/src/State/index.ts b/src/State/index.ts
index 8ab2ec9c..e1e15ab8 100644
--- a/src/State/index.ts
+++ b/src/State/index.ts
@@ -1,12 +1,12 @@
 import {Component} from 'react';
-import {noop} from '../util';
+import {h, 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;
 }
@@ -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);
   }
 
@@ -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,
+        }
+      )
+  });
diff --git a/src/Toggle/__story__/story.tsx b/src/Toggle/__story__/story.tsx
new file mode 100644
index 00000000..55ccc162
--- /dev/null
+++ b/src/Toggle/__story__/story.tsx
@@ -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 {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('Inversion/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>
+  )
+  .add('HOC 1', () => <Hoc1 />)
+  .add('HOC 2', () => <Hoc2 />)
+  .add('Decorator', () => <Decorator />);
diff --git a/src/Toggle/index.ts b/src/Toggle/index.ts
new file mode 100644
index 00000000..a4d89e31
--- /dev/null
+++ b/src/Toggle/index.ts
@@ -0,0 +1,19 @@
+import {h} from '../util';
+import {State} from '../State';
+import renderProp from '../util/renderProp';
+import faccToHoc from '../util/faccToHoc';
+
+export interface IToggleProps {
+  init?: boolean;
+}
+
+export const Toggle: React.StatelessComponent<IToggleProps> = (props) =>
+  h(State, {
+    init: {on: props.init || false},
+    render: ({on}, set) => renderProp(props, {
+      on,
+      toggle: () => set({on: !on})
+    })
+  });
+
+export const withToggle = faccToHoc(Toggle, 'toggle');
diff --git a/src/Value/__story__/story.tsx b/src/Value/__story__/story.tsx
new file mode 100644
index 00000000..b1c1db09
--- /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), 'value', 'default');
+// 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..fadb1a43
--- /dev/null
+++ b/src/Value/index.ts
@@ -0,0 +1,34 @@
+import {h} from '../util';
+import {State} from '../State';
+import renderProp from '../util/renderProp';
+import faccToHoc from '../util/faccToHoc';
+
+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
+    },
+    render: ({value}, set) => renderProp(props, {
+      value,
+      set: (value) => set({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');
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={{
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..f68c1383 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;
@@ -57,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]
   };
 
@@ -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..1c4678ac 100644
--- a/src/ViewportSensor/index.tsx
+++ b/src/ViewportSensor/index.tsx
@@ -1,10 +1,11 @@
 import {h} from '../util';
 import {ViewportObserverSensor, IViewportObserverSensorProps, IViewportObserverSensorState} from '../ViewportObserverSensor';
 import {loadable} from '../loadable';
+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});
@@ -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);
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/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/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/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'}))
diff --git a/src/WindowSizeSensor/index.ts b/src/WindowSizeSensor/index.ts
index 5cd2b4ac..03347015 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 withWindowSize = faccToHoc(WindowSizeSensor, 'windowSize');
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/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/invert.story.tsx b/src/invert.story.tsx
index 8f5a99c8..54aebbf9 100644
--- a/src/invert.story.tsx
+++ b/src/invert.story.tsx
@@ -2,18 +2,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 {invert} from './invert';
+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(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 035cc6c4..fd3b01de 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;
-  onUnmount: (comp: React.Component<any>) => void;
-  render: (element: React.ReactElement<any>, comp: React.Component<any>) => React.ReactElement<any>;
+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: (el: HTMLElement, comp: React.Component<any>) => void;
+  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,25 +28,25 @@ 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();
     }
 
-    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();
       };
     }
 
     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();
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/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__/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/__story__/StoryRouteExample2.tsx b/src/route/__story__/StoryRouteExample2.tsx
index 0c3883b0..18c69ddb 100644
--- a/src/route/__story__/StoryRouteExample2.tsx
+++ b/src/route/__story__/StoryRouteExample2.tsx
@@ -1,20 +1,20 @@
 import {h} from '../../util';
-import {Router, Route, go} from '..';
-import {Link} from '../Link';
+import {Router, Route, go, Go} from '..';
+import {Link} from '../../Link';
 
 const StoryRouteExample2 = () => (
   <Router>
     <div>
       <ul>
         <li><a onClick={() => go('/')}>Home</a></li>
-        <li><Link to='/about'>About</Link></li>
-        <li><Link to='/topics'>Topics</Link></li>
+        <li><Go to='/about'>About</Go></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/__story__/StoryRouteTruncateRoute.tsx b/src/route/__story__/StoryRouteTruncateRoute.tsx
index f5cc1616..318ebfef 100644
--- a/src/route/__story__/StoryRouteTruncateRoute.tsx
+++ b/src/route/__story__/StoryRouteTruncateRoute.tsx
@@ -6,17 +6,16 @@ const StoryRouteTruncateRoute = () =>
   <div>
     <Router route='/api/users/123.json'>
       <Route match='/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>
-        </div>
       </Route>
     </Router>
 
@@ -25,9 +24,14 @@ const StoryRouteTruncateRoute = () =>
     <pre style={{fontFamily: 'monospace'}}>{`
 <Router route='/api/users/123.json'>
   <Route match='/api'>
+    /api
     <Route match='/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>
     </Route>
   </Route>
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-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/__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/route/index.ts b/src/route/index.ts
index 87a8ae1c..6cedc934 100644
--- a/src/route/index.ts
+++ b/src/route/index.ts
@@ -2,34 +2,49 @@ import {Component} from 'react';
 import {LocationSensor} from '../LocationSensor';
 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;
   ns?: string;
+  fullRoute?: string;
   route?: string;
   parent?: TRouteMatchResult;
+  onGo?: TGo;
 }
 
 export class Router extends Component<IRouteProviderProps, any> {
+  static defaultProps = {
+    onGo: go
+  };
+
   matches: number = 0;
 
-  onMatch = () => {
+  inc = () => {
     this.matches++;
   };
 
   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: {
+        go: this.props.onGo,
+        fullRoute: this.props.fullRoute || route,
         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);
+    }, renderProp(this.props));
 
     return element;
   }
@@ -53,12 +68,44 @@ 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>);
-  cnt?: number;
+  children?: 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;
+  max?: number;
   ns?: string;
   preserve?: boolean;
 }
@@ -66,74 +113,42 @@ export interface IRouteMatch {
 export class Route extends Component<IRouteMatch, any> {
   static defaultProps = {
     match: /.+/,
-    cnt: 0
+    min: 0,
+    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
-      };
-    };
-  }
-
-  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}`)}, (context) => {
+      const {fullRoute, route, go, inc, count, parent} = context;
+      const {children, exact, match, preserve, min, max} = this.props;
+      const matchCount = count();
 
-      if (getMatches() <= this.props.cnt) {
-        const matchResult = this.matcher()(route);
+      if ((matchCount >= min) && (matchCount <= max)) {
+        const matchResult = createMatcher(match, exact)(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) {
             newRoute = newRoute.substr(length);
           }
 
-          return h(Router, {route: newRoute, parent: matchResult},
-            this.renderChildren({
+          return h(Router, {
+            fullRoute: route,
+            route: newRoute,
+            parent: matchResult
+          },
+            renderProp(this.props, {
+              go,
               match: route.substr(0, length),
               matches,
               route: newRoute,
+              fullRoute,
               parent
             })
           );
@@ -145,4 +160,32 @@ export class Route extends Component<IRouteMatch, any> {
   }
 }
 
-export * from './go';
+export const Route404 = (props) => h(Route, {
+  max: 0,
+  ...props
+});
+
+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, 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
+      })
+    });
+  }
+}
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});
diff --git a/src/translate/__story__/story.tsx b/src/translate/__story__/story.tsx
new file mode 100644
index 00000000..3742e5b3
--- /dev/null
+++ b/src/translate/__story__/story.tsx
@@ -0,0 +1,61 @@
+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';
+
+const Demo = ({T}) => {
+  return (
+    <span>{T('foo')}: {T('hello')}</span>
+  );
+};
+
+const Hoc1 = withT(Demo);
+
+storiesOf('Context/translate', module)
+  .add('Documentation', () => h(ShowDocs, {name: 'translate'}))
+  .add('Example', () => (
+    <Translations map={{
+      hello: 'world'
+    }}>
+      <div>
+        <T>{(T) =>
+          <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
new file mode 100644
index 00000000..357dcc92
--- /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 | ((...args) => string)};
+  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, ...args) => {
+        const value = map[key];
+
+        if (typeof value === 'function') {
+          return value(T, ...args);
+        }
+
+        return value || key;
+      };
+
+      return renderProp(this.props, T);
+    });
+  }
+}
+
+export const T = Translate;
+
+export const withT = faccToHoc(Translate, 'T');
diff --git a/src/util/faccToHoc.ts b/src/util/faccToHoc.ts
index 92ef75e6..993c662c 100644
--- a/src/util/faccToHoc.ts
+++ b/src/util/faccToHoc.ts
@@ -1,7 +1,15 @@
 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}
+);
+
+export const divWrapper = (Comp, propName, props, state) =>
+  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) => {
     const isClassDecoratorMethodCall = typeof Comp === 'string';
 
@@ -10,13 +18,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);
   };
diff --git a/src/util/renderProp.ts b/src/util/renderProp.ts
index 022b4e27..df6cb8c7 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,17 @@ const renderProp = (props, ...args) => {
     }
   }
 
-  const {children, render} = props;
+  const {render, children = render, component, comp = component} = props;
 
   return isFn(children) ?
     children(...args) :
-    isFn(render) ?
-      render(...args) :
-      (children || 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;
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;
 };