Expose listener function as new API

README.md

@@ -142,6 +142,24 @@ in the `Link` component.
 </script>
 ```
 
+#### `listen`
+
+A function that allows you to listen to path changes made from `navigate`, `Link` and browser back button.
+
+The argument supplied must be a function that receives a Location object. Use the returned function to unsubscribe the listener.
+
+This function is meant to be used outside a Svelte component. The alternative function is `useLocation`, `useRouter` and `useHistory` where it uses Svelte context to retrieve location, router or history object.
+
+```js
+import { listen as addListener } from 'svelte-routing';
+
+function init() {
+    addListener(({ location }) => {
+        console.log(location.pathname);
+    })
+}
+```
+
 #### `link`
 
 An action used on anchor tags to navigate around the application. You can add an

src/history.js

@@ -95,6 +95,6 @@ const createMemorySource = (initialPathname = "/") => {
 const globalHistory = createHistory(
     canUseDOM() ? window : createMemorySource()
 );
-const { navigate } = globalHistory;
+const { navigate, listen } = globalHistory;
 
-export { globalHistory, navigate, createHistory, createMemorySource };
+export { globalHistory, navigate, listen, createHistory, createMemorySource };

src/index.js

@@ -3,4 +3,4 @@ export { default as Route } from "./Route.svelte";
 export { default as Router } from "./Router.svelte";
 export { link, links } from "./actions.js";
 export * from "./contexts.js";
-export { navigate } from "./history.js";
+export { navigate, listen } from "./history.js";

types/functions.d.ts

@@ -13,3 +13,13 @@ export const navigate: (
         blurActiveElement?: boolean;
     }
 ) => void;
+
+export const listen: (
+    listener: (data: {
+        location: Location & {
+            state: any,
+            key: string
+        },
+        action: "POP"|"PUSH"
+    }) => void
+) => () => void;

types/index.d.ts

@@ -5,4 +5,4 @@ export { Route } from "./Route";
 export { Router } from "./Router";
 export { link, links } from "./actions";
 export * from "./contexts";
-export { navigate } from "./functions";
+export { navigate, listen } from "./functions";