Omit is* word in components value (#117)

Ref #6 (comment)

Thses names allow to distinguish values from functions.

isActive -> active
isFocused -> focused
isHovered -> hovered
isTouched -> touched

Author: TrySound

.size-snapshot.json

@@ -1,18 +1,18 @@
 {
   "dist/react-powerplug.umd.js": {
-    "bundled": 23769,
-    "minified": 9469,
-    "gzipped": 2596
+    "bundled": 23707,
+    "minified": 9407,
+    "gzipped": 2594
   },
   "dist/react-powerplug.cjs.js": {
-    "bundled": 20833,
-    "minified": 10881,
-    "gzipped": 2485
+    "bundled": 20771,
+    "minified": 10819,
+    "gzipped": 2483
   },
   "dist/react-powerplug.esm.js": {
-    "bundled": 20171,
-    "minified": 10321,
-    "gzipped": 2348,
+    "bundled": 20109,
+    "minified": 10259,
+    "gzipped": 2344,
     "treeshaked": {
       "rollup": {
         "code": 365,

README.md

@@ -79,11 +79,11 @@ import { Pagination, Tabs, Checkbox } from './MyDumbComponents'
 | **\<Set>**                   | `{ initial, onChange }` | `{ values, add, clear, remove, has }`          | [:point_down:](#set) [:books:](docs/components/Set.md)                      |
 | **\<List>**                  | `{ initial, onChange }` | `{ list, first, last, push, pull, sort, set }` | [:point_down:](#list) [:books:](docs/components/List.md)                    |
 | <h6>FEEDBACK CONTAINERS</h6> |
-| **\<Hover>**                 | `{ onChange }`          | `{ isHovered, bind }`                          | [:point_down:](#hover) [:books:](docs/components/Hover.md)                  |
-| **\<Active>**                | `{ onChange }`          | `{ isActive, bind }`                           | [:point_down:](#active) [:books:](docs/components/Active.md)                |
-| **\<Focus>**                 | `{ onChange }`          | `{ isFocused, bind }`                          | [:point_down:](#focus) [:books:](docs/components/Focus.md)                  |
-| **\<Touch>**                 | `{ onChange }`          | `{ isTouched, bind }`                          | [:point_down:](#touch) [:books:](docs/components/Touch.md)                  |
-| **\<FocusManager>**          | `{ onChange }`          | `{ isFocused, blur, bind }`                    | [:point_down:](#focusmanager) [:books:](docs/components/FocusManager.md)    |
+| **\<Hover>**                 | `{ onChange }`          | `{ hovered, bind }`                            | [:point_down:](#hover) [:books:](docs/components/Hover.md)                  |
+| **\<Active>**                | `{ onChange }`          | `{ active, bind }`                             | [:point_down:](#active) [:books:](docs/components/Active.md)                |
+| **\<Focus>**                 | `{ onChange }`          | `{ focused, bind }`                            | [:point_down:](#focus) [:books:](docs/components/Focus.md)                  |
+| **\<Touch>**                 | `{ onChange }`          | `{ touched, bind }`                            | [:point_down:](#touch) [:books:](docs/components/Touch.md)                  |
+| **\<FocusManager>**          | `{ onChange }`          | `{ focused, blur, bind }`                      | [:point_down:](#focusmanager) [:books:](docs/components/FocusManager.md)    |
 | <h6>FORM CONTAINERS</h6>     |
 | **\<Input>**                 | `{ initial, onChange }` | `{ set, value, bind }`                         | [:point_down:](#input) [:books:](docs/components/Input.md)                  |
 | **\<Form>**                  | `{ initial, onChange }` | `{ input, values }`                            | [:point_down:](#form) [:books:](docs/components/Form.md)                    |
@@ -209,9 +209,9 @@ import { Pagination, Tabs, Checkbox } from './MyDumbComponents'
 
 ```jsx
 <Hover>
-  {({ isHovered, bind }) => (
+  {({ hovered, bind }) => (
     <div {...bind}>
-      You are {isHovered ? 'hovering' : 'not hovering'} this div.
+      You are {hovered ? 'hovering' : 'not hovering'} this div.
     </div>
   )}
 </Hover>
@@ -221,9 +221,9 @@ import { Pagination, Tabs, Checkbox } from './MyDumbComponents'
 
 ```jsx
 <Active>
-  {({ isActive, bind }) => (
+  {({ active, bind }) => (
     <div {...bind}>
-      You are {isActive ? 'clicking' : 'not clicking'} this div.
+      You are {active ? 'clicking' : 'not clicking'} this div.
     </div>
   )}
 </Active>
@@ -233,9 +233,9 @@ import { Pagination, Tabs, Checkbox } from './MyDumbComponents'
 
 ```jsx
 <Touch>
-  {({ isTouched, bind }) => (
+  {({ touched, bind }) => (
     <div {...bind}>
-      You are {isTouched ? 'touching' : 'not touching'} this div.
+      You are {touched ? 'touching' : 'not touching'} this div.
     </div>
   )}
 </Touch>
@@ -245,10 +245,10 @@ import { Pagination, Tabs, Checkbox } from './MyDumbComponents'
 
 ```jsx
 <Focus>
-  {({ isFocused, bind }) => (
+  {({ focused, bind }) => (
     <div>
       <input {...bind} placeholder="Focus me" />
-      <div>You are {isFocused ? 'focusing' : 'not focusing'} input.</div>
+      <div>You are {focused ? 'focusing' : 'not focusing'} input.</div>
     </div>
   )}
 </Focus>

docs/components/Active.md

@@ -9,9 +9,9 @@ import { Active } from 'react-powerplug'
 
 ```jsx
 <Active>
-  {({ isActive, bind }) => (
+  {({ active, bind }) => (
     <div {...bind}>
-      You are {isActive ? 'clicking' : 'not clicking'} this div.
+      You are {active ? 'clicking' : 'not clicking'} this div.
     </div>
   )}
 </Active>
@@ -20,13 +20,13 @@ import { Active } from 'react-powerplug'
 ## Active Props
 
 **onChange** _(optional)_  
-The onChange event of the Active is called whenever the isActive state changes.
+The onChange event of the Active is called whenever the active state changes.
 
 ## Active Children Props
 
-TL;DR: `{ isActive, bind }`
+TL;DR: `{ active, bind }`
 
-**isActive**  
+**active**  
 `boolean`  
 True if is activated (being clicked) the binded element
 

docs/components/Focus.md

@@ -9,10 +9,10 @@ import { Focus } from 'react-powerplug'
 
 ```jsx
 <Focus>
-  {({ isFocused, bind }) => (
+  {({ focused, bind }) => (
     <div>
       <input {...bind} placeholder="Focus me" />
-      <div>You are {isFocused ? 'focusing' : 'not focusing'} the input.</div>
+      <div>You are {focused ? 'focusing' : 'not focusing'} the input.</div>
     </div>
   )}
 </Focus>
@@ -21,13 +21,13 @@ import { Focus } from 'react-powerplug'
 ## Focus Props
 
 **onChange** _(optional)_  
-The onChange event of the Focus is called whenever the isFocused state changes.
+The onChange event of the Focus is called whenever the focused state changes.
 
 ## Focus Children Props
 
-TL;DR: `{ isFocused, bind }`
+TL;DR: `{ focused, bind }`
 
-**isFocused**  
+**focused**  
 `boolean`  
 True if is focusing the binded element
 

docs/components/Hover.md

@@ -9,9 +9,9 @@ import { Hover } from 'react-powerplug'
 
 ```jsx
 <Hover>
-  {({ isHovered, bind }) => (
+  {({ hovered, bind }) => (
     <div {...bind}>
-      You are {isHovered ? 'hovering' : 'not hovering'} this div.
+      You are {hovered ? 'hovering' : 'not hovering'} this div.
     </div>
   )}
 </Hover>
@@ -20,13 +20,13 @@ import { Hover } from 'react-powerplug'
 ## Hover Props
 
 **onChange** _(optional)_  
-The onChange event of the Hover is called whenever the isHovered state changes.
+The onChange event of the Hover is called whenever the hovered state changes.
 
 ## Hover Children Props
 
-TL;DR: `{ isHovered, bind }`
+TL;DR: `{ hovered, bind }`
 
-**isHovered**  
+**hovered**  
 `boolean`  
 True if is hovering the binded element
 

docs/components/Touch.md

@@ -8,9 +8,9 @@ import { Touch } from 'react-powerplug'
 
 ```jsx
 <Touch>
-  {({ isTouched, bind }) => (
+  {({ touched, bind }) => (
     <div {...bind}>
-      You are {isTouched ? 'touching' : 'not touching'} this div.
+      You are {touched ? 'touching' : 'not touching'} this div.
     </div>
   )}
 </Touch>
@@ -19,13 +19,13 @@ import { Touch } from 'react-powerplug'
 ## Touch Props
 
 **onChange** _(optional)_  
-The onChange event of the Touch is called whenever the isTouched state changes.
+The onChange event of the Touch is called whenever the touched state changes.
 
 ## Touch Children Props
 
-TL;DR: `{ isTouched, bind }`
+TL;DR: `{ touched, bind }`
 
-**isTouched**  
+**touched**  
 `boolean`  
 True if is touching the binded element
 

docs/utils/composeEvents.md

@@ -7,11 +7,11 @@ import { Hover, composeEvents } from 'react-powerplug'
 
 const HoveredDiv = ({ children, onMouseEnter, onMouseLeave, ...restProps }) => (
   <Hover>
-    {({ isHover, bindHover }) => (
+    {({ hovered, bindHover }) => (
       <div
         {...composeEvents({ onMouseEnter, onMouseLeave }, bindHover)}
         {...restProps}
-        children={children(isHover)}
+        children={children(hovered)}
       />
     )}
   </Hover>

src/components/Active.js

@@ -5,15 +5,15 @@ import onChangeProp from '../utils/onChangeProp'
 
 const Active = ({ onChange, ...props }) => (
   <State
-    initial={{ isActive: false }}
-    onChange={onChangeProp(onChange, 'isActive')}
+    initial={{ active: false }}
+    onChange={onChangeProp(onChange, 'active')}
   >
     {({ state, setState }) =>
       renderProps(props, {
-        isActive: state.isActive,
+        active: state.active,
         bind: {
-          onMouseDown: () => setState({ isActive: true }),
-          onMouseUp: () => setState({ isActive: false }),
+          onMouseDown: () => setState({ active: true }),
+          onMouseUp: () => setState({ active: false }),
         },
       })
     }

src/components/Focus.js

@@ -5,15 +5,15 @@ import onChangeProp from '../utils/onChangeProp'
 
 const Focus = ({ onChange, ...props }) => (
   <State
-    initial={{ isFocused: false }}
-    onChange={onChangeProp(onChange, 'isFocused')}
+    initial={{ focused: false }}
+    onChange={onChangeProp(onChange, 'focused')}
   >
     {({ state, setState }) =>
       renderProps(props, {
-        isFocused: state.isFocused,
+        focused: state.focused,
         bind: {
-          onFocus: () => setState({ isFocused: true }),
-          onBlur: () => setState({ isFocused: false }),
+          onFocus: () => setState({ focused: true }),
+          onBlur: () => setState({ focused: false }),
         },
       })
     }

src/components/FocusManager.js

@@ -7,24 +7,24 @@ const FocusManager = ({ onChange, ...props }) => {
   let canBlur = true
   return (
     <State
-      initial={{ isFocused: false }}
-      onChange={onChangeProp(onChange, 'isFocused')}
+      initial={{ focused: false }}
+      onChange={onChangeProp(onChange, 'focused')}
     >
       {({ state, setState }) =>
         renderProps(props, {
-          isFocused: state.isFocused,
+          focused: state.focused,
           blur: () => {
-            setState({ isFocused: false })
+            setState({ focused: false })
           },
           bind: {
             tabIndex: -1,
             onBlur: () => {
               if (canBlur) {
-                setState({ isFocused: false })
+                setState({ focused: false })
               }
             },
             onFocus: () => {
-              setState({ isFocused: true })
+              setState({ focused: true })
             },
             onMouseDown: () => {
               canBlur = false