react-install-command/dist/index.d.mts

A React component for rendering a 'npm install package-name' command block. Supports multiple package managers and themes. Drop it into your MDX code, a ShadCN UI component, a Tailwind codebase, use built-in styles or go unstyled. You choose.

import * as react_jsx_runtime from 'react/jsx-runtime';
import { ReactNode } from 'react';

type Theme = "light" | "dark" | "system";
interface Manager {
    id: string;
    name: string;
    icon: () => JSX.Element;
    getCommand: (packageName: string, options: {
        isDev?: boolean;
        isPeer?: boolean;
        isOptional?: boolean;
        isGlobal?: boolean;
        useShorthand?: boolean;
        version?: string;
        tag?: string;
        registry?: "npm" | "jsr" | "pypi";
    }) => string;
}
interface SlotProps {
    className?: string;
    children?: ReactNode;
}
interface TabSlotProps extends SlotProps {
    isSelected: boolean;
    onClick: () => void;
}
interface CopyButtonSlotProps extends SlotProps {
    onClick: () => void;
}
interface TabIndicatorSlotProps extends SlotProps {
    isSelected: boolean;
}
interface Slots {
    root?: (props: SlotProps) => ReactNode;
    navigation?: (props: SlotProps) => ReactNode;
    tab?: (props: TabSlotProps) => ReactNode;
    tabIndicator?: (props: TabIndicatorSlotProps) => ReactNode;
    commandContainer?: (props: SlotProps) => ReactNode;
    commandPrefix?: (props: SlotProps) => ReactNode;
    commandText?: (props: SlotProps) => ReactNode;
    copyButton?: (props: CopyButtonSlotProps) => ReactNode;
}
interface SlotClassNames {
    root?: string;
    navigation?: string;
    tab?: string;
    tabIndicator?: string;
    commandContainer?: string;
    commandPrefix?: string;
    commandText?: string;
    copyButton?: string;
    tabIcon?: string;
    tabText?: string;
    commandGroup?: string;
    commandTextCommand?: string;
    copyButtonIcon?: string;
}
declare const cn: (...classes: (string | undefined)[]) => string;
declare const javascriptManagers: Manager[];
declare const pythonManagers: Manager[];
type StorageType = "local" | "session" | "none";
interface InstallCommandProps {
    /**
     * The name of the package to generate install commands for
     */
    packageName?: string;
    /**
     * Whether to install as a dev dependency
     * @default false
     */
    isDev?: boolean;
    /**
     * Whether to install as a peer dependency
     * @default false
     */
    isPeer?: boolean;
    /**
     * Whether to install as an optional dependency
     * @default false
     */
    isOptional?: boolean;
    /**
     * Whether to install globally
     * @default false
     */
    isGlobal?: boolean;
    /**
     * Whether to use shorthand commands (e.g. 'npm i' instead of 'npm install')
     * @default false
     */
    useShorthand?: boolean;
    /**
     * Version range for the package (e.g. "^1.0.0", "~2.0.0")
     */
    version?: string;
    /**
     * Tag for the package (e.g. "latest", "next", "beta")
     */
    tag?: string;
    /**
     * Package registry to use (for Deno packages)
     * @default undefined
     */
    registry?: "npm" | "jsr" | "pypi";
    /**
     * Array of package managers to display
     * @default javascriptManagers
     */
    managers?: Manager[];
    /**
     * Custom commands to override the default ones
     */
    customCommands?: Record<string, string>;
    /**
     * Custom slot components for rendering
     */
    slots?: Slots;
    /**
     * Custom classNames for each slot and nested elements
     */
    slotClassNames?: SlotClassNames;
    /**
     * Callback fired when the command is copied
     * @param command The command that was copied
     * @param manager The current package manager
     */
    onCopy?: (command: string, manager: Manager) => void;
    /**
     * Callback fired when the selected package manager changes
     * @param managerId The ID of the newly selected manager
     * @param manager The newly selected manager object
     */
    onTabChange?: (managerId: string, manager: Manager) => void;
    /**
     * The color theme to use
     * @default "system"
     */
    theme?: Theme;
    /**
     * Custom copy icon component
     * @default defaultCopyIcon
     */
    copyIcon?: () => JSX.Element;
    /**
     * Custom class name concatenation function
     * @default cn
     */
    classNameFn?: (...classes: string[]) => string;
    /**
     * Custom prefix symbol to show before the command
     * @default "$"
     */
    commandPrefix?: string;
    /**
     * Storage type for persisting package manager selection
     * @default "none"
     */
    storageType?: StorageType;
    /**
     * Storage key for persisting package manager selection
     * @default "preferred-package-manager"
     */
    storageKey?: string;
}
declare const InstallCommand: ({ packageName, isDev, isPeer, isOptional, isGlobal, useShorthand, version, tag, registry, managers, customCommands, slots, slotClassNames, onCopy, onTabChange, theme, copyIcon, classNameFn, commandPrefix, storageType, storageKey, }: InstallCommandProps) => react_jsx_runtime.JSX.Element | null;

export { type CopyButtonSlotProps, InstallCommand, type InstallCommandProps, type Manager, type SlotClassNames, type SlotProps, type Slots, type StorageType, type TabSlotProps, type Theme, cn, javascriptManagers, pythonManagers };