https://github.com/prateekbh/preact-async-route

Async route component for preact-router
https://github.com/prateekbh/preact-async-route

code-splitting preact preact-router prpl

Last synced: about 1 month ago
JSON representation

Async route component for preact-router

• Host: GitHub
• URL: https://github.com/prateekbh/preact-async-route
• Owner: prateekbh
• License: mit
• Created: 2017-02-16T04:53:37.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-06T18:53:30.000Z (almost 2 years ago)
• Last Synced: 2024-04-15T07:27:21.723Z (5 months ago)
• Topics: code-splitting, preact, preact-router, prpl
• Language: JavaScript
• Size: 676 KB
• Stars: 138
• Watchers: 4
• Forks: 16
• Open Issues: 19
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-preact - Preact Async Route - Async route component for preact-router. (Uncategorized / Uncategorized)

README

        
# preact-async-route

[![build](https://api.travis-ci.org/prateekbh/preact-async-route.svg?branch=master)](https://api.travis-ci.org/prateekbh/preact-async-route.svg?branch=master)

[![gzip size](http://img.badgesize.io/https://unpkg.com/preact-async-route/dist/index.min.js?compression=gzip)](https://unpkg.com/preact-async-route/dist/index.min.js)

## Deprecation notice

`preact-x` supports `Lazy` component, which can be used as shown [here](https://reactjs.org/docs/code-splitting.html#reactlazy).

Prefer using the `Lazy` component along with `Suspense` instead of this package.

This package is still useful for preact versions < 10

--------------------

Async route component for [preact-router](https://github.com/developit/preact-router)

`npm i -D preact-async-route`

preact-async-route provides ` ` tag to load your components lazily.

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

` `  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 :point_down:

## Usage Example

```js

  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 import('../component/Profile/Profile.jsx').then(module => module.default);

  }

  const Main = () => (

  	

  		

  		

  		

  		{return }} />

  	

  );

  ```

### License

[MIT]

[MIT]: http://choosealicense.com/licenses/mit/