react-lazily is a simple wrapper around React.lazy (or loadable from @loadable/component) that supports named imports.
Consider a component MyComponent that is exported with a default export:
export default MyComponent;Per React docs, you could use React.lazy as follows:
const MyComponent = React.lazy(() => import('./MyComponent'));However, if the component is exported with a named export:
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:
const MyComponent = React.lazy(() =>
import('./MyComponent').then((module) => ({ default: module.MyComponent }))
);With react-lazily it becomes:
const { MyComponent } = lazily(() => import('./MyComponent'));See the live example: https://codesandbox.io/s/react-lazily-example-p7hyj
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 ? (
<Suspense fallback={<div>Loading...</div>}>
<MyComponent />
</Suspense>
) : (
<button onClick={setOpen}>Load</button>
)}
</>
);
};Don't forget to install @loadable/component first.
import React from 'react';
import { loadable } from 'react-lazily/loadable';
const { MyComponent } = loadable(() => import('./MyComponent'), {
fallback: <div>Loading...</div>,
});
const App = () => {
const [open, setOpen] = React.useReducer(() => true, false);
return (
<>
{open ? <MyComponent /> : <button onClick={setOpen}>Load</button>}
</>
);
};