Add support for adding a displayName property for the returned Loadable component

README.md

@@ -779,6 +779,17 @@ Loadable({
 });
 ```
 
+#### `opts.displayName`
+
+Display name for the returned component. Defaults to `LoadableComponent`.
+
+```js
+Loadable({
+  displayName: 'MyLoadableComponent',
+  loader: () => import('./Bar'),
+});
+```
+
 #### `opts.delay`
 
 Time to wait (in milliseconds) before passing

__tests__/test.js

@@ -201,6 +201,23 @@ test('loadable map error', async () => {
   expect(component.toJSON()).toMatchSnapshot(); // success
 });
 
+test('display name', async () => {
+  let LoadableMyComponent = Loadable({
+    displayName: 'ComponentWith200Delay',
+    loader: createLoader(200, () => MyComponent),
+    loading: MyLoadingComponent
+  });
+
+  expect(LoadableMyComponent.displayName).toEqual('ComponentWith200Delay');
+
+  LoadableMyComponent = Loadable({
+    loader: createLoader(200, () => MyComponent),
+    loading: MyLoadingComponent
+  });
+
+  expect(LoadableMyComponent.displayName).toEqual('LoadableComponent');
+});
+
 describe('preloadReady', () => {
   beforeEach(() => {
     global.__webpack_modules__ = { 1: true, 2: true };
@@ -272,9 +289,9 @@ describe('preloadReady', () => {
       delay: 0,
       timeout: 200,
     });
-  
+
     let loadingComponent = renderer.create(<LoadableMyComponent prop="foo" />);
-  
+
     expect(loadingComponent.toJSON()).toMatchSnapshot(); // loading
   });
 });

src/index.js

@@ -134,7 +134,7 @@ function createLoadableComponent(loadFn, options) {
     });
   }
 
-  return class LoadableComponent extends React.Component {
+  class LoadableComponent extends React.Component {
     constructor(props) {
       super(props);
       init();
@@ -254,6 +254,10 @@ function createLoadableComponent(loadFn, options) {
       }
     }
   };
+
+  LoadableComponent.displayName = opts.displayName || 'LoadableComponent';
+
+  return LoadableComponent;
 }
 
 function Loadable(opts) {