for inline styles add example for units on values

content/docs/reference-dom-elements.md

@@ -88,7 +88,7 @@ function ComponentWithTransition() {
 
 Style keys are camelCased in order to be consistent with accessing the properties on DOM nodes from JS (e.g. `node.style.backgroundImage`). Vendor prefixes [other than `ms`](http://www.andismith.com/blog/2012/02/modernizr-prefixed/) should begin with a capital letter. This is why `WebkitTransition` has an uppercase "W".
 
-React will automatically append a "px" suffix to certain inline style properties. For example:
+React will automatically append a "px" suffix to certain inline style properties. In case there is a need to have units other than "px", encase the values as strings with the desired unit. For example:
 
 ```js
 // This:
@@ -100,6 +100,16 @@ React will automatically append a "px" suffix to certain inline style properties
 <div style="height: 10px;">
   Hello World!
 </div>
+
+// This:
+<div style={{ height: '10%' }}>
+  Hello World!
+</div>;
+
+// Becomes:
+<div style="height: 10%;">
+  Hello World!
+</div>
 ```
 
 Not all style properties are converted to pixel strings though. Certain ones remain unitless (eg `zoom`, `order`, `flex`). A complete list of unitless properties can be seen [here](https://github.com/facebook/react/blob/4131af3e4bf52f3a003537ec95a1655147c81270/src/renderers/dom/shared/CSSProperty.js#L15-L59).