@ossy/router-react 0.0.1-beta.1

package/README.md

@@ -0,0 +1,301 @@
+# @ossy/router-react
+
+A React router built for server side rendering and multi-language support with localized paths.
+
+What this package tries to do is to lift the responsibility of creating language aware links to a single provider, the `<Router/>` component.
+
+The components that want to trigger a navigation only need to be aware of the pageId (with eventual params) they want to navigate to.
+
+Loading of appropriate data is still the responsibility of the component.
+
+This Router is aimed towards websites that want to prerender as much as possible on the server and therefore doesn't include many client side functionality that you might want for SPAs, like setting search params without doing a full navigation.
+
+## Features
+- Easy to use
+- Supports single language websites
+- Supports multi language websites with localized paths
+- Supports prerendering (API is only hooks based ATM, API that works for server components is comming)
+
+## Roadmap
+- [ ] API that works on server components (non hooks API)
+- [ ] Trigger navigation programaticly on the client (`router.navigate()`)
+- [ ] Update search params without doing full navigation, for times you keep state in the url
+- [ ] Redirects
+
+## Table of Contents
+
+- [@ossy/router-react](#ossyrouter-react)
+- [Features](#features)
+- [What problem does this package solve?](#what-problem-does-this-package-solve)
+- [Installation](#installation)
+- [Usage](#usage)
+  - [Single language website setup](#single-language-website-setup)
+  - [Multi language website setup](#multi-language-website-setup)
+  - [Server side rendering](#server-side-rendering)
+  - [Navigation](#navigation)
+    - [Navigation with params](#navigation-with-params)
+      - [Note on default params](#note-on-default-params)
+    - [Navigating to specific page in a specific language](#navigating-to-specific-page-in-a-specific-language)
+    - [Switching language (same page)](#switching-language-same-page)
+    - [Navigating back](#navigating-back)
+    - [Redirects](#redirects)
+
+## What problem does this package solve?
+When creating links in your app it's not uncommon to hard code the path you want to navigate to.
+
+```tsx
+const MyComponent = () => {
+ const { org } = useParams()
+ return (
+    <nav>
+        <a href={`/${org}`}>Org home</a>
+        <a href={`/${org}/users`}>Org users</a>
+    </nav>
+ )
+}
+```
+This works pretty OK when you only have to worry about one language.
+But what happens when you want to add another language with localized paths?
+How would that look like inside a component?
+
+```tsx
+const MyComponent = () => {
+ const { language, org } = useParams()
+
+ const paths = {
+    en: {
+        home: `/${org}`,
+        users: `/${org}/users`
+    },
+    sv: {
+        home: `/${org}`,
+        users: `/${org}/anvandare`
+    }
+ }
+
+ return (
+    <nav>
+        <a href={paths[language].home}>Org home</a>
+        <a href={paths[language].users}>Org users</a>
+    </nav>
+ )
+}
+```
+The example above doesn't look too bad, but keep in mind it's only for one extra language and in one component. Imagine doing that everytime you want to navigate?
+
+What this package tries to do is to lift the responsibility of creating language aware links to a single provider, the `<Router/>` component.
+
+The components that want to trigger a navigation only need to be aware of the pageId (with eventual params) they want to navigate to.
+
+```tsx
+const MyComponent = () => {
+ const router = useRouter()
+
+ return (
+    <nav>
+        <a href={router.getHref('home')}>Org home</a>
+        <a href={router.getHref('users')}>Org users</a>
+    </nav>
+ )
+}
+```
+To take this one step further, if you were to integrate with a cms you could add the pageId to the data, and you wouldn't need to update the component or data if the paths changes.
+
+In the below example we pretend to load data from a CMS and itterate through navigation links.
+In this made up case, the `data.navigationLinks.href` refers to the pageId.
+
+```tsx
+const MyComponent = () => {
+ const router = useRouter()
+ const { data } = useDataFromSomeCms()
+
+ return (
+   <nav>
+    {data.navigationLinks(link => (
+      <a href={router.getHref(link.href)} key={link.href}>{link.label}</a>)
+    )}
+   </nav>
+ )
+}
+```
+
+
+## Installation
+```
+npm install @ossy/router-react
+```
+
+## Usage
+
+### Single language website setup
+```tsx
+import { Router } from '@ossy/router-react'
+
+const pages = [
+  { id: 'home', path: '/', element: <h1>Home page<h1> },
+  { id: 'users', path: '/users', element: <h1>Users page<h1> },
+  { id: 'user', path: '/users/:userId', element: <h1>User page<h1> },
+]
+
+export const App = () => (
+  <html>
+    <head>
+      <title>My app</title>
+    </head>
+    <body>
+        <Router pages={pages} />
+    </body>
+  </html>
+)
+```
+
+### Multi language website setup
+
+Setting up a multi language website is just a matter of providing the `<Router/>` component with some additional information. Both `defaultLanguage` and `supportedLanguages` are required for multi language websites. To specify paths for each supported language, provide the `page.path` key with an object containing key value pairs that corresponds with the language and it's associated path for that page.
+
+- When navigating to a page on a multi language site, the language needs to be at the root.
+So the urls for a page with the config below becomes `/en/users` and `/sv/anvandare`, both rendering the same element.
+  ```tsx
+    {
+        id: 'users',
+        path: {
+          en: '/users',
+          sv: '/anvandare'
+        },
+        element: <h1>Users page<h1>
+    },
+  ```
+- It's then up to the rendered element to read the language from the `useRouter()` hook and load appropriate data.
+- If users navigate to the root url, the router will redirect to the default language
+
+```tsx
+import { Router } from '@ossy/router-react'
+
+const routerConfig = {
+  defaultLanguage: ['en'],
+  supportedLanguages: ['en', 'sv'],
+  pages: [
+    {
+        id: 'home',
+        path: {
+          en: '/',
+          sv: '/',
+        },
+        element: <h1>Home page<h1>
+    },
+    {
+        id: 'users',
+        path: {
+          en: '/users',
+          sv: '/anvandare'
+        },
+        element: <h1>Users page<h1>
+    },
+    {
+        id: 'user',
+        path: {
+          en: '/users/:userId',
+          sv: '/anvandare/:userId'
+        },
+        element: <h1>User page<h1>
+    },
+  ]
+}
+
+export const App = () => (
+  <html>
+    <head>
+      <title>My app</title>
+    </head>
+    <body>
+        <Router {...routerConfig} />
+    </body>
+  </html>
+)
+```
+
+### Server side rendering
+- `@ossy/react-router` provides no server on it's own.
+- Meaning it's up to you wich server framework you choose to use, be it Expressjs or something else.
+- Then you can use any of the React dom static methods to actually render the page.
+- To provide the active url use the url prop on the router.
+
+### Navigation
+
+Navigation is done by getting the `href` through `router.getHref(<pageId>)` and using regular `<a/>` tags to do the actual navigation.
+
+```tsx
+const router = useRouter()
+<a href={router.getHref('users')}>Users</a>
+```
+
+#### Navigation with params
+To create an href with params, provide `getHref()` with an options objet.
+```tsx
+const router = useRouter()
+const userId = '111'
+<a href={router.getHref({ id: 'user', params: { userId } })}>User ${userId}</a>
+```
+
+##### Note on default params
+The default params for the `getHref()` call will be taken from the url.
+This means that if a user have navigated to `/users/:userId` and you want to build a link to
+`/users/:userId/details`, you don't need to supply the userId to the `getHref()` call since it already exists in the url.
+
+#### Navigating to specific page in a specific language
+For multi language websites, the default behaviour is that `getHref()` returns the href for the active language, This can be overriden by providing the target language in the options object.
+```tsx
+const router = useRouter()
+<a href={router.getHref({ id: 'home', language: 'en' })}>Home</a>
+```
+
+#### Hash and search params
+To add hash and search params, add them to the end of the pageId.
+```tsx
+const router = useRouter()
+<a href={router.getHref('@collection#main?sort=desc')}>Collection</a>
+```
+
+#### Switching language (same page)
+Switching the language of the current page is done by navigating to that route.
+To make it easier, if pageId is left out of the getHref call, it will assume you want the current page.
+So to make a language switcher could look as easy as this:
+```
+const router = useRouter()
+<a href={router.getHref({ language: 'en' })}>English</a>
+<a href={router.getHref({ language: 'sv' })}>Swedish</a>
+<a href={router.getHref({ language: 'es' })}>Spanish</a>
+```
+
+#### Navigating back
+Backwards navigation can be done with the `router.back()` methods.
+It just calls `window.history.back()` under the hood.
+```tsx
+const router = useRouter()
+<Button href={router.back()}>Back</Button>
+```
+
+#### Redirects
+You can redirect by setting the redirect field on the page defenition to the pageId you want to redirect to.
+The redirect will take place on the client.
+In the example below, the `/services` will redirect to `/contact`.
+```tsx
+const pages = [
+  {
+    id: 'services',
+    redirect: '@contact',
+    path: '/services'
+  },
+  {
+    id: 'contact',
+    path: '/contact'
+  }
+]
+```
+
+## Why not open source?
+
+TLDR: It might be in the future.
+
+Right now the source is in a private monorepo with other private packages and workflows.
+It's to much of a hassle to break it out right now.

package/build/cjs/esm/router-react.d.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+import { MultiLanguagePage, RouterOptions, SingleLanguagePage } from '@ossy-se/router';
+export declare const RouterContext: React.Context<{
+    pages: RouterPage[];
+    defaultLanguage: string | undefined;
+    supportedLanguages: string[];
+}>;
+export declare const useRouter: () => {
+    pages: RouterPage[];
+    defaultLanguage: string | undefined;
+    supportedLanguages: string[];
+};
+export declare const Router: <T extends RouterPage>({ url, pages, defaultLanguage, supportedLanguages }: RouterProps<T>) => React.JSX.Element;
+export interface RouterProps<T extends RouterPage> extends RouterOptions<T> {
+    /**
+     * Render page associated with the given url.
+     * Used to render the page on server side where window.location is not available
+     * @type string
+     * @default undefined
+    */
+    url?: string;
+}
+export type RouterPage = SingleLanguageRouterPage | MultiLanguageRouterPage;
+export interface SingleLanguageRouterPage extends SingleLanguagePage {
+    /** If provided the page will redirect to the given page id
+     * @default undefined
+     * @type {string}
+     * @example { redirect: '@home'}
+    */
+    redirect?: string;
+    element?: React.ReactNode;
+    render: () => React.ReactNode;
+}
+export interface MultiLanguageRouterPage extends MultiLanguagePage {
+    /** If provided the page will redirect to the given page id
+     * @default undefined
+     * @type {string}
+     * @example { redirect: '@home'}
+    */
+    redirect?: string;
+    element?: React.ReactNode;
+    render: () => React.ReactNode;
+}
+export interface GetHrefRequest {
+    id?: string;
+    language?: string;
+    params?: Record<string, string>;
+}
+export interface GetHrefOfActivePageByLanguageRequest {
+    language: string;
+}

package/build/cjs/index.js

@@ -0,0 +1 @@
+"use strict";var e=require("react"),n=require("@ossy-se/router"),r=function(){return r=Object.assign||function(e){for(var n,r=1,t=arguments.length;r<t;r++)for(var a in n=arguments[r])Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a]);return e},r.apply(this,arguments)};"function"==typeof SuppressedError&&SuppressedError;var t=e.createContext({pages:[],defaultLanguage:void 0,supportedLanguages:[]}),a=function(e){return void 0===e&&(e=""),function(e){return"/"===e[e.length-1]?e:"".concat(e,"/")}(function(e){return"/"===e[0]?e:"/".concat(e)}(e))};exports.Router=function(o){var i,u,l,d,s,c=o.url,f=o.pages,g=void 0===f?[]:f,p=o.defaultLanguage,v=void 0===p?void 0:p,w=o.supportedLanguages,h=void 0===w?[]:w;if(c){var m=c.match(/([^?#]*)(\?[^#]*)?(#.*)?/);u=c,l=(null==m?void 0:m[1])||"",d=(null==m?void 0:m[3])||"",s=(null==m?void 0:m[2])||""}else{if("undefined"==typeof window)return e.createElement(e.Fragment,null);u=window.location.href,l=window.location.pathname,s=(null==(d=window.location.hash)?void 0:d.includes("?"))?d.split("?")[1]:window.location.search}var y=h.length>1&&!!v,b=l.split("/")[1]||"",L=h.includes(b)?b:v,k=n.Router.of({pages:g,defaultLanguage:v,supportedLanguages:h}),P=k.getParamsFromUrl(u),R=new URLSearchParams(s),S=k.getPageByUrl(u);if(S||(y&&"/"===l&&"undefined"!=typeof window&&(window.location.href="/"+v),S=y?g.find((function(e){return"*"===a(e.path[L])})):g.find((function(e){return"*"===a(e.path)}))),!S)return console.warn("[RouterReact] No active page found for",l),e.createElement(e.Fragment,null);e.useCallback((function(e,n){if("undefined"!=typeof window){window.history.pushState({},"","".concat(l,"?").concat(R.toString()));var r=new URLSearchParams(R);r.set(e,n),history.pushState({},"","?".concat(r.toString()))}}),[R]);var C=e.useCallback((function(e){var n,r,t,a,o,i={};if("string"==typeof e?(n=e,i=P,r=L):(o=e).id||void 0===o.language?(n=(null==e?void 0:e.id)||S.id,i=(null==e?void 0:e.params)||P,r=(null==e?void 0:e.language)||L):(n=S.id,i=P,r=e.language),n.includes("#")){var u=n.split("#");if(n=u[0],(t=u[1]).includes("?")){var l=n.split("?");t=l[0],a=l[1]}}else if(n.includes("?")){var d=n.split("?");n=d[0],a=d[1]}var s=k.getPathname({id:n.replace("@",""),params:i,language:r});return t&&(s=s+"#"+t),a&&(s=s+"?"+a),s}),[k,L]),x=e.useCallback((function(e){if("undefined"!=typeof window&&e)if("@back"!==e){var n=C(e);n&&(window.location.href=n)}else window.history.back()}),[C]),E=e.useCallback((function(){"undefined"!=typeof window&&window.history.back()}),[]),U={href:u,pages:g,language:L,defaultLanguage:v,supportedLanguages:h,params:P,searchParams:r({},Array.from(R.entries()).reduce((function(e,n){var t,a=n[0],o=n[1];return r(r({},e),((t={})[a]=o,t))}),{})),navigate:x,getHref:C,back:E};(null==S?void 0:S.redirect)&&x({id:S.redirect});var F=(null==S?void 0:S.element)||(null===(i=null==S?void 0:S.render)||void 0===i?void 0:i.call(S));return e.createElement(t.Provider,{value:U},F)},exports.RouterContext=t,exports.useRouter=function(){return e.useContext(t)};

package/build/esm/index.js

@@ -0,0 +1 @@
+import e,{createContext as n,useContext as r,useCallback as a}from"react";import{Router as t}from"@ossy-se/router";var o=function(){return o=Object.assign||function(e){for(var n,r=1,a=arguments.length;r<a;r++)for(var t in n=arguments[r])Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t]);return e},o.apply(this,arguments)};"function"==typeof SuppressedError&&SuppressedError;var i=n({pages:[],defaultLanguage:void 0,supportedLanguages:[]}),u=function(){return r(i)},d=function(e){return void 0===e&&(e=""),function(e){return"/"===e[e.length-1]?e:"".concat(e,"/")}(function(e){return"/"===e[0]?e:"/".concat(e)}(e))},l=function(n){var r,u,l,c,s,f=n.url,g=n.pages,p=void 0===g?[]:g,v=n.defaultLanguage,w=void 0===v?void 0:v,h=n.supportedLanguages,m=void 0===h?[]:h;if(f){var y=f.match(/([^?#]*)(\?[^#]*)?(#.*)?/);u=f,l=(null==y?void 0:y[1])||"",c=(null==y?void 0:y[3])||"",s=(null==y?void 0:y[2])||""}else{if("undefined"==typeof window)return e.createElement(e.Fragment,null);u=window.location.href,l=window.location.pathname,s=(null==(c=window.location.hash)?void 0:c.includes("?"))?c.split("?")[1]:window.location.search}var L=m.length>1&&!!w,P=l.split("/")[1]||"",S=m.includes(P)?P:w,b=t.of({pages:p,defaultLanguage:w,supportedLanguages:m}),E=b.getParamsFromUrl(u),R=new URLSearchParams(s),k=b.getPageByUrl(u);if(k||(L&&"/"===l&&"undefined"!=typeof window&&(window.location.href="/"+w),k=L?p.find((function(e){return"*"===d(e.path[S])})):p.find((function(e){return"*"===d(e.path)}))),!k)return console.warn("[RouterReact] No active page found for",l),e.createElement(e.Fragment,null);a((function(e,n){if("undefined"!=typeof window){window.history.pushState({},"","".concat(l,"?").concat(R.toString()));var r=new URLSearchParams(R);r.set(e,n),history.pushState({},"","?".concat(r.toString()))}}),[R]);var U=a((function(e){var n,r,a,t,o,i={};if("string"==typeof e?(n=e,i=E,r=S):(o=e).id||void 0===o.language?(n=(null==e?void 0:e.id)||k.id,i=(null==e?void 0:e.params)||E,r=(null==e?void 0:e.language)||S):(n=k.id,i=E,r=e.language),n.includes("#")){var u=n.split("#");if(n=u[0],(a=u[1]).includes("?")){var d=n.split("?");a=d[0],t=d[1]}}else if(n.includes("?")){var l=n.split("?");n=l[0],t=l[1]}var c=b.getPathname({id:n.replace("@",""),params:i,language:r});return a&&(c=c+"#"+a),t&&(c=c+"?"+t),c}),[b,S]),F=a((function(e){if("undefined"!=typeof window&&e)if("@back"!==e){var n=U(e);n&&(window.location.href=n)}else window.history.back()}),[U]),O=a((function(){"undefined"!=typeof window&&window.history.back()}),[]),j={href:u,pages:p,language:S,defaultLanguage:w,supportedLanguages:m,params:E,searchParams:o({},Array.from(R.entries()).reduce((function(e,n){var r,a=n[0],t=n[1];return o(o({},e),((r={})[a]=t,r))}),{})),navigate:F,getHref:U,back:O};(null==k?void 0:k.redirect)&&F({id:k.redirect});var x=(null==k?void 0:k.element)||(null===(r=null==k?void 0:k.render)||void 0===r?void 0:r.call(k));return e.createElement(i.Provider,{value:j},x)};export{l as Router,i as RouterContext,u as useRouter};

package/build/esm/router-react.d.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+import { MultiLanguagePage, RouterOptions, SingleLanguagePage } from '@ossy-se/router';
+export declare const RouterContext: React.Context<{
+    pages: RouterPage[];
+    defaultLanguage: string | undefined;
+    supportedLanguages: string[];
+}>;
+export declare const useRouter: () => {
+    pages: RouterPage[];
+    defaultLanguage: string | undefined;
+    supportedLanguages: string[];
+};
+export declare const Router: <T extends RouterPage>({ url, pages, defaultLanguage, supportedLanguages }: RouterProps<T>) => React.JSX.Element;
+export interface RouterProps<T extends RouterPage> extends RouterOptions<T> {
+    /**
+     * Render page associated with the given url.
+     * Used to render the page on server side where window.location is not available
+     * @type string
+     * @default undefined
+    */
+    url?: string;
+}
+export type RouterPage = SingleLanguageRouterPage | MultiLanguageRouterPage;
+export interface SingleLanguageRouterPage extends SingleLanguagePage {
+    /** If provided the page will redirect to the given page id
+     * @default undefined
+     * @type {string}
+     * @example { redirect: '@home'}
+    */
+    redirect?: string;
+    element?: React.ReactNode;
+    render: () => React.ReactNode;
+}
+export interface MultiLanguageRouterPage extends MultiLanguagePage {
+    /** If provided the page will redirect to the given page id
+     * @default undefined
+     * @type {string}
+     * @example { redirect: '@home'}
+    */
+    redirect?: string;
+    element?: React.ReactNode;
+    render: () => React.ReactNode;
+}
+export interface GetHrefRequest {
+    id?: string;
+    language?: string;
+    params?: Record<string, string>;
+}
+export interface GetHrefOfActivePageByLanguageRequest {
+    language: string;
+}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@ossy/router-react",
+  "repository": "github:ossy-se/ossy",
+  "description": "React bindings for the @ossy-se/router",
+  "version": "0.0.1-beta.1",
+  "source": "src/index.js",
+  "type": "module",
+  "main": "build/cjs/index.js",
+  "module": "build/esm/index.js",
+  "author": "Ossy <yourfriends@ossy.se> (https://ossy.se)",
+  "scripts": {
+    "build": "rollup -c rollup.config.js",
+    "test": ""
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.21.5",
+    "@babel/core": "^7.26.0",
+    "@babel/eslint-parser": "^7.15.8",
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-react": "^7.24.1",
+    "@babel/preset-typescript": "^7.26.0",
+    "@rollup/plugin-babel": "6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.5",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-terser": "0.4.4",
+    "@rollup/plugin-typescript": "^11.1.5",
+    "@types/react": "^18.2.79",
+    "rollup": "^4.24.3",
+    "rollup-plugin-dts": "^6.1.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss-modules": "^2.1.1",
+    "rollup-plugin-preserve-directives": "^0.4.0",
+    "tslib": "^2.8.1"
+  },
+  "peerDependencies": {
+    "@ossy/router": "0.0.1-beta.1",
+    "react": "^19.0.0"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,35 @@
+import babel from '@rollup/plugin-babel'
+import { nodeResolve as resolveDependencies } from '@rollup/plugin-node-resolve'
+import resolveCommonJsDependencies from '@rollup/plugin-commonjs'
+import removeOwnPeerDependencies from 'rollup-plugin-peer-deps-external'
+import minifyJS from '@rollup/plugin-terser'
+import typescript from '@rollup/plugin-typescript'
+import preserveDirectives from "rollup-plugin-preserve-directives"
+
+export default [
+  {
+    input: 'src/router-react.tsx',
+    output: [
+      {
+        file: 'build/cjs/index.js',
+        format: 'cjs'
+      },
+      {
+        file: 'build/esm/index.js',
+        format: 'esm'
+      }
+    ],
+    plugins: [
+      resolveCommonJsDependencies(),
+      resolveDependencies(),
+      removeOwnPeerDependencies(),
+      babel({
+        exclude: ['**/node_modules/**/*'],
+        presets: ['@babel/preset-react']
+      }),
+      minifyJS(),
+      preserveDirectives(),
+      typescript({ tsconfig: "./tsconfig.json" }),
+    ]
+  },
+]

package/src/router-react.tsx

@@ -0,0 +1,253 @@
+'use client'
+import React, { createContext, useContext, useCallback } from 'react'
+import { MultiLanguagePage, Router as OssyRouter, RouterOptions, SingleLanguagePage, Page as _Page } from '@ossy-se/router'
+
+export const RouterContext = createContext({
+  pages: [] as RouterPage[],
+  defaultLanguage: undefined as string | undefined,
+  supportedLanguages: [] as string[]
+})
+
+export const useRouter = () => useContext(RouterContext)
+
+
+const appendSlash = (string: string) => string[string.length - 1] === '/'
+  ? string : `${string}/`
+
+const prependSlash = (string: string) => string[0] === '/'
+  ? string : `/${string}`
+
+const padWithSlash = (string = '') => appendSlash(prependSlash(string))
+
+export const Router = <T extends RouterPage>({
+  url,
+  pages = [],
+  defaultLanguage = undefined,
+  supportedLanguages = []
+}: RouterProps<T> ) => {
+  let href: string;
+  let pathname: string;
+  let hash: string;
+  let search: string;
+
+  if (url) {
+    const urlParts = url.match(/([^?#]*)(\?[^#]*)?(#.*)?/);
+    href = url;
+    pathname = urlParts?.[1] || '';
+    hash = urlParts?.[3] || '';
+    search = urlParts?.[2] || '';
+  } else if (typeof window !== 'undefined') {
+     href = window.location.href
+     pathname = window.location.pathname
+     hash = window.location.hash
+     search = hash?.includes('?') ? hash.split('?')[1] :  window.location.search
+  } else {
+    return <></>
+  }
+
+  const isMultiLanguage = supportedLanguages.length > 1 && !!defaultLanguage
+  const potentialLanguage = pathname.split('/')[1] || ''
+  const language = supportedLanguages.includes(potentialLanguage) ? potentialLanguage : defaultLanguage
+  const router = OssyRouter.of<T>({ pages, defaultLanguage, supportedLanguages })
+  const params = router.getParamsFromUrl(href)
+  const searchParams = new URLSearchParams(search)
+
+  let activePage: T = router.getPageByUrl(href) as T
+
+  if (!activePage) {
+    if (isMultiLanguage) {
+      if (pathname === '/') {
+        if (typeof window !== 'undefined') {
+          window.location.href = '/' + defaultLanguage
+        }
+      }
+    }
+
+    activePage = isMultiLanguage
+      ? pages.find(page => padWithSlash((page.path as Record<string, string>)[(language as string)]) === '*') as T
+      : pages.find(page => padWithSlash(page.path as string) === '*') as T
+  }
+
+  if (!activePage) {
+    console.warn('[RouterReact] No active page found for', pathname)
+    return <></>
+  }
+
+  /**
+   * @deprecated router do not support setting client side only search params.
+   * Use getHref with search params instead
+   * 
+   * Note: That migh not be true though because we have the back() and navigate() functions....
+   */
+  const setSearchParam = useCallback((name: string, value: any) => {
+    if (typeof window === 'undefined') return
+    window.history.pushState({}, '', `${pathname}?${searchParams.toString()}`)
+    const newSearchParams = new URLSearchParams(searchParams)
+    newSearchParams.set(name, value)
+    history.pushState({ }, "", `?${newSearchParams.toString()}`)
+  }, [searchParams])
+
+  /**
+   * takes either a string id or an object with id, params and language
+   *  - params.id - id of the page to get the href for
+   *  - param.language - language to use for the href, defaults to current language
+   *  - param.params - params to use for the href, defaults to current params
+   * @param {string|object}
+   * @returns {string}
+   */
+  const getHref = useCallback((getHrefRequest: string | GetHrefRequest | GetHrefOfActivePageByLanguageRequest) => {
+    // Can be supplied from params, if not will be taken from active page
+    let _pageId: string;
+    let _params: Record<string, string> = {}
+    let _language: string | undefined;
+    
+    // Can only be supplied from params, will not be taken from active page
+    let hash: string | undefined;
+    let search: string | undefined;
+
+
+    if (typeof getHrefRequest === 'string') {
+      _pageId = getHrefRequest
+      _params = params
+      _language = language
+    } else if (isGetHrefOfActivePageByLanguageRequest(getHrefRequest)) {
+      _pageId = activePage.id
+      _params = params
+      _language = getHrefRequest.language
+    } else {
+      _pageId = getHrefRequest?.id || activePage.id
+      _params = getHrefRequest?.params || params
+      _language = getHrefRequest?.language || language
+    }
+
+    if (_pageId.includes('#')) {
+      const [_id, _hash] = _pageId.split('#')
+      _pageId = _id
+      hash = _hash
+
+      if (hash.includes('?')) {
+        const [_hash, _search] = _pageId.split('?')
+        hash = _hash
+        search = _search
+      }
+
+    } else if (_pageId.includes('?')) {
+      const [_id, _search] = _pageId.split('?')
+      _pageId = _id
+      search = _search
+    }
+
+    let pathname = router.getPathname({
+      id: _pageId.replace('@', ''),
+      params: _params,
+      language: _language
+    })
+
+    if (hash) {
+      pathname = pathname + '#' + hash
+    }
+
+    if (search) {
+      pathname = pathname + '?' + search
+    }
+
+    return pathname
+  }, [router, language])
+
+  const navigate = useCallback((navigationRequest: string | '@back' | GetHrefRequest | GetHrefOfActivePageByLanguageRequest) => {
+    if (typeof window === 'undefined') return
+    if (!navigationRequest) return
+
+    if (navigationRequest === '@back') {
+      window.history.back()
+      return
+    }
+
+    const href = getHref(navigationRequest)
+    if (!href) return
+    window.location.href = href
+    
+  }, [getHref])
+
+  const back = useCallback(() => {
+    if (typeof window === 'undefined') return
+    window.history.back()
+  }, [])
+
+  const context = {
+    href,
+    pages,
+    language,
+    defaultLanguage,
+    supportedLanguages,
+    params,
+    searchParams: {
+      ...Array.from(searchParams.entries()).reduce((all, [key, value]) => ({ ...all, [key]: value }), {}),
+      // set: setSearchParam
+    },
+    navigate,
+    getHref,
+    back,
+  }
+
+  if (activePage?.redirect) {
+    navigate({ id: activePage.redirect })
+  }
+  
+  const renderedPage = activePage?.element || activePage?.render?.()
+
+  return (
+      <RouterContext.Provider value={context}>
+         { renderedPage }
+      </RouterContext.Provider>
+  )
+
+}
+
+export interface RouterProps<T extends RouterPage> extends RouterOptions<T> {
+  /** 
+   * Render page associated with the given url.
+   * Used to render the page on server side where window.location is not available
+   * @type string
+   * @default undefined
+  */
+  url?: string;
+}
+
+export type RouterPage = SingleLanguageRouterPage | MultiLanguageRouterPage
+
+export interface SingleLanguageRouterPage extends SingleLanguagePage {
+  /** If provided the page will redirect to the given page id
+   * @default undefined
+   * @type {string}
+   * @example { redirect: '@home'}
+  */
+  redirect?: string;
+  element?: React.ReactNode;
+  render: () => React.ReactNode
+}
+
+export interface MultiLanguageRouterPage extends MultiLanguagePage {
+  /** If provided the page will redirect to the given page id
+   * @default undefined
+   * @type {string}
+   * @example { redirect: '@home'}
+  */
+  redirect?: string;
+  element?: React.ReactNode;
+  render: () => React.ReactNode
+}
+
+export interface GetHrefRequest {
+  id?: string;
+  language?: string;
+  params?: Record<string, string>;
+}
+
+export interface GetHrefOfActivePageByLanguageRequest {
+  language: string;
+}
+
+function isGetHrefOfActivePageByLanguageRequest(request: any): request is GetHrefOfActivePageByLanguageRequest {
+  return !request.id && request.language !== undefined
+}

package/tsconfig.json

@@ -0,0 +1,27 @@
+{
+    "compilerOptions": {
+      "target": "es5",
+      "lib": ["dom", "dom.iterable", "esnext"],
+      "allowJs": true,
+      "skipLibCheck": true,
+      "strict": true,
+      "forceConsistentCasingInFileNames": true,
+      "esModuleInterop": true,
+      "module": "esnext",
+      "moduleResolution": "node",
+      "resolveJsonModule": true,
+      "isolatedModules": true,
+      "jsx": "react",
+      "incremental": false,
+      "declaration": true,
+      "declarationDir": "./build/esm"
+    },
+    "exclude": [
+      "build",
+      "node_modules",
+      "src/**/*.test.tsx",
+      "src/**/*.stories.tsx",
+      "rollup.config.js",
+      "src/data.mock.ts"
+    ]
+  }