DEV Community: Sheikh Ahnaf Hasan

I Built an MCP Server to Search Documentation from Claude (So You Don't Have to Web Search)

Sheikh Ahnaf Hasan — Thu, 05 Mar 2026 15:05:28 +0000

Ever been coding with Claude and needed to check the docs for a library? You either:

Open a browser, search, scan through pages
Ask Claude, who might hallucinate outdated info
Copy-paste docs into the chat (token explosion)

I got tired of this loop. So I built DocMCP – an MCP server that crawls documentation sites, indexes them locally, and lets Claude search them directly.

What is MCP?

Model Context Protocol (MCP) is Anthropic's open standard for connecting AI assistants to external tools and data. Think of it as "plugins for Claude" – but standardized and secure.

The Problem

Claude's knowledge has a cutoff date. When you're working with:

A new library version
Recently updated API docs
Framework-specific patterns

...Claude might not have the latest info. Web search helps, but it's slow and breaks your flow.

The Solution

DocMCP lets you:

# One-time setup
npx @pieeee/docmcp init

# Index any docs site
npx @pieeee/docmcp add https://tailwindcss.com/docs
npx @pieeee/docmcp add https://react.dev
npx @pieeee/docmcp add https://docs.astro.build

Then in Claude Code, Cursor, or Claude Desktop:

"How do I center a div in Tailwind?"

Claude searches your local indexed docs and gives you accurate, up-to-date answers.

How It Works

┌─────────────┐     ┌─────────────┐     ┌─────────────┐
│  Crawl Docs │ ──► │  Chunk +    │ ──► │   SQLite    │
│  (sitemap)  │     │  Embed      │     │  FTS5 + Vec │
└─────────────┘     └─────────────┘     └─────────────┘
                                               │
                                               ▼
┌─────────────┐     ┌─────────────┐     ┌─────────────┐
│   Claude    │ ◄── │  MCP Server │ ◄── │   Hybrid    │
│   Answer    │     │  (stdio)    │     │   Search    │
└─────────────┘     └─────────────┘     └─────────────┘

Crawl: Follow sitemap or recursive links
Parse: Clean HTML → Markdown, preserve code blocks
Chunk: Split at headings (~512 tokens each)
Index: BM25 (keyword) + vector embeddings (semantic)
Search: Hybrid ranking with Reciprocal Rank Fusion

Why Hybrid Search?

Pure keyword search fails on:

"how to make elements wrap to next line"

(Answer: flex-wrap – but "wrap" ≠ "flex-wrap")

Pure vector search fails on:

"useState hook"

(Exact API names need exact matches)

DocMCP combines both. BM25 handles exact terms, vectors handle semantics. Results are merged using RRF (Reciprocal Rank Fusion).

Setup in 2 Minutes

1. Install

npm install -g @pieeee/docmcp

2. Initialize

docmcp init

Choose your embedding provider:

Anthropic (Voyage) – recommended for Claude users
OpenAI – if you have an OpenAI key
BM25 only – no API key needed, keyword search only

3. Index Some Docs

docmcp add https://tailwindcss.com/docs
docmcp add https://nextjs.org/docs

4. Connect to Claude

Claude Code:

claude mcp add docmcp -- docmcp serve

Cursor (~/.cursor/mcp.json):

{
  "mcpServers": {
    "docmcp": {
      "command": "docmcp",
      "args": ["serve"]
    }
  }
}

Claude Desktop (claude_desktop_config.json):

{
  "mcpServers": {
    "docmcp": {
      "command": "docmcp",
      "args": ["serve"]
    }
  }
}

Real Example

After indexing Tailwind docs:

Me: "How do I add a gradient background in Tailwind?"

Claude (using search_docs):

Based on the Tailwind documentation, you can use the bg-gradient-to-{direction} utilities:
<div class="bg-gradient-to-r from-cyan-500 to-blue-500">
  
</div>
Directions: t (top), r (right), b (bottom), l (left), tr, br, etc.

Accurate. Up-to-date. No hallucination.

What's Under the Hood

SQLite with FTS5 for BM25 full-text search
sqlite-vec for vector similarity search
Crawlee for respectful, sitemap-aware crawling
Turndown for HTML → Markdown conversion
Written in TypeScript, runs on Node.js 20+

All data stays local in ~/.docmcp/. No cloud dependencies (except embedding API calls if you use one).

Embedding Provider Comparison

Provider	API Key	Best For
Anthropic (Voyage)	`ANTHROPIC_API_KEY`	Claude users, high quality
OpenAI	`OPENAI_API_KEY`	Already have OpenAI key
BM25 only	None	Zero setup, privacy-first

BM25-only mode is surprisingly good for technical docs where you're often searching exact function names.

Roadmap

[ ] Local embeddings (ONNX, no API needed)
[ ] add_docs MCP tool (index from Claude directly)
[ ] Scheduled re-crawls for freshness
[ ] VS Code extension

Try It Out

npm install -g @pieeee/docmcp
docmcp init
docmcp add https://docs.your-favorite-library.com

GitHub: github.com/pieeee/docmcp

I Built an MCP Server to Search Documentation from Claude (So You Don't Have to Web Search)

Sheikh Ahnaf Hasan — Thu, 05 Mar 2026 15:05:28 +0000

Ever been coding with Claude and needed to check the docs for a library? You either:

Open a browser, search, scan through pages
Ask Claude, who might hallucinate outdated info
Copy-paste docs into the chat (token explosion)

I got tired of this loop. So I built DocMCP – an MCP server that crawls documentation sites, indexes them locally, and lets Claude search them directly.

What is MCP?

Model Context Protocol (MCP) is Anthropic's open standard for connecting AI assistants to external tools and data. Think of it as "plugins for Claude" – but standardized and secure.

The Problem

Claude's knowledge has a cutoff date. When you're working with:

A new library version
Recently updated API docs
Framework-specific patterns

...Claude might not have the latest info. Web search helps, but it's slow and breaks your flow.

The Solution

DocMCP lets you:

# One-time setup
npx @pieeee/docmcp init

# Index any docs site
npx @pieeee/docmcp add https://tailwindcss.com/docs
npx @pieeee/docmcp add https://react.dev
npx @pieeee/docmcp add https://docs.astro.build

Then in Claude Code, Cursor, or Claude Desktop:

"How do I center a div in Tailwind?"

Claude searches your local indexed docs and gives you accurate, up-to-date answers.

How It Works

┌─────────────┐     ┌─────────────┐     ┌─────────────┐
│  Crawl Docs │ ──► │  Chunk +    │ ──► │   SQLite    │
│  (sitemap)  │     │  Embed      │     │  FTS5 + Vec │
└─────────────┘     └─────────────┘     └─────────────┘
                                               │
                                               ▼
┌─────────────┐     ┌─────────────┐     ┌─────────────┐
│   Claude    │ ◄── │  MCP Server │ ◄── │   Hybrid    │
│   Answer    │     │  (stdio)    │     │   Search    │
└─────────────┘     └─────────────┘     └─────────────┘

Crawl: Follow sitemap or recursive links
Parse: Clean HTML → Markdown, preserve code blocks
Chunk: Split at headings (~512 tokens each)
Index: BM25 (keyword) + vector embeddings (semantic)
Search: Hybrid ranking with Reciprocal Rank Fusion

Why Hybrid Search?

Pure keyword search fails on:

"how to make elements wrap to next line"

(Answer: flex-wrap – but "wrap" ≠ "flex-wrap")

Pure vector search fails on:

"useState hook"

(Exact API names need exact matches)

DocMCP combines both. BM25 handles exact terms, vectors handle semantics. Results are merged using RRF (Reciprocal Rank Fusion).

Setup in 2 Minutes

1. Install

npm install -g @pieeee/docmcp

2. Initialize

docmcp init

Choose your embedding provider:

Anthropic (Voyage) – recommended for Claude users
OpenAI – if you have an OpenAI key
BM25 only – no API key needed, keyword search only

3. Index Some Docs

docmcp add https://tailwindcss.com/docs
docmcp add https://nextjs.org/docs

4. Connect to Claude

Claude Code:

claude mcp add docmcp -- docmcp serve

Cursor (~/.cursor/mcp.json):

{
  "mcpServers": {
    "docmcp": {
      "command": "docmcp",
      "args": ["serve"]
    }
  }
}

Claude Desktop (claude_desktop_config.json):

{
  "mcpServers": {
    "docmcp": {
      "command": "docmcp",
      "args": ["serve"]
    }
  }
}

Real Example

After indexing Tailwind docs:

Me: "How do I add a gradient background in Tailwind?"

Claude (using search_docs):

Based on the Tailwind documentation, you can use the bg-gradient-to-{direction} utilities:
<div class="bg-gradient-to-r from-cyan-500 to-blue-500">
  
</div>
Directions: t (top), r (right), b (bottom), l (left), tr, br, etc.

Accurate. Up-to-date. No hallucination.

What's Under the Hood

SQLite with FTS5 for BM25 full-text search
sqlite-vec for vector similarity search
Crawlee for respectful, sitemap-aware crawling
Turndown for HTML → Markdown conversion
Written in TypeScript, runs on Node.js 20+

All data stays local in ~/.docmcp/. No cloud dependencies (except embedding API calls if you use one).

Embedding Provider Comparison

Provider	API Key	Best For
Anthropic (Voyage)	`ANTHROPIC_API_KEY`	Claude users, high quality
OpenAI	`OPENAI_API_KEY`	Already have OpenAI key
BM25 only	None	Zero setup, privacy-first

BM25-only mode is surprisingly good for technical docs where you're often searching exact function names.

Roadmap

[ ] Local embeddings (ONNX, no API needed)
[ ] add_docs MCP tool (index from Claude directly)
[ ] Scheduled re-crawls for freshness
[ ] VS Code extension

Try It Out

npm install -g @pieeee/docmcp
docmcp init
docmcp add https://docs.your-favorite-library.com

GitHub: github.com/pieeee/docmcp

Automatic SSL Solution for SaaS/MicroSaaS Applications with Caddy, Node.js and Docker

Sheikh Ahnaf Hasan — Thu, 29 Feb 2024 01:30:02 +0000

Hey there! Over the past couple of years, I've had my hands on quite a few SaaS applications. One thing a lot of them have in common is this nifty feature that lets users plug in their own custom domains. Now, getting a domain up and running is pretty straightforward—you just need to give your users the server IP address or a CNAME value. But here's the catch: offering free and automatic SSL? That can get a bit tricky.

At first, I gave bash scripting a go to generate SSL with Let's Encrypt and used good old Nginx to create and renew SSL certificates. But let me tell you, it was a bit of a headache to maintain. I also tried out a Cloudflare feature, SSL for SaaS, but it asked users to add a bunch of DNS records, which wasn't really what I was looking for. What I wanted was a solution where users only had to add a CNAME.

So I dug a little deeper and came across this gem: Caddy. Caddy is this fantastic, extensible, cross-platform, open-source web server that's written in Go. The best part? It comes with automatic HTTPS. It basically condenses all the work our scripts and manual maintenance were doing into just 4-5 lines of config. So, stick around and I'll walk you through how to set up an automatic SSL solution with Caddy, Docker and a Node.js server.

Let's Get Our Application Up and Running!

First things first, we're going to set up a friendly little express application that greets us with a cheery "Hello World" page. We'll need a couple of APIs for this.

/ - This one's our main star! It serves the "Hello World" page.
/tls-check - Our buddy Caddy uses this to make sure it's dealing with a valid domain. We'll chat more about this later on in our journey.

Create a new directory named caddy-saas-node-application and then change your current directory to this new one. While we'll be using pnpm, you can also use yarn or npm to install packages.

To install express, run the command pnpm add express.

Next, update the package.json file to include a start script:

{
  "name": "caddy-saas-node-application",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node index.js"
  },
  "keywords": [],
  "author": "pieeee",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.2"
  }
}

