diff --git a/README.md b/README.md index ec0c6eb1..e5522685 100644 --- a/README.md +++ b/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 diff --git a/__tests__/test.js b/__tests__/test.js index a2414470..c56962cb 100644 --- a/__tests__/test.js +++ b/__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(); - + expect(loadingComponent.toJSON()).toMatchSnapshot(); // loading }); }); diff --git a/src/index.js b/src/index.js index 5864dc33..8c83758f 100644 --- a/src/index.js +++ b/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) {