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) => React.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; }

Override styles for each part of the component.

container

CSSObject

tabs

CSSObject

tabButton

CSSObject

tabPanel

CSSObject

copyButton

CSSObject

code

CSSObject

className

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

Override class names for each part of the component.

container

string

tabs

string

tabButton

string

tabPanel

string

copyButton

string

code

string
Returns
Element

PackageInstallScript

() => React.JSX.Element

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

Returns
Element
Last updated