Create a main.js file, which will contain the code for our Express application. Add the following code:

/**
 * Express application for the Caddy SaaS Node Application.
 * @module index
 */

const express = require("express");

const app = express();

app.use(express.json());
app.use(express.urlencoded({ extended: true }));

/**
 * Route handler for the root URL.
 * @name GET /
 * @function
 * @param {Object} req - Express request object.
 * @param {Object} res - Express response object.
 */
app.get("/", (_, res) => {
  res.send("Hello World");
});

/**
 * Array of whitelisted domains.
 * @type {string[]}
 */
const whitelistedDomains = [];

/**
 * Handles TLS (Transport Layer Security) check for a given domain.
 * This endpoint checks if the provided domain is whitelisted for TLS connections.
 * It is accessed via a GET request and expects a domain name as a query parameter.
 *
 * @route GET /tls-check
 * @param {Object} req - The request object from Express.js.
 * @param {Object} req.query - The query string object.
 * @param {string} req.query.domain - The domain name to check for TLS whitelisting.
 * @param {Object} res - The response object from Express.js.
 * @returns {Object} The response object with a status code and a JSON body.
 *          If the domain query parameter is missing, it returns a 400 status code with an error message.
 *          If the domain is found in the whitelist, it returns a 200 status code with a success message.
 *          If the domain is not in the whitelist, it returns a 403 status code with an error message.
 */
