@techstack/react-lazy-named
TypeScript icon, indicating that this package has built-in type declarations

1.3.249 • Public • Published

react-lazy-named

MIT Licensed

Use React.lazy() with named exports (or imports, if you're all opposite)

Getting started

Install the react-lazy-named package with yarn or npm.

yarn add react-lazy-named

// or

npm install react-lazy-named

Usage

Works just like React.lazy() but with an added argument - export name.

import React from 'react';
import lazy from 'react-lazy-named';

const PrimaryButton = lazy(() => import('./Buttons'), 'primary');

const MyComponent = () => (
  <React.Suspense fallback={null}>
    <PrimaryButton text="YES!" />
  </React.Suspense>
);

Default exports

So you want to use default exports? Sure, just don't use the second argument.

const Card = lazy(() => import('./Card'));

// same as
const Card = lazy(() => import('./Card'), 'default');

Deeply nested components

Some libraries like framer-motion use deeply nested components. In other words, they export objects with components in properties. Guess what, you can reach those,too!

const MotionDiv = lazy(() => import('framer-motion'), 'motion.div');

Webpack Magic Comments

You can also use Webpack magic comments as usual.

const PrimaryButton = lazy(
  () => import('./Buttons' /* webpackChunkName: "buttons", webpackPreload: true */),
  'primary'
);

Dependencies

Your project should already be running React 16.6+ (React.lazy() required).

Development

Testing

This project uses Jest for unit testing. To execute tests run this command:

yarn test

It's useful to run tests in watch mode when developing for incremental updates.

yarn test:watch

Licensing

This project is MIT licensed.

Package Sidebar

Install

npm i @techstack/react-lazy-named

Weekly Downloads

22

Version

1.3.249

License

MIT

Unpacked Size

10.3 kB

Total Files

12

Last publish

Collaborators

  • the-code-monkey