react-lazily


react-lazily is a simple wrapper around React.lazy (or loadable from @loadable/component) that supports named imports.

Usage

Consider a component MyComponent that is exported with a default export:

``ts
export default MyComponent;
`

Per React docs, you could use React.lazy as follows:

`ts
const MyComponent = React.lazy(() => import('./MyComponent'));
`

However, if the component is exported with a named export:

`ts
export const MyComponent = ...
`

You would have to use React.lazy like this:

But if the component is exported with named export export const MyComponent = ... then you have to do:

`ts
const MyComponent = React.lazy(() =>
import('./MyComponent').then((module) => ({ default: module.MyComponent }))
);
`

With react-lazily it becomes:

`ts
const { MyComponent } = lazily(() => import('./MyComponent'));
`

Full example

See the live example: https://codesandbox.io/s/react-lazily-example-p7hyj

`ts
import React, { Suspense } from 'react';
import { lazily } from 'react-lazily';

const { MyComponent } = lazily(() => import('./MyComponent'));

const App = () => {
const [open, setOpen] = React.useReducer(() => true, false);

return (
<>
{open ? (
Loading...