# react-named-lazy

> Wrapper around React.lazy to work with named exports

Latest version **0.1.0** (published 2023-11-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-named-lazy
pnpm add react-named-lazy
yarn add react-named-lazy
bun add react-named-lazy
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2023-11-06 |
| First published | 2023-11-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 3.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | vjee |
| Maintainers | vgesteljasper |
| Keywords | react, lazy, lazily, named, export |

## Links

- npm: https://www.npmjs.com/package/react-named-lazy
- Repository: https://github.com/vjee/react-named-lazy
- Homepage: https://github.com/vjee/react-named-lazy#readme
- Issues: https://github.com/vjee/react-named-lazy/issues
- npm.io page: https://npm.io/package/react-named-lazy

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.0 (latest) — 2023-11-06

## README

# react-named-lazy

Just like `React.lazy` but works with named exports.

## Usage

```ts
import { namedLazy } from "react-named-lazy";

// Using destructuring
const { Sum } = namedLazy(() => import("./Math"));

// Or the long way
const Subtract = namedLazy(() => import("./Math")).Subtract;
```

## TypeScript

This package provides detailed types and will only let you access exported react components.\
Other exports are ignored.

Given the following file `./Math.tsx`, `namedLazy` will infer that `Sum` and `Subtract` can be used as components,\
even though more things are exported.

![TypeScript inference](.github/readme-image-01.png)
![TypeScript inference](.github/readme-image-02.png)

```tsx
export function Sum({ a, b }: { a: number; b: number }) {
	return <div>{`${a} + ${b} = ${sum(a, b).result}`}</div>;
}

export function Subtract({ a, b }: { a: number; b: number }) {
	return <div>{`${a} - ${b} = ${subtract(a, b).result}`}</div>;
}

export const PI = Math.PI;

export function sum(a: number, b: number) {
	return { result: a + b };
}

export function subtract(a: number, b: number) {
	return { result: a - b };
}
```

> Note:\
> Some non-component functions can be compatible with `React.ComponentType` and will be shown in the list of available components.\
> E.g `export const sum(a: number, b: number) => a + b;` extends `React.ComponentType` and will thus be listed.

## Prior art

- Inspired by (read: "copied from") [react-lazily](https://github.com/JLarky/react-lazily) but with better types

---
_Source: https://npm.io/package/react-named-lazy · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._