https://github.com/jlarky/react-lazily
react-lazily is a simple wrapper around React.lazy that supports named imports
https://github.com/jlarky/react-lazily
react
Last synced: about 1 year ago
JSON representation
react-lazily is a simple wrapper around React.lazy that supports named imports
- Host: GitHub
- URL: https://github.com/jlarky/react-lazily
- Owner: JLarky
- License: mit
- Created: 2020-12-01T18:28:26.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2023-09-15T11:05:01.000Z (almost 3 years ago)
- Last Synced: 2025-04-02T02:28:50.859Z (about 1 year ago)
- Topics: react
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-lazily
- Size: 134 KB
- Stars: 97
- Watchers: 4
- Forks: 5
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-lazily
[](https://bundlephobia.com/result?p=react-lazily)
[](https://packagephobia.com/result?p=react-lazily)
[](https://bundlephobia.com/result?p=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...}>
) : (
Load
)}
>
);
};
```
## Full Example with @loadable/component
Don't forget to install `@loadable/component` first.
```ts
import React from 'react';
import { loadable } from 'react-lazily/loadable';
const { MyComponent } = loadable(() => import('./MyComponent'), {
fallback:
Loading...,
});
const App = () => {
const [open, setOpen] = React.useReducer(() => true, false);
return (
<>
{open ? : Load}
>
);
};
```
## Related
- [Allow for named imports in React.lazy (GitHub Issue)](https://github.com/facebook/react/issues/14603#issuecomment-726551598)
- [Can you deconstruct lazily loaded React components? (Stack Overflow)](https://stackoverflow.com/a/61879800/74167)
- [solidjs-lazily (NPM Package)](https://www.npmjs.com/package/solidjs-lazily)