PackageInstall

Renders a package install command with a variant for each package manager.

Render a package install command with a variant for npm, pnpm, bun and yarn.

npm install renoun
pnpm add renoun
bun add renoun
yarn add renoun

Configuration

The PackageInstall component uses local storage for the package manager preference, so it is important to ensure that the component is renders on the client without any flashing from state changes.

This can be avoided by rendering the PackageInstallScript in your root component or layout file before rendering PackageInstall:

layout.tsx
import { PackageInstallScript } from 'renoun/components'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        <PackageInstallScript />
        {children}
      </body>
    </html>
  )
}

API Reference

PackageInstall

({ packages, css, className, }: PackageInstallProps) => JSX.Element

Renders a package install command with a variant for each package manager.

Parameters
Properties

packages *

Array<string>

The package names to install.

css

{ container?: CSSObject; tabs?: CSSObject; tabButton?: CSSObject; tabPanel?: CSSObject; copyButton?: CSSObject; code?: CSSObject; } | undefined

Override styles for each part of the component.

className

{ container?: string; tabs?: string; tabButton?: string; tabPanel?: string; copyButton?: string; code?: string; } | undefined

Override class names for each part of the component.

Returns
Element

PackageInstallScript

() => JSX.Element

Client script to set the package manager based on local storage if available.

Returns
Element
Last updated