app.get("/tls-check", (req, res) => {
  const domain = req.query.domain;

  if (!domain) {
    return res.status(400).json({
      error: "Domain is required",
    });
  }

  if (whitelistedDomains.includes(domain)) {
    return res.status(200).json({
      message: "Domain is whitelisted",
    });
  }

  return res.status(403).json({
    error: "Domain is not whitelisted",
  });
});

/**
 * Start the server and listen on port 8080.
 * @name listen
 * @function
 * @param {number} port - The port number to listen on.
 * @param {Function} callback - The callback function to execute when the server starts listening.
 */
app.listen(8080, () => {
  console.log("Server is running on port :8080\nhttp://localhost:8080/");
});

This API endpoint /tls-check validates the TLS whitelisting status of a domain. It accepts a GET request with a domain query parameter. If the domain parameter is missing, it returns HTTP 400 with an error message. If the domain is present in the whitelistedDomains array, it responds with HTTP 200, indicating the domain is whitelisted. Otherwise, it returns HTTP 403, stating the domain is not whitelisted.

The whitelistedDomains contains the domain names of allowed users. In a production environment, you might validate these from your database. Now that our app is ready, lets move on to the next part.

Docker and docker-compose setup

Create a Dockerfile at the root of your project directory and add the following configurations to keep your Express application container running.

