React lazy() with named imports - exports support
npm install react-lazy-named
Use React.lazy() with named exports (or imports, if you're all opposite)
Install the react-lazy-named package with yarn or npm.
``bash
yarn add react-lazy-named
// or
npm install react-lazy-named
`
Works just like React.lazy() but with an added argument - export name.
`jsx
import React from 'react';
import lazy from 'react-lazy-named';
const PrimaryButton = lazy(() => import('./Buttons'), 'primary');
const MyComponent = () => (
);
`
So you want to use default exports? Sure, just don't use the second argument.
`jsx
const Card = lazy(() => import('./Card'));
// same as
const Card = lazy(() => import('./Card'), 'default);
`
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!
`jsx`
const MotionDiv = lazy(() => import('framer-motion'), 'motion.div');
You can also use Webpack magic comments as usual.
`jsx`
const PrimaryButton = lazy(
() => import('./Buttons' / webpackChunkName: "buttons", webpackPreload: true /),
'primary'
);
Your project should already be running React 16.6+ (React.lazy() required).
This project uses Jest for unit testing. To execute tests run this command:
`sh`
yarn test
It's useful to run tests in watch mode when developing for incremental updates.
`sh``
yarn test:watch
This project is MIT licensed.