https://github.com/timmikeladze/react-install-command
https://github.com/timmikeladze/react-install-command
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/timmikeladze/react-install-command
- Owner: TimMikeladze
- License: mit
- Created: 2025-02-11T20:05:07.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-02-12T10:04:00.000Z (over 1 year ago)
- Last Synced: 2025-02-12T10:12:50.757Z (over 1 year ago)
- Language: TypeScript
- Homepage: https://react-install-command.vercel.app
- Size: 420 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# 📡 React Install Command
A React component for rendering a 'npm install package-name' code block. Supports multiple package managers and variations of install commands. Totally customizable. Drop it into an MDX file, a Shadcn component, a Tailwind codebase, use built-in styles or even go unstyled. You choose.
Visit the [Storybook](https://react-install-command.vercel.app/) for examples and documentation.
## Features
- 🚀 Support for major package managers (npm, Yarn, pnpm, Bun, Deno, uv, pip).
- 🌓 Dark, light and system theme support out of the box.
- 🔄 Interactive tab switching between package managers.
- 📋 One-click copy to clipboard.
- 🎯 Support for various installation options (dev, peer, optional, global).
- 🔧 Highly customizable UI through slots and class names.
- 📦 Support for multiple package registries (npm, JSR).
- 🛠️ Extensible with custom package managers and commands.
## Installation
```bash
npm install react-install-command
```
> 👋 Hello there! Follow me [@linesofcode](https://twitter.com/linesofcode) or visit [linesofcode.dev](https://linesofcode.dev) for more cool projects like this one.
## Usage
### Basic Usage
```tsx
import 'react-install-command/styles.css';
import { InstallCommand } from 'react-install-command';
// Basic usage
// Dev dependency
// Peer dependency
// Optional dependency
// Global installation
// Specific version
// Using tag
// Multiple packages
// Using shorthand commands (e.g., 'npm i' instead of 'npm install')
```
### Registry Support
```tsx
// Using JSR registry (automatically selects Deno)
// Installing npm package with Deno
// Mixed registry packages
```
### Python Package Managers
```tsx
// Using Python managers (uv, pip)
// Python dev dependency
// Python package with version
// Python package with tag
// Python global installation
```
### Theming
```tsx
// Dark theme
// Light theme
// System theme (default)
// Custom styling with CSS variables
```
### Custom Package Managers
```tsx
(
),
getCommand: (pkg, options) => {
const { isDev, useShorthand } = options;
return `npm ${isDev ? (useShorthand ? "i -D" : "install -D") : useShorthand ? "i" : "install"} ${pkg}`;
}
}
]}
/>
// Reordering default managers
// Using Python managers
// Mixed JavaScript and Python managers
```
### Custom Commands
```tsx
```
### Customization
```tsx
// Custom class names
// Full customization with CSS classes
```
### Built-in Indicator Variants
The component comes with several built-in indicator variants that you can use:
1. Default indicator (full width):
```tsx
```
2. Centered indicator:
```tsx
```
3. Gradient indicator:
```tsx
```
You can also create your own indicator styles by extending these classes or creating new ones in your CSS:
```css
.my-custom-indicator {
left: 15%;
width: 70%;
height: 3px;
border-radius: 1.5px;
background: linear-gradient(90deg, var(--primary), var(--accent));
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
```
Then use it in your component:
```tsx
```
### Storage Persistence
```tsx
// Persist in localStorage (survives browser restarts)
// Persist in sessionStorage (cleared when browser closes)
// Custom storage key
```
### Event Handlers
```tsx
{
console.log(`Copied command: ${command} for manager: ${manager.name}`);
alert("Command copied to clipboard!");
}}
onTabChange={(managerId, manager) => {
console.log(`Switched to ${manager.name} (${managerId})`);
}}
/>
```
### Combined Features
```tsx
(
)}
slotClassNames={{
root: "custom-root",
commandText: "custom-text"
}}
onCopy={(command) => console.log(`Copied: ${command}`)}
storageType="local"
/>
```
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| packageName | string | "" | The name of the package(s) to generate install commands for |
| isDev | boolean | false | Whether to install as a dev dependency |
| isPeer | boolean | false | Whether to install as a peer dependency |
| isOptional | boolean | false | Whether to install as an optional dependency |
| isGlobal | boolean | false | Whether to install globally |
| useShorthand | boolean | false | Whether to use shorthand commands (e.g. 'npm i' vs 'npm install') |
| version | string | undefined | Version range for the package |
| tag | string | undefined | Tag for the package |
| registry | "npm" \| "jsr" | undefined | Package registry to use (for Deno packages) |
| theme | "light" \| "dark" \| "system" | "system" | The color theme to use |
| managers | Manager[] | javascriptManagers | Array of package managers to display |
| customCommands | Record | undefined | Custom commands to override the defaults |
| slots | Slots | {} | Custom slot components for rendering |
| slotClassNames | SlotClassNames | {} | Custom classNames for each slot |
| commandPrefix | string | "$" | Custom prefix symbol to show before the command |
| copyIcon | () => JSX.Element | defaultCopyIcon | Custom copy icon component |
| onCopy | (command: string, manager: Manager) => void | undefined | Callback fired when command is copied |
| onTabChange | (managerId: string, manager: Manager) => void | undefined | Callback fired when selected manager changes |
| storageType | "local" \| "session" \| "none" | "none" | Storage type for persisting package manager selection |
| storageKey | string | "preferred-package-manager" | Storage key for persisting package manager selection |
## Types
### Manager
```typescript
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";
}
) => string;
}
```
### Available Package Managers
The component provides pre-configured manager arrays:
- `javascriptManagers`: npm, Yarn, pnpm, Bun, Deno
- `pythonManagers`: uv, pip
You can import these arrays:
```tsx
import { javascriptManagers, pythonManagers } from 'react-install-command';
// Use JavaScript managers (default)
// Use Python managers
// Mix managers
```
### Slots
```typescript
interface Slots {
root?: (props: SlotProps) => ReactNode;
navigation?: (props: SlotProps) => ReactNode;
tab?: (props: TabSlotProps) => ReactNode;
commandContainer?: (props: SlotProps) => ReactNode;
commandPrefix?: (props: SlotProps) => ReactNode;
commandText?: (props: SlotProps) => ReactNode;
copyButton?: (props: CopyButtonSlotProps) => ReactNode;
}
```
## CSS Variables
The component uses CSS variables for theming. You can override these variables to customize the appearance:
```css
:root {
/* Base colors */
--background: hsl(0 0% 100%); /* Background color of the component */
--foreground: hsl(222.2 84% 4.9%); /* Primary text color */
/* Muted variants */
--muted: hsl(210 40% 94%); /* Background for command area */
--muted-foreground: hsl(215.4 16.3% 36.9%); /* Secondary text color */
/* Border colors */
--border: hsl(214.3 31.8% 85%); /* Border color for containers */
/* Primary colors */
--primary: hsl(222.2 47.4% 11.2%); /* Color for active elements */
--primary-foreground: hsl(210 40% 98%); /* Text on primary color */
/* Accent colors */
--accent: hsl(210 40% 90%); /* Background for hover states */
--accent-foreground: hsl(222.2 47.4% 11.2%); /* Text on accent color */
/* Border radius */
--radius: 0.5rem; /* Border radius for containers */
}
```
### Usage Examples
1. Override all variables:
```css
:root {
--background: white;
--foreground: black;
--muted: #f5f5f5;
--border: #e5e5e5;
--primary: blue;
--accent: #eef;
--radius: 8px;
}
```
2. Override specific variables:
```css
.my-theme {
--primary: purple;
--accent: lavender;
}
```
3. Dark theme override:
```css
[data-theme="dark"] {
--background: hsl(222.2 84% 4.9%);
--foreground: hsl(210 40% 98%);
--muted: hsl(217.2 32.6% 17.5%);
--border: hsl(217.2 32.6% 17.5%);
}
```
4. Scoped customization:
```css
.custom-install-command {
--radius: 0; /* Remove border radius */
--border: transparent; /* Remove borders */
--muted: transparent; /* Remove background */
}
```
### Available Variables
| Variable | Purpose | Default (Light) | Default (Dark) |
|----------|---------|----------------|----------------|
| --background | Component background | `hsl(0 0% 100%)` | `hsl(222.2 84% 4.9%)` |
| --foreground | Primary text color | `hsl(222.2 84% 4.9%)` | `hsl(210 40% 98%)` |
| --muted | Command area background | `hsl(210 40% 94%)` | `hsl(217.2 32.6% 17.5%)` |
| --muted-foreground | Secondary text | `hsl(215.4 16.3% 36.9%)` | `hsl(215 20.2% 65.1%)` |
| --border | Border color | `hsl(214.3 31.8% 85%)` | `hsl(217.2 32.6% 17.5%)` |
| --primary | Active/accent elements | `hsl(222.2 47.4% 11.2%)` | `hsl(210 40% 98%)` |
| --primary-foreground | Text on primary | `hsl(210 40% 98%)` | `hsl(222.2 47.4% 11.2%)` |
| --accent | Hover state background | `hsl(210 40% 90%)` | `hsl(217.2 32.6% 17.5%)` |
| --accent-foreground | Text on accent | `hsl(222.2 47.4% 11.2%)` | `hsl(210 40% 98%)` |
| --radius | Border radius | `0.5rem` | `0.5rem` |
### CSS Classes
The component uses the following CSS classes that you can target for customization:
- `.install-block` - Root container
- `.install-block-nav` - Navigation/tabs container
- `.install-block-tab` - Individual tab buttons
- `.install-block-content` - Command container
- `.install-block-group` - Command text group
- `.install-block-prefix` - Command prefix ($)
- `.install-block-text` - Command text
- `.install-block-text-command` - Command keyword
- `.install-block-copy` - Copy button