A simple, yet powerful component for displaying installation commands and usage examples for npm packages. Ideal for package authors who want to provide a clear and efficient way for others to install and learn how to use their packages.
Installation command interface of react-package-paster
Usage example preview interface of react-package-paster
- Installation Command Copy: Quickly display and copy package installation commands for npm, yarn, pnpm, and bun.
- Usage Example Preview: Easily showcase a code snippet with the intended usage of your npm package.
- Lightweight: A small bundle size ensures that this component doesn't add unnecessary weight to your web pages.
- Customizable: Tailor the appearance and behavior to fit your own styling and functional requirements.
Using npm:
npm install @stianlarsen/react-package-paster
Or using yarn:
yarn add @stianlarsen/react-package-paster
Import the CommandPaster
and use it with the packageName
prop:
import { CommandPaster } from "@stianlarsen/react-package-paster";
function App() {
return <CommandPaster packageName="your-package-name" />;
}
Import the CommandPaster
and provide the codeLanguage
and codeSnippet
props:
import { CommandPaster } from "@stianlarsen/react-package-paster";
function App() {
const snippet = `import { CommandPaster } from "@stianlarsen/react-package-paster"
function App() {
return (
<CommandPaster
codeLanguage="javascript"
codeSnippet="import {}"
/>
);
}`;
return <CommandPaster codeLanguage="javascript" codeSnippet={snippet} />;
}
For Next.js users, if you're utilizing Next.js's ability to render on the server, and you encounter client-side rendering issues with @stianlarsen/react-package-paster
, you can resolve these issues by ensuring the component is rendered client-side only. You can achieve this by wrapping CommandPaster
in a Next.js component with the use client
directive:
// components/CommandPasterNext.js
"use client";
import { CodeSnippetManager as CommandPasterClient } from "@stianlarsen/react-package-paster";
export const CommandPaster = () => {
return <CommandPasterClient packageName="your-package-name" />;
};
You can then import and use this component in your Next.js pages like so:
// pages/index.js
import { CommandPaster } from "/path/to/components/CommandPasterNext";
export default function Home() {
return (
<div>
<CommandPaster />
</div>
);
}
This ensures that CommandPaster is only rendered on the client side, following Next.js best practices for client-only components.
Remember to replace "/path/to/components/CommandPasterNext"
with the actual path to where CommandPaster
is located within the Next.js project.
To customize the theme and colors of the @stianlarsen/react-package-paster
component, you can add the following variables to your root CSS file:
:root {
--radius: 0.5rem;
--code-background: 240 6% 97%;
--code-foreground: 240 6% 25%;
--tab-foreground: 240 6% 25%;
--tab-foreground-muted: 240 6% 25% / 0.83;
--tab-foreground-active-border: 226 55% 45%;
--package-manager-color: 261 51% 51%;
--package-command-color: 212 94% 20%;
--divider-color: 240 2% 89%;
}
@media screen and (prefers-color-scheme: dark) {
:root {
--code-background: 240 4% 9%;
--code-foreground: 240 52% 96%;
--tab-foreground: 240 52% 96%;
--tab-foreground-muted: 240 33% 94% / 0.7;
--tab-foreground-active-border: 234 100% 83%;
--package-manager-color: 261 76% 76%;
--package-command-color: 212 100% 81%;
--divider-color: 240 4% 19%;
}
}
Contributions to @stianlarsen/react-package-paster
are welcome!
@stianlarsen/react-package-paster
is MIT licensed.
- GitHub: @stianlars1
- Website: https://stianlarsen.com
- Email: stian.larsen@mac.com