@atomico/router

powerful router for Webcomponents, React and Preact

@atomico/router aims to facilitate the creation of SPA-type applications through the following strategies:

  1. slot: you can reference a slot within the Router Switch to show on a specific path.

  2. elements: you will be able to mount CustomElements through Instantable elements.

  3. asynchronous generators: through asynchronous generators you will be able to show multiple views according to the load state, for example transitions.

Syntax

import { render } from "atomico";
import { RouterSwitch, RouterCase } from "@atomico/router";

render(
    <RouterSwitch>
        <RouterCase path="/" for="home"></RouterCase>
        <RouterCase path="/user/{id}" load={async function *()({id}){
            yield <h1>loading...</h1>;
            const data = await getUser(id);
            return <User {...data}/>
        }}></RouterCase>
        <h1 slot="config">home</h1>
    </RouterSwitch>,
    document.body
)

Elements

RouterSwitch

Properties

PropsDescriptionTypeEvent

case

slot to associate at the time of the match with path

String - read only

match

Events

EventJSX

Match

onMatch

It is dispatched every time the router matches a new route.

RouterCase

Component that declares the behavior of the route, with it you can:

  1. Define a slot to show instantly when matching the browser path.

  2. Define a load callback to execute when matching the browser route.

Properties

PropsDescriptionType

load

asynchronous content loader

Function

for

slot to associate at the time of the match with path

String

path

expression for path

String

memo

memorize the state resolved by load according to the concurrent path

Boolean

destroy

Remove associated view on route change

Boolean

Examples

Pokeapi

Last updated