diff --git a/README.md b/README.md
index 2781e0c..49f34ab 100644
--- a/README.md
+++ b/README.md
@@ -36,26 +36,24 @@ $ npm install react-loads
 
 ```js
 import React from 'react';
-import Loads, { IfIdle, IfLoading, IfTimeout, IfSuccess, IfError } from 'react-loads';
+import Loads from 'react-loads';
 
 const getRandomDog = () => axios.get('https://dog.ceo/api/breeds/image/random');
 
 export default () => (
   <Loads fn={getRandomDog}>
-    {({ load, response, error }) => (
+    {({ isIdle, isLoading, isSuccess, load, response, state, error }) => (
       <div>
-        <IfIdle>
-          <button onClick={load}>Load random dog</button>
-        </IfIdle>
-        <IfLoading>loading...</IfLoading>
-        <IfTimeout>taking a while...</IfTimeout>
-        <IfSuccess>
-          {response && <img src={response.data.message} alt="Dog" />}
+        {isIdle && <button onClick={load}>Load random dog</button>}
+        {isLoading && <div>loading...</div>}
+        {isSuccess && (
           <div>
-            <button onClick={load}>Load another dog</button>
+            {response && <img src={response.data.message} alt="Dog" />}
+            <div>
+              <button onClick={load}>Load another dog</button>
+            </div>
           </div>
-        </IfSuccess>
-        <IfError>Error! {error}</IfError>
+        )}
       </div>
     )}
   </Loads>
@@ -76,7 +74,7 @@ export default () => (
 <table>
 <thead><tr><th>Prop</th><th>Type</th><th>Default value</th><th>Description</th></tr></thead>
 <tbody>
-  <tr><td>  children </td><td><code>({ response?: any, error?: any, load: (...args: any) => ?Promise&lt;any&gt;, reset: Function, state: 'idle' | 'loading' | 'timeout' | 'success' | 'error' })</code></td><td>N/A (required)</td> <td></td></tr>
+  <tr><td>  children </td><td><code>({ response?: any, error?: any, load: (...args: any) => ?Promise&lt;any&gt;, resetState: Function })</code></td><td>N/A (required)</td> <td></td></tr>
   <tr><td>  delay </td><td><code>number</code></td><td><code>300</code></td> <td>Number of milliseconds before component transitions to <code>loading</code> state upon invoking <code>fn</code>/<code>load</code>.</td></tr>
   <tr><td>  loadOnMount </td><td><code>boolean</code></td><td><code>false</code></td> <td>Whether or not to invoke the <code>fn</code> on mount.</td></tr>
   <tr><td>  fn </td><td><code>(...args: any) => Promise&lt;any&gt;</code></td><td>N/A (required)</td> <td>The promise to invoke.</td></tr>
@@ -92,60 +90,15 @@ export default () => (
   <tr><td>  response </td><td><code>any</code></td><td>Response from the resolved promise (`fn`)</td></tr>
   <tr><td>  error </td><td><code>any</code></td><td>Error from the rejected promise (`fn`)</td></tr>
   <tr><td>  load </td><td><code>(...args: any) => ?Promise&lt;any&gt;</code></td><td>Trigger to load `fn`</td></tr>
+  <tr><td>  isIdle </td><td><code>boolean</code></td><td>Returns `true` if the state is idle (`fn` has not been triggered).</td></tr>
+  <tr><td>  isLoading </td><td><code>boolean</code></td><td>Returns `true` if the state is loading (`fn` is in a pending state).</td></tr>
+  <tr><td>  isTimeout </td><td><code>boolean</code></td><td>Returns `true` if the state is timeout (`fn` is in a pending state for longer than `delay` milliseconds).</td></tr>
+  <tr><td>  isSuccess </td><td><code>boolean</code></td><td>Returns `true` if the state is success (`fn` has been resolved).</td></tr>
+  <tr><td>  isError </td><td><code>boolean</code></td><td>Returns `true` if the state is error (`fn` has been rejected).</td></tr>
   <tr><td>  resetState </td><td><code>() => void</code></td><td>Reset state back to `idle`.</td></tr>
-  <tr><td>  state </td><td><code>'idle' | 'loading' | 'timeout' | 'success' | 'error'</code></td><td>Current state.</td></tr>
 </tbody>
 </table>
 
-### `<IfIdle>`, `<IfLoading>`, `<IfTimeout>`, `<IfSuccess>`, `<IfError>`
-
-These components determine what node to render based on the loading/response state.
-
-#### Definitions
-
-- `IfIdle` - Will render when the state is 'idle' (the initial state).
-- `IfLoading` - Will render when the state is 'loading' (triggered when the promise (`fn`) is pending).
-- `IfTimeout` - Will render when the state is 'timeout' (triggered when the promise (`fn`) has not resolved/rejected after a period of time).
-- `IfSuccess` - Will render when the state is 'success' (triggered when the promise (`fn`) resolves).
-- `IfError` - Will render when the state is 'error' (triggered when the promise (`fn`) rejects).
-
-#### Props
-
-<table>
-<thead><tr><th>Prop</th><th>Type</th><th>Default value</th><th>Description</th></tr></thead>
-<tbody>
-  <tr><td>channel</td><td>string</td><td><code>null</code></td> <td>The key of the context from where to read the state.</td></tr>
-  <tr><td>children</td><td>node</td><td>N/A (required)</td> <td>The children to be rendered when the
-  conditions match.</td></tr>
-  <tr><td>onShow</td><td>func</td><td></td> <td>The function invoked when the component becomes visible.</td></tr>
-  <tr><td>onHide</td><td>func</td><td></td> <td>The function invoked when the component becomes hidden.</td></tr>
-</tbody>
-</table>
-
-### `<IfState>`
-
-A component to define which parts of the tree should be rendered for a set of states.
-
-#### Props
-
-<table>
-<thead><tr><th>Prop</th><th>Type</th><th>Default value</th><th>Description</th></tr></thead>
-<tbody>
-  <tr><td>is</td><td>oneOfType(arrayOf(string), string)</td><td>N/A (required)</td> <td>The states(s) for which the children should be shown. Available states: <code>'idle'</code>, <code>'loading'</code>, <code>'timeout'</code>, <code>'success'</code>, <code>'error'</code></td></tr>
-  <tr><td>channel</td><td>string</td><td><code>null</code></td> <td>The key of the context from where to read the state.</td></tr>
-  <tr><td>children</td><td>node</td><td>N/A (required)</td> <td>The children to be rendered when the
-  conditions match.</td></tr>
-  <tr><td>onShow</td><td>func</td><td></td> <td>The function invoked when the component becomes visible.</td></tr>
-  <tr><td>onHide</td><td>func</td><td></td> <td>The function invoked when the component becomes hidden.</td></tr>
-</tbody>
-</table>
-
-```jsx
-<IfState is={['idle', 'success']}>
-  Hello world!
-</IfState>
-```
-
 ## Special thanks
 
 - [Michele Bertoli](https://github.com/MicheleBertoli) for creating [React Automata](https://github.com/MicheleBertoli/react-automata) - it's awesome and you should check it out.
diff --git a/package.json b/package.json
index b595a36..2838b3d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-loads",
-  "version": "3.1.0",
+  "version": "4.0.0-canary.1",
   "description": "A simple React component to handle loading state",
   "license": "MIT",
   "repository": "jxom/react-loads",
diff --git a/src/__stories__/index.stories.js b/src/__stories__/index.stories.js
index 3036c39..49f4ba8 100644
--- a/src/__stories__/index.stories.js
+++ b/src/__stories__/index.stories.js
@@ -3,27 +3,26 @@
 import React, { Fragment } from 'react';
 import { storiesOf } from '@storybook/react';
 import axios from 'axios';
-import Loads, { IfState, IfIdle, IfLoading, IfSuccess, IfTimeout, IfError } from '../index';
+import Loads from '../index';
 
 storiesOf('Loads', module)
   .add('default usage', () => {
     const getRandomDog = () => axios.get('https://dog.ceo/api/breeds/image/random');
     return (
       <Loads fn={getRandomDog}>
-        {({ load, response, state, error }) => (
+        {({ isIdle, isLoading, isSuccess, load, response, state, error }) => (
           <div>
             <p>Current state: {state}</p>
-            <IfIdle>
-              <button onClick={load}>Load random dog</button>
-            </IfIdle>
-            <IfLoading>loading...</IfLoading>
-            <IfSuccess>
-              {response && <img src={response.data.message} alt="Dog" />}
+            {isIdle && <button onClick={load}>Load random dog</button>}
+            {isLoading && <div>loading...</div>}
+            {isSuccess && (
               <div>
-                <button onClick={load}>Load another dog</button>
+                {response && <img src={response.data.message} alt="Dog" />}
+                <div>
+                  <button onClick={load}>Load another dog</button>
+                </div>
               </div>
-            </IfSuccess>
-            <IfError>Error! {error}</IfError>
+            )}
           </div>
         )}
       </Loads>
@@ -33,20 +32,19 @@ storiesOf('Loads', module)
     const getRandomDog = () => axios.get('https://dog.ceo/api/breeds/image/random');
     return (
       <Loads loadOnMount fn={getRandomDog}>
-        {({ load, response, state, error }) => (
+        {({ isIdle, isLoading, isSuccess, load, response, state, error }) => (
           <div>
             <p>Current state: {state}</p>
-            <IfIdle>
-              <button onClick={load}>Load random dog</button>
-            </IfIdle>
-            <IfLoading>loading...</IfLoading>
-            <IfSuccess>
-              {response && <img src={response.data.message} alt="Dog" />}
+            {isIdle && <button onClick={load}>Load random dog</button>}
+            {isLoading && <div>loading...</div>}
+            {isSuccess && (
               <div>
-                <button onClick={load}>Load another dog</button>
+                {response && <img src={response.data.message} alt="Dog" />}
+                <div>
+                  <button onClick={load}>Load another dog</button>
+                </div>
               </div>
-            </IfSuccess>
-            <IfError>Error! {error}</IfError>
+            )}
           </div>
         )}
       </Loads>
@@ -56,20 +54,19 @@ storiesOf('Loads', module)
     const getRandomDog = () => axios.get('https://dog.ceo/api/breeds/image/random');
     return (
       <Loads delay={1500} fn={getRandomDog}>
-        {({ load, response, state, error }) => (
+        {({ isIdle, isLoading, isSuccess, load, response, state, error }) => (
           <Fragment>
             <p>Current state: {state}</p>
-            <IfIdle>
-              <button onClick={load}>Load random dog</button>
-            </IfIdle>
-            <IfLoading>loading...</IfLoading>
-            <IfSuccess>
-              {response && <img src={response.data.message} alt="Dog" />}
+            {isIdle && <button onClick={load}>Load random dog</button>}
+            {isLoading && <div>loading...</div>}
+            {isSuccess && (
               <div>
-                <button onClick={load}>Load another dog</button>
+                {response && <img src={response.data.message} alt="Dog" />}
+                <div>
+                  <button onClick={load}>Load another dog</button>
+                </div>
               </div>
-            </IfSuccess>
-            <IfError>Error! {error}</IfError>
+            )}
           </Fragment>
         )}
       </Loads>
@@ -79,20 +76,19 @@ storiesOf('Loads', module)
     const getRandomDog = () => axios.get('https://dog.ceo/api/breeds/image/random');
     return (
       <Loads delay={0} fn={getRandomDog}>
-        {({ load, response, state, error }) => (
+        {({ isIdle, isLoading, isSuccess, load, response, state, error }) => (
           <Fragment>
             <p>Current state: {state}</p>
-            <IfIdle>
-              <button onClick={load}>Load random dog</button>
-            </IfIdle>
-            <IfLoading>loading...</IfLoading>
-            <IfSuccess>
-              {response && <img src={response.data.message} alt="Dog" />}
+            {isIdle && <button onClick={load}>Load random dog</button>}
+            {isLoading && <div>loading...</div>}
+            {isSuccess && (
               <div>
-                <button onClick={load}>Load another dog</button>
+                {response && <img src={response.data.message} alt="Dog" />}
+                <div>
+                  <button onClick={load}>Load another dog</button>
+                </div>
               </div>
-            </IfSuccess>
-            <IfError>Error! {error}</IfError>
+            )}
           </Fragment>
         )}
       </Loads>
@@ -104,20 +100,20 @@ storiesOf('Loads', module)
     };
     return (
       <Loads fn={getRandomDog}>
-        {({ load, response, state, error }) => (
+        {({ isIdle, isLoading, isSuccess, isError, load, response, state, error }) => (
           <Fragment>
             <p>Current state: {state}</p>
-            <IfIdle>
-              <button onClick={load}>Load random dog</button>
-            </IfIdle>
-            <IfLoading>loading...</IfLoading>
-            <IfSuccess>
-              {response && <img src={response.data.message} alt="Dog" />}
+            {isIdle && <button onClick={load}>Load random dog</button>}
+            {isLoading && <div>loading...</div>}
+            {isSuccess && (
               <div>
-                <button onClick={load}>Load another dog</button>
+                {response && <img src={response.data.message} alt="Dog" />}
+                <div>
+                  <button onClick={load}>Load another dog</button>
+                </div>
               </div>
-            </IfSuccess>
-            <IfError>Error! {error && error.message}</IfError>
+            )}
+            {isError && <div>Error! {error}</div>}
           </Fragment>
         )}
       </Loads>
@@ -128,21 +124,20 @@ storiesOf('Loads', module)
       new Promise(resolve => setTimeout(() => resolve(axios.get('https://dog.ceo/api/breeds/image/random')), 3000));
     return (
       <Loads timeout={1500} fn={getRandomDog}>
-        {({ load, response, state, error }) => (
+        {({ isIdle, isLoading, isSuccess, isTimeout, load, response, state, error }) => (
           <Fragment>
             <p>Current state: {state}</p>
-            <IfIdle>
-              <button onClick={load}>Load random dog</button>
-            </IfIdle>
-            <IfLoading>loading...</IfLoading>
-            <IfTimeout>taking a while...</IfTimeout>
-            <IfSuccess>
-              {response && <img src={response.data.message} alt="Dog" />}
+            {isIdle && <button onClick={load}>Load random dog</button>}
+            {isLoading && <div>loading...</div>}
+            {isTimeout && <div>taking a while...</div>}
+            {isSuccess && (
               <div>
-                <button onClick={load}>Load another dog</button>
+                {response && <img src={response.data.message} alt="Dog" />}
+                <div>
+                  <button onClick={load}>Load another dog</button>
+                </div>
               </div>
-            </IfSuccess>
-            <IfError>Error! {error && error.message}</IfError>
+            )}
           </Fragment>
         )}
       </Loads>
@@ -152,20 +147,19 @@ storiesOf('Loads', module)
     const getRandomDogByBreed = breed => axios.get(`https://dog.ceo/api/breed/${breed}/images/random`);
     return (
       <Loads fn={getRandomDogByBreed}>
-        {({ load, response, state, error }) => (
+        {({ isIdle, isLoading, isSuccess, load, response, state, error }) => (
           <div>
             <p>Current state: {state}</p>
-            <IfIdle>
-              <button onClick={() => load('beagle')}>Load random beagle</button>
-            </IfIdle>
-            <IfLoading>loading...</IfLoading>
-            <IfSuccess>
-              {response && <img src={response.data.message} alt="Dog" />}
+            {isIdle && <button onClick={() => load('beagle')}>Load random beagle</button>}
+            {isLoading && <div>loading...</div>}
+            {isSuccess && (
               <div>
-                <button onClick={() => load('beagle')}>Load another beagle</button>
+                {response && <img src={response.data.message} alt="Dog" />}
+                <div>
+                  <button onClick={() => load('beagle')}>Load another beagle</button>
+                </div>
               </div>
-            </IfSuccess>
-            <IfError>Error! {error}</IfError>
+            )}
           </div>
         )}
       </Loads>
@@ -175,26 +169,40 @@ storiesOf('Loads', module)
     const getRandomDog = () => axios.get(`https://dog.ceo/api/breeds/image/random`);
     const saveDog = randomDogResponse => new Promise(resolve => setTimeout(() => resolve(randomDogResponse), 1000));
     return (
-      <Loads channel="randomDog" fn={getRandomDog}>
-        {({ load: loadRandomDog, response: randomDogResponse, error: randomDogError }) => (
-          <Loads channel="saveDog" fn={saveDog}>
-            {({ load: saveDog, state: saveDogState }) => (
+      <Loads fn={getRandomDog}>
+        {({
+          isIdle: isRandomDogIdle,
+          isLoading: isRandomDogLoading,
+          isError: isRandomDogError,
+          isSuccess: isRandomDogSuccess,
+          load: loadRandomDog,
+          response: randomDogResponse,
+          error: randomDogError
+        }) => (
+          <Loads fn={saveDog}>
+            {({
+              isLoading: isSaveDogLoading,
+              isSuccess: isSaveDogSuccess,
+              isIdle: isSaveDogIdle,
+              load: saveDog,
+              state: saveDogState
+            }) => (
               <div>
-                <IfIdle channel="randomDog">
-                  <button onClick={loadRandomDog}>Load random dog</button>
-                </IfIdle>
-                <IfLoading channel="randomDog">loading...</IfLoading>
-                <IfSuccess channel="randomDog">
-                  {randomDogResponse && <img src={randomDogResponse.data.message} alt="Dog" />}
+                {isRandomDogIdle && <button onClick={loadRandomDog}>Load random dog</button>}
+                {isRandomDogLoading && <div>loading...</div>}
+                {isRandomDogSuccess && (
                   <div>
-                    <IfLoading channel="saveDog">saving...</IfLoading>
-                    <IfSuccess channel="saveDog">saved dog!</IfSuccess>
-                    <IfState is={['idle', 'success']} channel="saveDog">
-                      <button onClick={() => saveDog(randomDogResponse)}>Save dog</button>
-                    </IfState>
+                    {randomDogResponse && <img src={randomDogResponse.data.message} alt="Dog" />}
+                    <div>
+                      {isSaveDogLoading && <div>saving...</div>}
+                      {isSaveDogSuccess && <div>saved dog!</div>}
+                      {(isSaveDogSuccess || isSaveDogIdle) && (
+                        <button onClick={() => saveDog(randomDogResponse)}>Save dog</button>
+                      )}
+                    </div>
                   </div>
-                </IfSuccess>
-                <IfError channel="randomDog">Error! {randomDogError}</IfError>
+                )}
+                {isRandomDogError && <div>Error! {randomDogError}</div>}
               </div>
             )}
           </Loads>
diff --git a/src/index.js b/src/index.js
index 1e53870..7ced9f1 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,8 +1,7 @@
 // @flow
 
-import { createElement, Component } from 'react';
+import { Component } from 'react';
 import { withStatechart } from 'react-automata';
-export * from './states';
 
 const statechart = {
   initial: 'idle',
@@ -49,10 +48,15 @@ const statechart = {
 
 type Props = {
   children: ({
-    response?: any,
-    error?: any,
-    load?: (...args: any) => ?Promise<any>,
+    error: any,
+    isError: boolean,
+    isIdle: boolean,
+    isLoading: boolean,
+    isSuccess: boolean,
+    isTimeout: boolean,
+    load: (...args: any) => ?Promise<any>,
     resetState: () => void,
+    response: any,
     state: string
   }) => any,
   delay?: number,
@@ -157,6 +161,11 @@ class Loads extends Component<Props, State> {
     const state = machineState.value;
     return children({
       error,
+      isIdle: state === 'idle',
+      isLoading: state === 'loading',
+      isTimeout: state === 'timeout',
+      isSuccess: state === 'success',
+      isError: state === 'error',
       load: this.handleLoad,
       resetState: () => this.transition('RESET'),
       response,
@@ -165,9 +174,4 @@ class Loads extends Component<Props, State> {
   };
 }
 
-const _default = ({ channel, ...props }: { channel?: ?string }) =>
-  createElement(withStatechart(statechart, { channel })(Loads), props);
-
-_default.defaultProps = { channel: null };
-
-export default _default;
+export default withStatechart(statechart)(Loads);
diff --git a/src/states.js b/src/states.js
deleted file mode 100644
index 9088c53..0000000
--- a/src/states.js
+++ /dev/null
@@ -1,20 +0,0 @@
-// @flow
-import React, { type Node } from 'react';
-import { State as AutomataState } from 'react-automata';
-
-type State = 'success' | 'error' | 'timeout' | 'loading' | 'idle';
-type StateProps = {
-  channel?: string,
-  children: Node
-};
-
-export const IfState = ({ channel, children, is, ...props }: { ...StateProps, is: Array<State> | State }) => (
-  <AutomataState channel={channel} value={is} {...props}>
-    {children}
-  </AutomataState>
-);
-export const IfIdle = (props: StateProps) => IfState({ is: 'idle', ...props });
-export const IfLoading = (props: StateProps) => IfState({ is: 'loading', ...props });
-export const IfTimeout = (props: StateProps) => IfState({ is: 'timeout', ...props });
-export const IfSuccess = (props: StateProps) => IfState({ is: 'success', ...props });
-export const IfError = (props: StateProps) => IfState({ is: 'error', ...props });