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: 1 day 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 (about 4 years ago)
• Default Branch: main
• Last Pushed: 2023-09-15T11:05:01.000Z (over 1 year ago)
• Last Synced: 2024-12-17T11:07:07.153Z (9 days ago)
• Topics: react
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/react-lazily
• Size: 134 KB
• Stars: 98
• Watchers: 5
• Forks: 5
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-lazily

[![minzip size](https://badgen.deno.dev/bundlephobia/minzip/react-lazily)](https://bundlephobia.com/result?p=react-lazily)

[![install size](https://badgen.deno.dev/packagephobia/install/react-lazily)](https://packagephobia.com/result?p=react-lazily)

[![dependency count](https://badgen.deno.dev/bundlephobia/dependency-count/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)