npm

Need private packages and team management tools?Check out npm Orgs. »

preact-async-route

2.2.1 • Public • Published

preact-async-route

build

Async route component for preact-router

npm i -D preact-async-route

preact-async-route provides <AsyncRoute> tag to load your components lazily.

<AsyncRoute> provides similar props to return a lazily loaded component either as a Promise resolving to the component or return the component in a callback.

<AsyncRoute> also has a loading props, to which you can pass a component to be shown while the component is being lazily loaded.

Version 2.0

Version 2.0 brings support for a new prop component in order to make usage of already imported components now preact-async-route will support 2 props

  1. component this will just take the JSX component itself and NOT the function
  2. for function calls getComponent is the prop

check README 👇

Usage Example

  import { h, render } from 'preact';
  import Router, from 'preact-router';
  import AsyncRoute from 'preact-async-route';
  import Home from './Components/Home/Home.jsx';
  import Terms from './Components/Terms/Terms.jsx';
  import Loading from './Components/Loading/Loading.jsx';
  /** @jsx h */
 
  /**
    arguments passed to getComponent:
      url -- matched url
      cb  -- in case you are not returning a promise
      props -- props that component will recive upon being loaded
  */
  function getProfile(url, cb, props){
   return System.import('../component/Profile/Profile.jsx').then(module => module.default);
  }
 
  const Main = () => (
   <Router>
   <Home path="/" />
   <Terms path="/terms" />
   <AsyncRoute path="/profile/:userid" component={Home} />
   <AsyncRoute path="/friends/:userid" getComponent={getProfile}
            loading={()=>{return <Loading/>}} />
   </Router>
  );

License

MIT

install

npm i preact-async-route

Downloadsweekly downloads

406

version

2.2.1

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability