From c71072fefeab3542e329565413342377d3256fdb Mon Sep 17 00:00:00 2001
From: Nico Prananta <311343+nicnocquee@users.noreply.github.com>
Date: Thu, 20 Jun 2024 10:05:34 +0200
Subject: [PATCH] update readme

---
 README.md | 86 ++++++++++++++++++++++++++++++++++++++++++-------------
 1 file changed, 66 insertions(+), 20 deletions(-)

diff --git a/README.md b/README.md
index f12bfcc..93d3949 100644
--- a/README.md
+++ b/README.md
@@ -1,12 +1,45 @@
-# @hyperjumptech/react-next-pathname
+# About
 
 ![Minified size](https://img.shields.io/bundlephobia/min/@hyperjumptech/react-next-pathname) ![Test coverage](https://img.shields.io/codecov/c/github/hyperjumptech/react-next-pathname) ![Monthly download](https://img.shields.io/npm/dm/@hyperjumptech/react-next-pathname)
 
-`@hyperjumptech/react-next-pathname` tracks the next pathname immediately when a link is clicked, without waiting for the new page to load. At Hyperjump, we use this to instantly update the sidebar or navigation, making the application feel smooth and fast.
+This is a helper tool you can use in your React application to make it feel faster and smoother when navigating between pages. Say you have a sidebar that contains links to different pages. When you click a link, the component that displays the link will show that it's currently active—usually like this:
+
+```tsx
+const isPathActive = (pathname: string) => {
+  return pathname === window.location.pathname;
+};
+
+const Sidebar = () => {
+  return (
+    <div>
+      {[
+        { pathname: "/", title: "Home" },
+        { pathname: "/about", title: "About" },
+        {
+          pathname: "/contact",
+          title: "Contact",
+        },
+      ].map(({ pathname, title }) => (
+        <a
+          key={pathname}
+          href={pathname}
+          className={`${ispathActive(pathname) ? "active" : ""}`}
+        >
+          {title}
+        </a>
+      ))}
+    </div>
+  );
+};
+```
+
+The problem is that when the clicked page is slow to load due to bad network conditions or slow server response, the clicked link will not immediately show that it's active. This is because the `window.location.pathname` is not updated until the page has fully loaded. Users might think that nothing is happening when they click the link, and they will be confused.
+
+This library helps you solve this problem by allowing you to get the next pathname immediately when a link is clicked, without waiting for the new page to load.
 
 ## Installation
 
-To install `@hyperjumptech/react-next-pathname`, run the following command:
+To install `@hyperjumptech/react-next-pathname`, run one of the following commands:
 
 **NPM**
 
@@ -26,9 +59,15 @@ yarn add @hyperjumptech/react-next-pathname
 pnpm add @hyperjumptech/react-next-pathname
 ```
 
+**bun**
+
+```
+bun add @hyperjumptech/react-next-pathname
+```
+
 ## Usage
 
-First, wrap your application with the NextPathnameProvider to provide the context to all components:
+First, wrap your application with the `NextPathnameProvider` to provide the context to all components:
 
 ```tsx
 import React from "react";
@@ -41,31 +80,38 @@ function App({ children }) {
 export default App;
 ```
 
-Then, use the useNextPathname hook to access the next pathname in your components:
+Then, use the `useNextPathname` hook to access the next pathname in your component. Let's take the previous example and use `@hyperjumptech/react-next-pathname`:
 
 ```tsx
-import { useEffect } from "react";
 import { useNextPathname } from "@hyperjumptech/react-next-pathname";
 
-function MyComponent() {
-  const { nextPathname } = useNextPathname();
-
-  useEffect(() => {
-    if (nextPathname) {
-      console.log("Next pathname:", nextPathname);
-      // Perform any side effects or conditional navigation logic here
-    }
-  }, [nextPathname]);
+const isPathActive = (pathname: string, nextPathname: string) => {
+  return pathname === nextPathname;
+};
 
+const Sidebar = () => {
+  const { nextPathname } = useNextPathname();
   return (
     <div>
-      <p>Next pathname: {nextPathname}</p>
-      <a href="/another-page">Go to another page</a>
+      {[
+        { pathname: "/", title: "Home" },
+        { pathname: "/about", title: "About" },
+        {
+          pathname: "/contact",
+          title: "Contact",
+        },
+      ].map(({ pathname, title }) => (
+        <a
+          key={pathname}
+          href={pathname}
+          className={`${ispathActive(pathname, nextPathname) ? "active" : ""}`}
+        >
+          {title}
+        </a>
+      ))}
     </div>
   );
-}
-
-export default MyComponent;
+};
 ```
 
 ## License