# Use a node base image
FROM node:18

# Create app directory in container
WORKDIR /usr/src/app

# Install pnpm
RUN npm install -g pnpm

# Copy package.json and pnpm-lock.yaml files
COPY package.json pnpm-lock.yaml* ./

# Install app dependencies using pnpm
RUN pnpm install --frozen-lockfile

# Bundle app source inside Docker image
COPY . .

RUN pnpm run build

EXPOSE 8080

CMD ["pnpm", "start"]

Now, create a docker-compose.yml file and add the following configuration. We'll use docker-compose to manage both the app container and the caddy container in one location.

version: "3"
services:
    app:
        build: .
        networks:
            - webnet
    caddy:
        image: caddy:2
        ports:
            - "80:80"
            - "443:443"
        volumes:
            - ./Caddyfile:/etc/caddy/Caddyfile
            - caddy_data:/data
            - caddy_config:/config
        networks:
            - webnet
        depends_on:
            - app

networks:
    webnet:

volumes:
    caddy_data:
    caddy_config:

The Docker Compose configuration defines two services, app and caddy, within a custom network named webnet. The app service is built from a Dockerfile in the current directory, indicating the express application. The caddy service uses the official Caddy server image version 2, exposing ports 80 and 443 for HTTP and HTTPS traffic, respectively. It mounts a Caddyfile for configuration, alongside named volumes caddy_data and caddy_config for persisting data and Caddy configuration. The caddy service is configured to depend on the app service, ensuring app is started first. Both services are connected via the webnet network, facilitating inter-service communication.

Now let’s create Caddyfile at the root of the project directory and add the following configs:

{
    on_demand_tls {
        ask http://app:8080/tls-check
        burst 5
        interval 2m
    }
}

https:// {
    tls {
        on_demand
    }

    reverse_proxy app:8080
}

This little configuration does all the work. When a request from a new domain arrives, the on_demand_tls block triggers our /tls-check API to validate the domain. If the domain is validated, Caddy will generate an SSL certificate and assign it. The generation only occurs on the first request. By default, the generated SSLs expire in three months. After that, a new SSL is generated and assigned on the first request. The "burst 5" and "interval 2m" specify that a maximum of five certificates can be generated every two minutes. You can read more here: Caddy on-demand automation

