preact-async-route - GitLite

KO | EN

gitlite — search

#javascript #python #hacktoberfest #llm #golang #go #machine-learning #linux #docker #nodejs #java #mcp #ios #openai

preact-async-route

(★ 139)

Async route component for preact-router

File Explorer

Download Latest Version (.zip)

- - Home.js
  - Profile.js
  - Terms.js
- app.js
- index.html
- npm-debug.log
- package.json
- webpack.config.js
- index.d.ts
- index.js
- - index.tsx
  - tsconfig.json
- index.js
.babelrc
.eslintrc
.gitignore
.travis.yml
karma.conf.js
LICENSE
package-lock.json
package.json
README.md
rollup.config.js

# Installation Guide

1. Get the code

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

Downloads the entire project code from GitHub to your computer.

cd preact-async-route

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm install

Downloads and installs the libraries listed in package.json.

npm start

Starts the development/run server.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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 `<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 :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 = () => (
  	<Router>
  		<Home path="/" />
  		<Terms path="/terms" />
  		<AsyncRoute path="/profile/:userid" component={Home} />
  		<AsyncRoute path="/friends/:userid" getComponent={getProfile}
            loading={()=>{return <Loading/>}} />
  	</Router>
  );
  ```

### License

[MIT]

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