fix Active, Focus, Hover bind apis

Author: renatorib

docs/components/Active.md

@@ -9,8 +9,8 @@ import { Active } from 'react-powerplug'
 
 ```jsx
 <Active>
-  {({ isActive, bindActive }) => (
-    <div {...bindActive}>
+  {({ isActive, bind }) => (
+    <div {...bind}>
       You are {isActive ? 'clicking' : 'not clicking'} this div.
     </div>
   )}
@@ -23,18 +23,18 @@ _Don't have props_
 
 ## Active Children Props
 
-TL;DR: `{ isActive, bindActive }`
+TL;DR: `{ isActive, bind }`
 
 **isActive**  
 `boolean`  
 True if is activated (being clicked) the binded element
 
-**bindActive**  
+**bind**  
 `{ onMouseUp: () => void, onMouseDown: () => void }`  
 There are the bind event functions that make `Active` works.  
 You **must** bind some element to track their events.  
 You can use spread operator to bind effectively an element.
 
 ```jsx
-<span {...bindActive}>Binded!</span>
+<span {...bind}>Binded!</span>
 ```

docs/components/Focus.md

@@ -9,10 +9,10 @@ import { Focus } from 'react-powerplug'
 
 ```jsx
 <Focus>
-  {({ isFocus, bindFocus }) => (
+  {({ isFocused, bind }) => (
     <div>
-      <input {...bindFocus} placeholder="Focus me" />
-      <div>You are {isFocus ? 'focusing' : 'not focusing'} the input.</div>
+      <input {...bind} placeholder="Focus me" />
+      <div>You are {isFocused ? 'focusing' : 'not focusing'} the input.</div>
     </div>
   )}
 </Focus>
@@ -24,18 +24,18 @@ _Don't have props_
 
 ## Focus Children Props
 
-TL;DR: `{ isFocus, bindFocus }`
+TL;DR: `{ isFocused, bind }`
 
-**isFocus**  
+**isFocused**  
 `boolean`  
 True if is focusing the binded element
 
-**bindFocus**  
+**bind**  
 `{ onFocusIn: () => void, onFocusOut: () => void }`  
 There are the bind event functions that make `Focus` works.  
 You **must** bind some element to track their events.  
 You can use spread operator to bind effectively an element.
 
 ```jsx
-<button {...bindFocus}>Binded!</button>
+<button {...bind}>Binded!</button>
 ```

docs/components/Hover.md

@@ -9,9 +9,9 @@ import { Hover } from 'react-powerplug'
 
 ```jsx
 <Hover>
-  {({ isHover, bindHover }) => (
-    <div {...bindHover}>
-      You are {isHover ? 'hovering' : 'not hovering'} this div.
+  {({ isHovered, bind }) => (
+    <div {...bind}>
+      You are {isHovered ? 'hovering' : 'not hovering'} this div.
     </div>
   )}
 </Hover>
@@ -23,18 +23,18 @@ _Don't have props_
 
 ## Hover Children Props
 
-TL;DR: `{ isHover, bindHover }`
+TL;DR: `{ isHovered, bind }`
 
-**isHover**  
+**isHovered**  
 `boolean`  
 True if is hovering the binded element
 
-**bindHover**  
+**bind**  
 `{ onMouseEnter: () => void, onMouseLeave: () => void }`  
 There are the bind event functions that make `Hover` works.  
 You **must** bind some element to track their events.  
 You can use spread operator to bind effectively an element.
 
 ```jsx
-<span {...bindHover}>Binded!</span>
+<span {...bind}>Binded!</span>
 ```

src/components/Active.js

@@ -7,7 +7,7 @@ const Active = ({ onChange, ...props }) => (
     {({ state, setState }) =>
       renderProps(props, {
         isActive: state.isActive,
-        bindActive: {
+        bind: {
           onMouseDown: () => setState({ isActive: true }),
           onMouseUp: () => setState({ isActive: false }),
         },

src/components/Focus.js

@@ -3,13 +3,13 @@ import State from './State'
 import renderProps from '../utils/renderProps'
 
 const Focus = ({ onChange, ...props }) => (
-  <State initial={{ isFocus: false }} onChange={onChange}>
+  <State initial={{ isFocused: false }} onChange={onChange}>
     {({ state, setState }) =>
       renderProps(props, {
-        isFocus: state.isFocus,
-        bindFocus: {
-          onFocusIn: () => setState({ isFocus: true }),
-          onFocusOut: () => setState({ isFocus: false }),
+        isFocused: state.isFocused,
+        bind: {
+          onFocus: () => setState({ isFocused: true }),
+          onBlur: () => setState({ isFocused: false }),
         },
       })
     }

src/components/Hover.js

@@ -3,13 +3,13 @@ import State from './State'
 import renderProps from '../utils/renderProps'
 
 const Hover = ({ onChange, ...props }) => (
-  <State initial={{ isHover: false }} onChange={onChange}>
+  <State initial={{ isHovered: false }} onChange={onChange}>
     {({ state, setState }) =>
       renderProps(props, {
-        isHover: state.isHover,
-        bindHover: {
-          onMouseEnter: () => setState({ isHover: true }),
-          onMouseLeave: () => setState({ isHover: false }),
+        isHovered: state.isHovered,
+        bind: {
+          onMouseEnter: () => setState({ isHovered: true }),
+          onMouseLeave: () => setState({ isHovered: false }),
         },
       })
     }