@atomico/lazy

component for dynamic import

Usage no npm install needed!

<script type="module">
  import atomicoLazy from 'https://cdn.skypack.dev/@atomico/lazy';
</script>

README

@atomico/lazy

CircleCI npm gzip

This function allows the dynamic importation of components.

import { h } from "@atomico/core";
import { lazy } from "@atomio/lazy";
import Loading from "./components/loading";

let PageHome = lazy(() => import("./pages/home"));

function App() {
    return <PageHome loading={<Loading title="loading home..." />} />;
}
Property Type Description
loading string, vnode the loading property will be tricked while waiting for the module's resolution

useLazy

This hooks allows to generate the same effect as lazy, but without depending on HoCs.

function importHome() {
    return import("./page/home");
}
function App() {
    let state = useLazy(importHome);
    return state.loading ? "loading..." : state.default;
}