The https:// block enables the reverse proxy to our application. You can learn more here: Caddy reverse proxy

That's it! All you need to do now is deploy your application on a virtual machine, install Docker, build the app, and enjoy the magic of Caddy.

Useful Resources

Essential React Custom Hooks

Sheikh Ahnaf Hasan — Tue, 20 Feb 2024 10:10:43 +0000

Hello there! Having spent several years developing React applications, I've noticed a handful of functionalities that pop up again and again. They're not just limited to a single project, but are versatile enough to be used in various contexts. Recognizing and transforming these recurring functionalities into custom hooks can save us a ton of time and effort. Plus, these custom hooks are super adaptable and can be easily integrated into almost any project, no matter how big or small, or how simple or complex.

Let's dig a little deeper into these useful custom hooks and chat about how they can be practically applied:

useDebounce: This handy hook lets us delay the processing of a function for a set amount of time. It's a lifesaver when we want to limit how often a function can trigger or run.
useLocalStorageState: With this hook, we can easily save, retrieve, and play with data in the browser's local storage. It's a gem for keeping the state consistent across sessions or tabs.
useWindowScroll: This nifty custom hook helps keep track of the window's scroll position. It's great for a range of uses like lazy loading images, infinite scrolling, or revealing/hiding elements based on the scroll position.

useDebounce

import { useEffect, useState } from "react";

export function useDebounce({
  value,
  delay,
}: {
  value: string;
  delay: number;
}) {
  // State and setters for debounced value
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(
    () => {
      // Update debounced value after delay
      const handler = setTimeout(() => {
        setDebouncedValue(value);
      }, delay);

      // Cancel the timeout if value changes (also on delay change or unmount)
      // This is how we prevent debounced value from updating if value is changed ...
      // .. within the delay period. Timeout gets cleared and restarted.
      return () => {
        clearTimeout(handler);
      };
    },
    [value, delay] // Only re-call effect if value or delay changes
  );

  return debouncedValue;
}

The useDebounce is a custom React hook designed to delay the update of a state value until after a specified delay. This is useful for reducing the number of updates that occur in response to rapid or frequent changes to a value, such as user input in a text field. Let's break down how it works and provide an example of its usage.

How `useDebounce` Works:

Input Parameters: It takes an object with two properties:
- value: The current value that you want to debounce.
- delay: The amount of time (in milliseconds) you want to wait after the last change before updating the debounced value.
State: It initializes a state variable debouncedValue with the initial value passed to the hook.
Effect Hook: It uses the useEffect hook to perform side effects:
- Set Timeout: Inside useEffect, it sets a timeout that waits for the specified delay before updating debouncedValue to the current value.
- Cleanup Function: Returns a cleanup function that clears the timeout if the value or delay changes before the timeout completes. This prevents the debounced value from updating if the input value changes again within the delay period.
Return: It returns the debouncedValue. This value reflects the latest value passed to the hook, but only after the specified delay has elapsed without any further changes to the value.

Example Usage:

Imagine you have a search input field where you want to fetch search results from an API, but you want to minimize the number of API calls by only fetching the results once the user has stopped typing for 500 milliseconds.

import React, { useState } from 'react';
import { useDebounce } from './useDebounce';

function SearchComponent() {
  const [inputValue, setInputValue] = useState('');
  const debouncedSearchTerm = useDebounce({ value: inputValue, delay: 500 });

  // Effect for API call
  useEffect(() => {
    if (debouncedSearchTerm) {
      // Function to fetch search results
      console.log(`Fetching search results for: ${debouncedSearchTerm}`);
      // Here you would fetch your search results using debouncedSearchTerm
    }
  }, [debouncedSearchTerm]); // This effect runs only when debouncedSearchTerm changes

  return (
    <input
      type="text"
      value={inputValue}
      onChange={(e) => setInputValue(e.target.value)}
      placeholder="Search..."
    />
  );
}

In this example:

The user types into the search input field.
The inputValue state updates with each keystroke, but the debouncedSearchTerm only updates after the user has stopped typing for 500 milliseconds.
The useEffect hook listening to debouncedSearchTerm then triggers, potentially fetching search results based on the debounced term.

