https://github.com/brokeboiflex/jar-preact

JAR - a JSX Abstract Router
https://github.com/brokeboiflex/jar-preact

jsx preact react router

Last synced: 3 months ago
JSON representation

JAR - a JSX Abstract Router

• Host: GitHub
• URL: https://github.com/brokeboiflex/jar-preact
• Owner: brokeboiflex
• Created: 2024-07-19T23:49:34.000Z (6 months ago)
• Default Branch: master
• Last Pushed: 2024-09-06T13:50:12.000Z (4 months ago)
• Last Synced: 2024-09-26T18:44:08.378Z (3 months ago)
• Topics: jsx, preact, react, router
• Language: TypeScript
• Homepage:
• Size: 244 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# JAR Preact

A custom router with syntax similiar to `preact-iso` that abstracts routing from `window.location` and gives developers more control over persistence.

# Usage

JAR uses `zustand` under the hood giving developers freedom over how they want to store the state. If you want to persist te state you have to provide the `createRouterStore` function with your preffered storage. 

Below is an example of usage in chrome extension development with [`zustand-chrome-storage`](https://www.npmjs.com/package/zustand-chrome-storage).

```ts

//app.tsx

import { ChromeSessionStorage } from "zustand-chrome-storage";

import { Router, createRouterStore, createLink, Route } from "jar-preact";

// Assign unique id to make each tab have it's own router

export const useRouter = createRouterStore(ChromeSessionStorage, uuidv4());

export const Link = createLink(useRouter);

export default function App() {

return(

  

    } />

    } />

  

 );

}

```

As you can see we use `createRouterStore` to create reusable `useRouter` function and `createLink` to create a reusable `Link` component. We can import those in other components to navigate between them, display current location and history or to go back.

```ts

import { useRouter } from "../app";

export function MyRootPage() {

  const {history, location, navigate, goBack} = useRouter()

  return (

    ...

  );

}

```