How to lazy loading JSX react module with dots notation
How to React lazy loading module with dot notation such as subclass or non default export ?
Original code without react lazy
import React from 'react';
import { Navbar, Nav } from 'rsuite';
import HomeIcon from '@rsuite/icons/legacy/Home';
import CogIcon from '@rsuite/icons/legacy/Cog';
const MyNavbar = () => (
<Navbar>
<Navbar.Brand href="#">RSUITE</Navbar.Brand>
<Nav>
<Nav.Item icon={<HomeIcon />}>Home</Nav.Item>
<Nav.Item>News</Nav.Item>
<Nav.Item>Products</Nav.Item>
<Nav.Menu title="About">
<Nav.Item>Company</Nav.Item>
<Nav.Item>Team</Nav.Item>
<Nav.Menu title="Contact">
<Nav.Item>Via email</Nav.Item>
<Nav.Item>Via telephone</Nav.Item>
</Nav.Menu>
</Nav.Menu>
</Nav>
<Nav pullRight>
<Nav.Item icon={<CogIcon />}>Settings</Nav.Item>
</Nav>
</Navbar>
);
Convert to react lazy
// below is turn them into react lazy loading
const Nav = React.lazy(() => import('rsuite/esm/Nav'));
const NavItem = React.lazy(() =>
import('rsuite/esm/Nav').then(module => ({
default: module.default.Item,
})),
);
const NavMenu = React.lazy(() =>
import('rsuite/esm/Nav').then(module => ({
default: module.default.Menu,
})),
);
const Navbar = React.lazy(() => import('rsuite/esm/Navbar'));
const NavbarBrand = React.lazy(() =>
import('rsuite/esm/Navbar').then(module => ({
default: module.default.Brand,
})),
);
How to lazy import SVG Icon in ReactJS
sample codes to import SVG ICON with react lazy using library React Suite
Original imports SVG Icon without react lazy
import HomeIcon from '@rsuite/icons/legacy/Home';
import CogIcon from '@rsuite/icons/legacy/Cog';
Import SVG Icon using react lazy
const HomeIcon = React.lazy(() => import('@rsuite/icons/legacy/Home'));
const CogIcon = React.lazy(() => import('@rsuite/icons/legacy/Cog'));
Full Code Sample
my full sample code to lazy import React Suite components
filename: MyNavbar.tsx
import React from 'react';
//
// import HomeIcon from '@rsuite/icons/legacy/Home';
// import { Nav, Navbar } from 'rsuite';
const Nav = React.lazy(() => import('rsuite/esm/Nav'));
const NavItem = React.lazy(() =>
import('rsuite/esm/Nav').then(module => ({
default: module.default.Item,
})),
);
const NavMenu = React.lazy(() =>
import('rsuite/esm/Nav').then(module => ({
default: module.default.Menu,
})),
);
const Navbar = React.lazy(() => import('rsuite/esm/Navbar'));
const NavbarBrand = React.lazy(() =>
import('rsuite/esm/Navbar').then(module => ({
default: module.default.Brand,
})),
);
const HomeIcon = React.lazy(() => import('@rsuite/icons/legacy/Home'));
const MyNavbar = ({ ...props }) => {
return (
<Navbar {...props}>
<NavbarBrand href="#">WMI</NavbarBrand>
<Nav>
<NavItem icon={<HomeIcon />} href="/page">
Home
</NavItem>
<NavItem href="/page/google/login">Login</NavItem>
<NavMenu title="Tools">
<NavItem onClick={navItemClick} href="/page/bot-detect">
Selenium Checker
</NavItem>
<NavItem onClick={navItemClick} href="/page/moment-timezone">
Moment Timezone Playground
</NavItem>
<NavItem onClick={navItemClick} href="/page/cookies">
Cookie Manager
</NavItem>
</NavMenu>
</Nav>
{/* <Nav pullRight>
<NavItem icon={<CogIcon />}>Settings</NavItem>
</Nav> */}
</Navbar>
);
};
export default MyNavbar;
function navItemClick(e: { target: any }): any {
const el = e.target as HTMLElement;
if (el.hasAttribute('href')) {
window.location.href = el.getAttribute('href');
}
}
filename: MyTheme.tsx
import React from "react";
// lazy import react suite custom navbar
const MyNavbar = React.lazy(() => import("./Navbar"));
// lazy import other react suite components
const Container = React.lazy(() => import('rsuite/esm/Container'));
const Sidebar = React.lazy(() => import('rsuite/esm/Sidebar'));
const Header = React.lazy(() => import('rsuite/esm/Header'));
const Content = React.lazy(() => import('rsuite/esm/Content'));
const Footer = React.lazy(() => import('rsuite/esm/Footer'));
// export the theme
export default function MyTheme(props) {
return (
<Container>
<Header className="fixed-top">
<MyNavbar />
</Header>
<Container id="content-wrapper">
{/* using children property */}
{/* <Content>{this.props.children}</Content> */}
<Content>
{/* using react-router-dom */}
<Outlet />
</Content>
</Container>
</Container>
);
}
conclusion
now you learned How to lazy loading module without default export in reactjs, and this method also works on typescript
.