This approach ensures that your application performs the search operation efficiently, reducing unnecessary API calls or processing when the user is typing fast.

useLocalStorageState

import { useState, useEffect, useMemo } from "react";

// Define a custom hook that syncs state with local storage
export const useLocalStorageState = <T>(
  key: string,
  initialValue: T
): [T, React.Dispatch<React.SetStateAction<T>>] => {
  // Get the initial value from local storage, if available
  const storedValue =
    typeof window !== "undefined" ? localStorage.getItem(key) : null;

  const initial = useMemo(() => {
    try {
      return storedValue ? JSON.parse(storedValue) : initialValue;
    } catch (error) {}
  }, [initialValue, storedValue]);

  // Create the state using useState
  const [state, setState] = useState<T>(initial);

  // Update local storage whenever the state changes
  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(state));
  }, [key, state]);

  return [state, setState];
};

// Path: src/lib/hooks/use-sessionstorage-state.hook.ts
export const useSessionStorageState = <T>(
  key: string,
  initialValue: T
): [T, React.Dispatch<React.SetStateAction<T>>] => {
  const storedValue =
    typeof window !== "undefined" ? sessionStorage.getItem(key) : null;
  const initial = useMemo(() => {
    try {
      return storedValue ? JSON.parse(storedValue) : initialValue;
    } catch (error) {}
  }, [initialValue, storedValue]);
  const [state, setState] = useState<T>(initial);
  useEffect(() => {
    sessionStorage.setItem(key, JSON.stringify(state));
  }, [key, state]);
  return [state, setState];
};

The useLocalStorageState function is a custom React hook designed to synchronize a component's state with the local storage of the browser. This allows the state to persist across browser sessions. Here's a breakdown of how it works and an example of how to use it.

How `useLocalStorageState` Works:

Generics: It uses TypeScript generics (<T>) to allow for flexibility in the type of value it can handle (e.g., string, number, object).
Input Parameters:
- key: A unique string that identifies the item in local storage.
- initialValue: The initial value for the state if no value is found in local storage.
Retrieving Initial Value:
- Checks if the window object is available to ensure code doesn't break during server-side rendering (e.g., in Next.js applications).
- Attempts to get the stored value from local storage using the provided key.
- Uses useMemo to parse the stored JSON value only once or fallback to the initialValue if parsing fails or if no value is found.
State Management:
- Initializes the state with either the parsed local storage value or the provided initial value.
Effect for Syncing with Local Storage:
- Utilizes useEffect to update the local storage item whenever the state changes. It serializes the state to a JSON string and stores it under the provided key.
Return Values:
- Returns a tuple containing the current state and a setter function (setState), similar to the return value of the useState hook.

Example Usage:

Let's say you have a form input where you want to persist the user's input even if they refresh the page or close and reopen the browser.

import React from 'react';
import { useLocalStorageState } from './useLocalStorageState';

function FormComponent() {
  const [name, setName] = useLocalStorageState('userName', '');

  return (
    <div>
      <label htmlFor="name">Name:</label>
      <input
        id="name"
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <p>Hello, {name}!</p>
    </div>
  );
}

In this example:

The useLocalStorageState hook is used to bind the input field's value to a piece of state that is synchronized with local storage. The key is 'userName'.
If the user enters their name and then refreshes the page, the input field will still display their name because it was saved to local storage.
The state is initially set to the value retrieved from local storage if it exists; otherwise, it falls back to an empty string ('').
Any changes to the input field update both the state and the corresponding item in local storage, ensuring the two are always in sync.

This approach enhances the user experience by making the UI state persistent across sessions without requiring any backend infrastructure to store user data.

useWindowScroll

import { useEffect, useState } from "react";

interface WindowScrollState {
  x: number;
  y: number;
}

