https://github.com/simplr/simplr-router-preact-middleware

A Middleware for Simplr Router to enable Preact support.
https://github.com/simplr/simplr-router-preact-middleware

Last synced: 12 months ago
JSON representation

A Middleware for Simplr Router to enable Preact support.

• Host: GitHub
• URL: https://github.com/simplr/simplr-router-preact-middleware
• Owner: Simplr
• Created: 2021-01-11T09:09:42.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2021-01-18T08:11:32.000Z (over 5 years ago)
• Last Synced: 2025-01-19T08:15:40.380Z (over 1 year ago)
• Language: JavaScript
• Size: 413 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
![Title Image](simplr-router-title-image.png)

# Simplr-Router Preact Middleware

## Introduction

This repository contains the Preact middleware needed for running [Simplr Router](https://github.com/Simplr/simplr-router) with Preact.

## Usage

The example is created on top of Preact cli create default.

```javascript

import Header from "./header";

import Home from "../routes/home";

import Profile from "../routes/profile";

import SimplrRouter from "@simplr-wc/router";

import SimplrRouterPreactMiddleware from "@simplr-wc/router-preact-middleware";

const routes = [

  {

    path: "/",

    component: Home,

  },

  {

    path: "profile",

    component: Profile,

    routes: [

      {

        path: ":user",

        component: Profile,

      },

    ],

  },

];

const router = new SimplrRouter({ routes });

router.use(SimplrRouterPreactMiddleware());

router.init();

const App = () => (

  


    

  

);


export default App;

```

The properties from dynamic routes are accessible from the props of the component.

```javascript

import { h } from "preact";

import { useEffect, useState } from "preact/hooks";

import style from "./style.css";

// Note: `user` comes from the URL, courtesy of our router

const Profile = ({ user }) => {

  const [time, setTime] = useState(Date.now());

  const [count, setCount] = useState(10);

  useEffect(() => {

    let timer = setInterval(() => setTime(Date.now()), 1000);

    return () => clearInterval(timer);

  }, []);

  return (

    


      
Profile: {user}

      
This is the user profile for a user named {user}.


      
Current time: {new Date(time).toLocaleString()}


      


         setCount((count) => count + 1)}>Click Me{" "}

        Clicked {count} times.

      

    

  );

};


export default Profile;

```