diff --git a/README.md b/README.md
index 1c626bda..aa0673fa 100644
--- a/README.md
+++ b/README.md
@@ -123,12 +123,12 @@ function MyComponent() {
 
 ### Suspense
 
-`@loadable/component` exposes a `loadable.lazy` method that acts similarly as `React.lazy` one.
+`@loadable/component` exposes a `lazy` method that acts similarly as `React.lazy` one.
 
 ```js
-import loadable from '@loadable/component'
+import { lazy } from '@loadable/component'
 
-const OtherComponent = loadable.lazy(() => import('./OtherComponent'))
+const OtherComponent = lazy(() => import('./OtherComponent'))
 
 function MyComponent() {
   return (
@@ -141,7 +141,7 @@ function MyComponent() {
 }
 ```
 
-> Use `loadable.lib.lazy` for libraries.
+> Use `lazy.lib` for libraries.
 
 > Suspense is not yet available for server-side rendering.
 
@@ -183,18 +183,16 @@ If the other module fails to load (for example, due to network failure), it will
 
 ```js
 import MyErrorBoundary from '/MyErrorBoundary'
-const OtherComponent = loadable.lazy(() => import('./OtherComponent'))
-const AnotherComponent = loadable.lazy(() => import('./AnotherComponent'))
+const OtherComponent = loadable(() => import('./OtherComponent'))
+const AnotherComponent = loadable(() => import('./AnotherComponent'))
 
 const MyComponent = () => (
   <div>
     <MyErrorBoundary>
-      <Suspense fallback={<div>Loading...</div>}>
-        <section>
-          <OtherComponent />
-          <AnotherComponent />
-        </section>
-      </Suspense>
+      <section>
+        <OtherComponent />
+        <AnotherComponent />
+      </section>
     </MyErrorBoundary>
   </div>
 )
@@ -267,7 +265,7 @@ function MyComponent() {
 }
 ```
 
-> `prefetch` and `Prefetch` are also available for components created with `loadable.lazy`, `loadable.lib` and `loadable.lib.lazy`.
+> `prefetch` and `Prefetch` are also available for components created with `lazy`, `loadable.lib` and `lazy.lib`.
 
 > Only component based prefetching is compatible with Server Side Rendering.
 
@@ -289,7 +287,7 @@ import loadable from '@loadable/component'
 const OtherComponent = loadable(() => import('./OtherComponent'))
 ```
 
-### loadableState.lazy
+### lazy
 
 Create a loadable component "Suspense" ready.
 
@@ -298,14 +296,14 @@ Create a loadable component "Suspense" ready.
 | `loadFn`  | The function call to load the component. |
 
 ```js
-import loadable from '@loadable/component'
+import { lazy } from '@loadable/component'
 
-const OtherComponent = loadable.lazy(() => import('./OtherComponent'))
+const OtherComponent = lazy(() => import('./OtherComponent'))
 ```
 
 ### LoadableComponent
 
-A component created using `loadable` or `loadable.lazy`.
+A component created using `loadable` or `lazy`.
 
 | Props      | Description                                       |
 | ---------- | ------------------------------------------------- |
@@ -328,7 +326,7 @@ import loadable from '@loadable/component'
 const Moment = loadable.lib(() => import('moment'))
 ```
 
-### loadable.lib.lazy
+### lazy.lib
 
 Create a loadable library "Suspense" ready.
 
@@ -337,14 +335,14 @@ Create a loadable library "Suspense" ready.
 | `loadFn`  | The function call to load the component. |
 
 ```js
-import loadable from '@loadable/component'
+import { lazy } from '@loadable/component'
 
-const Moment = loadable.lib.lazy(() => import('moment'))
+const Moment = lazy.lib(() => import('moment'))
 ```
 
 ### LoadableLibrary
 
-A component created using `loadable.lib` or `loadable.lib.lazy`.
+A component created using `loadable.lib` or `lazy.lib`.
 
 | Props      | Description                                          |
 | ---------- | ---------------------------------------------------- |
diff --git a/examples/suspense/src/index.js b/examples/suspense/src/index.js
index 7ef6057b..f7ae8634 100644
--- a/examples/suspense/src/index.js
+++ b/examples/suspense/src/index.js
@@ -1,9 +1,9 @@
 import React, { Suspense } from 'react'
 import { render } from 'react-dom'
-import loadable from '../../../packages/component'
+import { lazy } from '../../../packages/component'
 
-const Hello = loadable.lazy(() => import('./Hello'))
-const Moment = loadable.lib(() => import('moment'))
+const Hello = lazy(() => import('./Hello'))
+const Moment = lazy.lib(() => import('moment'))
 
 const App = () => (
   <div>
diff --git a/packages/component/src/createLoadable.js b/packages/component/src/createLoadable.js
index 070e148e..44863657 100644
--- a/packages/component/src/createLoadable.js
+++ b/packages/component/src/createLoadable.js
@@ -134,6 +134,8 @@ function createLoadable({ resolve = identity, render, onLoad }) {
             .catch(error => {
               this.setState({ error, loading: false })
             })
+
+        return this.promise
       }
 
       render() {
@@ -183,9 +185,7 @@ function createLoadable({ resolve = identity, render, onLoad }) {
     return loadable(ctor, { ...options, suspense: true })
   }
 
-  loadable.lazy = lazy
-
-  return loadable
+  return { loadable, lazy }
 }
 
 export default createLoadable
diff --git a/packages/component/src/index.js b/packages/component/src/index.js
index 866a8fa0..99cccf2d 100644
--- a/packages/component/src/index.js
+++ b/packages/component/src/index.js
@@ -1,12 +1,16 @@
 /* eslint-disable no-underscore-dangle */
 import * as sharedInternals from './sharedInternals'
-import loadable from './loadable'
-import library from './library'
+import * as loadableExports from './loadable'
+import * as libraryExports from './library'
 
-loadable.lib = library
+const { loadable } = loadableExports
+loadable.lib = libraryExports.loadable
+
+const { lazy } = loadableExports
+lazy.lib = libraryExports.lazy
 
 export default loadable
-export { default as library } from './library'
+export { lazy }
 
 export { default as loadComponents } from './loadComponents'
 export const __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = sharedInternals
diff --git a/packages/component/src/library.js b/packages/component/src/library.js
index 73e0737d..025554f0 100644
--- a/packages/component/src/library.js
+++ b/packages/component/src/library.js
@@ -1,7 +1,7 @@
 /* eslint-disable no-use-before-define, react/no-multi-comp */
 import createLoadable from './createLoadable'
 
-const library = createLoadable({
+export const { loadable, lazy } = createLoadable({
   onLoad(result, props) {
     if (result && props.ref) {
       if (typeof props.ref === 'function') {
@@ -19,5 +19,3 @@ const library = createLoadable({
     return null
   },
 })
-
-export default library
diff --git a/packages/component/src/loadable.js b/packages/component/src/loadable.js
index e9e86cf2..8a407a6d 100644
--- a/packages/component/src/loadable.js
+++ b/packages/component/src/loadable.js
@@ -3,11 +3,9 @@ import React from 'react'
 import createLoadable from './createLoadable'
 import { resolveComponent } from './resolvers'
 
-const loadable = createLoadable({
+export const { loadable, lazy } = createLoadable({
   resolve: resolveComponent,
   render({ result: Component, props }) {
     return <Component {...props} />
   },
 })
-
-export default loadable