Command
Renders a terminal command with a variant for each package manager.
Local Storage
The Command component uses local storage for the package manager preference and will use a small script hoisted to the root of the page to set the package manager on load. This is done to avoid any flashing from state changes when a local storage value is found.
API Reference
Type
PackageManagerCommandVariantProperties
| Property | Type | Modifiers |
|---|---|---|
| variant? | PackageManagerCommandVariant | — |
The type of command to render across package managers. | ||
| children | React.ReactNode | — |
Content used as the subject: packages (install), script (run), binary (exec), or template (create). | ||
| shouldValidate? | boolean | — |
Whether the command should validate the npm package before rendering. | ||
| components? | Partial<CommandComponentOverrides> | — |
Override the components and/or props for each slot. | ||
Properties
| Property | Type | Modifiers |
|---|---|---|
| Container | ComponentClass<ContainerProps, any> | FunctionComponent<ContainerProps> | — |
| Tabs | ComponentClass<TabsProps, any> | FunctionComponent<TabsProps> | — |
| TabButton | ComponentClass<TabButtonProps, any> | FunctionComponent<TabButtonProps> | — |
| TabPanel | ComponentClass<TabPanelProps, any> | FunctionComponent<TabPanelProps> | — |
| CopyButton | React.ComponentType<{ value?: string | ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => string); css?: CSSObject; } & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "value">> | — |
| Code | ComponentClass<CodeProps, any> | FunctionComponent<CodeProps> | — |
Properties
| Property | Type | Modifiers |
|---|---|---|
| Container | SlotComponentOrProps<ContainerProps> | — |
| Tabs | SlotComponentOrProps<TabsProps> | — |
| TabButton | SlotComponentOrProps<TabButtonProps> | — |
| TabPanel | SlotComponentOrProps<TabPanelProps> | — |
| CopyButton | SlotComponentOrProps<{ value?: string | ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => string); css?: CSSObject; } & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "value">> | — |
| Code | SlotComponentOrProps<CodeProps> | — |
Renders a terminal command with a variant for each package manager.
Properties
CommandPropsReturns
React.JSX.ElementLast updated