export const useWindowScroll = (): WindowScrollState => {
  const [scrollPosition, setScrollPosition] = useState<WindowScrollState>({
    x: typeof window !== "undefined" ? window.scrollX : 0,
    y: typeof window !== "undefined" ? window.scrollY : 0,
  });

  useEffect(() => {
    const handleScroll = () => {
      setScrollPosition({
        x: typeof window !== "undefined" ? window.scrollX : 0,
        y: typeof window !== "undefined" ? window.scrollY : 0,
      });
    };

    if (typeof window !== "undefined") {
      // Attach the scroll event listener when the component mounts
      window.addEventListener("scroll", handleScroll);

      // Remove the scroll event listener when the component unmounts
      return () => {
        window.removeEventListener("scroll", handleScroll);
      };
    }
  }, []);

  return scrollPosition;
};

The useWindowScroll function is a custom React hook designed to track and provide the window's scroll position. It encapsulates the logic for listening to scroll events and updating the state accordingly to reflect the current scroll position of the window. This can be particularly useful for features like showing or hiding elements based on scroll position, implementing scroll-based animations, or simply monitoring user scroll behavior. Let's break down its workings and illustrate its usage with an example.

How `useWindowScroll` Works:

State Initialization: Initializes a state variable scrollPosition with an object that contains two properties:
- x: Represents the horizontal scroll position. It's set to window.scrollX if the window object is available, otherwise to 0.
- y: Represents the vertical scroll position. It's set to window.scrollY if the window object is available, otherwise to 0.
Effect Hook: Uses useEffect to set up side effects:
- Scroll Event Listener: Defines a function handleScroll that updates scrollPosition based on the current scroll position of the window.
- Event Listener Registration: If the window object is available, it adds handleScroll as an event listener to the window's scroll event. This ensures the scroll position is updated whenever the user scrolls.
- Cleanup: Returns a cleanup function that removes the scroll event listener when the component using this hook unmounts, preventing potential memory leaks.
Return Value: Returns the current scrollPosition state, allowing components to access the latest scroll position as { x, y }.

Example Usage:

Consider a scenario where you want to display a "Back to Top" button only when the user has scrolled down a significant amount.

import React from 'react';
import { useWindowScroll } from './useWindowScroll';

function BackToTopButton() {
  const { y } = useWindowScroll();

  const handleBackToTop = () => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  return (
    <button
      style={{
        position: 'fixed',
        bottom: '20px',
        right: '20px',
        display: y > 200 ? 'block' : 'none',
      }}
      onClick={handleBackToTop}
    >
      Back to Top
    </button>
  );
}

In this example:

The useWindowScroll hook provides the vertical scroll position (y) of the window.
The "Back to Top" button is conditionally rendered based on the scroll position. It appears only when the user has scrolled down more than 200 pixels.
Clicking the button scrolls the window back to the top smoothly.

This approach enhances user navigation on long pages by providing an easily accessible means to return to the top of the page, improving the overall user experience.

How do I enable custom domain feature in a application?

Sheikh Ahnaf Hasan — Fri, 29 Apr 2022 06:04:06 +0000

I am developing an web application which has a feature to enable the users to use their own domain name for pointing to a route. The application is top to bottom written in next.js.

DEV Community: Sheikh Ahnaf Hasan

I Built an MCP Server to Search Documentation from Claude (So You Don't Have to Web Search)

What is MCP?

The Problem

The Solution

How It Works

Why Hybrid Search?

Setup in 2 Minutes

1. Install

2. Initialize

3. Index Some Docs

4. Connect to Claude

Real Example

What's Under the Hood

Embedding Provider Comparison

Roadmap

Try It Out

I Built an MCP Server to Search Documentation from Claude (So You Don't Have to Web Search)

What is MCP?

The Problem

The Solution

How It Works

Why Hybrid Search?

Setup in 2 Minutes

1. Install

2. Initialize

3. Index Some Docs

4. Connect to Claude

Real Example

What's Under the Hood

Embedding Provider Comparison

Roadmap

Try It Out

Automatic SSL Solution for SaaS/MicroSaaS Applications with Caddy, Node.js and Docker

Let's Get Our Application Up and Running!

Docker and docker-compose setup

Useful Resources

Essential React Custom Hooks

useDebounce

How useDebounce Works:

Example Usage:

useLocalStorageState

How useLocalStorageState Works:

Example Usage:

useWindowScroll

How useWindowScroll Works:

Example Usage:

How do I enable custom domain feature in a application?

discussion

How `useDebounce` Works:

How `useLocalStorageState` Works:

How `useWindowScroll` Works: