DEV Community: Rashed Iqbal

Switch Claude Code providers in seconds with claude-provider (Plugin + CLI)

Rashed Iqbal — Mon, 02 Feb 2026 22:49:22 +0000

If you use Claude Code in your terminal but you sometimes need a different provider (or a different key/model), you’ve probably done this dance:

open ~/.claude/settings.json
change base URL / key / model
pray you don’t break something 😅

claude-provider fixes that by giving you profiles + one-command switching — and you can use it in two ways:

as a Claude Code plugin (slash commands inside Claude Code)
as a CLI tool (interactive menu or quick switch)

What it does (in simple words)

Save provider configs as profiles
Switch profiles instantly
Comes with presets for popular providers, plus custom profiles
Keeps things safer: masks API keys in output and locks down file permissions

Install

npm i -g claude-provider

This installs both the CLI + the plugin.

Option 1: Use it inside Claude Code (Plugin)

Install the plugin from a marketplace

In Claude Code, run:

/plugin marketplace add iqbal-rashed/claude-provider-plugin
/plugin install provider@claude-provider-plugin

Useful plugin commands

/provider:add <name>
/provider:list
/provider:switch <profile_name>
/provider:snapshot <name>
/provider:delete <profile_name>

add lets you pick a preset (or custom), enter API key, and optionally a model

snapshot saves your current ~/.claude/settings.json as a reusable profile

Option 2: Use it in your terminal (CLI)

Interactive menu (easy mode)

cpr
# or
claude-provider

This opens a menu to view/switch/add/edit/delete profiles.

Quick switch (fast mode)

cpr kimi
# or
claude-provider kimi

List providers

cpr -l
# or
claude-provider --list

A real “daily use” example

Let’s say you want 2 profiles:

work → Anthropic (main)
fast → DeepSeek (cheap/quick)

1) Add both profiles (plugin way)

/provider:add work
/provider:add fast

Pick presets, add keys, done.

2) Switch depending on task

/provider:switch fast

Use it for quick refactors/tests.

/provider:switch work

Use it for bigger code reviews.

Supported presets (built in)

The predefined presets like Anthropic, Z.ai (GLM), MiniMax, Kimi, Qwen, DeepSeek, plus Custom.

How it works (why it feels instant)

Profiles are saved as: ~/.claude/settings..json
Switching copies that file into: ~/.claude/settings.json
Your enabled Claude Code plugins stay enabled when switching

Why I use rswitch instead of long switch blocks

Rashed Iqbal — Mon, 02 Feb 2026 22:31:53 +0000

Big switch statements get messy fast: lots of case, break, and repeated code.
rswitch is a small library that lets you write the same logic in a cleaner way. You match a value and get the result from an object.

Install

npm i rswitch

Basic idea

You give rswitch:

a key (the value you want to check)
a cases object (what to return for each case)
an optional options object

Simple example

import rswitch from "rswitch";

const role = "dev";

const result = rswitch(role, {
  designer: "Designer",
  "dev, web": "Freelancer", // match many keys
  "": "Unknown",            // default case
});

console.log(result); // Freelancer

✅ Tip: "" (empty string) is the default case.

Example 1: Handle status codes (clean and clear)
import rswitch from "rswitch";

function statusMessage(code) {
  return rswitch(code, {
    "200, 201, 204": "✅ Success",
    "400, 401, 403": "⛔ Client error",
    "500, 502, 503": "🔥 Server error",
    "": "🤷 Unknown status",
  });
}

console.log(statusMessage(503)); // 🔥 Server error

No break, no fall-through, easy to read.

Example 2: Run functions as actions

Actions can be values or functions.

import rswitch from "rswitch";

const command = "build";

const result = rswitch(command, {
  build: () => "Building...",
  test: () => "Testing...",
  "": () => "Use: build or test",
});

console.log(result); // Building...

Why rswitch is better than switch (for many cases)

Short code
Easy to read
Group multiple cases like "dev, web"
Default case is simple: ""
Works great in JavaScript + TypeScript

If your switch is getting long, rswitch can make it cleaner.

How to Handle Outside Clicks in React with TypeScript

Rashed Iqbal — Mon, 27 Feb 2023 11:32:07 +0000

React is a powerful library for building web applications, but sometimes you need to handle events that occur outside of your components. This can be tricky because React's event handling is based on a component hierarchy, and events outside that hierarchy are not automatically detected.

There are several libraries out there that can help you handle outside clicks, such as outsideclick-react. However, in this tutorial, we will show you how to implement your own hook to handle outside clicks in React using TypeScript.

To create a custom hook that listens for outside clicks, we can make use of the useRef and useEffect hooks provided by React. Here's an example implementation of the useOutsideClick hook:

import { useEffect, useRef } from 'react';

export const useOutsideClick = (callback: () => void) => {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent | TouchEvent) => {
      if (ref.current && !ref.current.contains(event.target as Node)) {
        callback();
      }
    };

    document.addEventListener('mouseup', handleClickOutside);
    document.addEventListener('touchend', handleClickOutside);


    return () => {
      document.removeEventListener('mouseup', handleClickOutside);
      document.removeEventListener('touchend', handleClickOutside);
    };
  }, [callback]);

  return ref;
};

In this implementation, the useOutsideClick hook takes a callback function as an argument, which will be triggered when a click event occurs outside of the specified element.

The hook returns a ref object, which can be attached to the root element of the component that needs to listen for outside clicks. When a click event occurs outside of this element, the callback function will be triggered.

Here's an example usage of the useOutsideClick hook:

import { useOutsideClick } from './useOutsideClick';

export const MyComponent = () => {
  const ref = useOutsideClick(() => {
    console.log('Clicked outside of MyComponent');
  });

  return (
    <div ref={ref}>
      My Component
    </div>
  );
};

In this example, the useOutsideClick hook is used to create a ref object, which is then passed to the root element of MyComponent. When the user clicks outside of MyComponent, the console.log statement in the callback function will be triggered.

By using the useOutsideClick hook, you can easily handle clicks outside of a specific element in your React components. This provides a simple and effective way to handle events that occur outside of the React component hierarchy.