react-lazy-named
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 = ; const MyComponent = <React.Suspense => <PrimaryButton ="YES!" /> </React.Suspense>;
Default exports
So you want to use default exports? Sure, just don't use the second argument.
const Card = ; // same asconst Card =
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 = ;
Webpack Magic Comments
You can also use Webpack magic comments as usual.
const PrimaryButton = ;
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.