A lightweight React library that automatically adds copy buttons to code blocks to copy code to the clipboard. Customizable options for button position, icons, styling, text and highlighting.
Install using pnpm, npm or yarn
pnpm install copy-code-react
npm install copy-code-react
yarn add copy-code-react
The CopyCode component automatically adds copy buttons to all code blocks within it. This is the simplest way to add copy functionality to specific sections of your app.
import { CopyCode } from 'copy-code-react';
function MyComponent() {
return (
<CopyCode>
<div>
<h3>Example code block:</h3>
<pre><code>
{`function hello() {
console.log("Hello, world!");
}`}
</code></pre>
<div>
<h4>Example code block 2:</h4>
<pre><code>
{`function hello() {
console.log("Hello, world!");
}`}
</code></pre>
</div>
</div>
</CopyCode>
);
}
CopyCode component also works with dangerouslySetInnerHTML:
import { CopyCode } from 'copy-code-react';
function MyComponent() {
return (
<CopyCode>
<div dangerouslySetInnerHTML={{ __html: '<pre><code>console.log("Hello, world!");</code></pre>' }} />
</CopyCode>
);
}
You can also customize the appearance and behavior of the copy buttons:
import { CopyCode } from 'copy-code-react';
function MyComponent() {
return (
<CopyCode
position="bottom-right"
copyMessage="Copied!"
highlightOnCopy={true}
>
{/* Your code blocks here */}
</CopyCode>
);
}
For more control, you can use the useCopyCode hook directly in your components. This allows you to target specific sections of your app.
import { useCopyCode } from 'copy-code-react';
import { useRef } from 'react';
function MyComponent() {
// Create a ref to limit the scope of code blocks that will get copy buttons
const containerRef = useRef(null);
// Apply the hook with custom options
useCopyCode(
{
position: 'top-left',
copyMessage: 'Code Copied!',
highlightOnCopy: true
},
containerRef
);
return (
<div ref={containerRef}>
<pre>
<code>
{`// This code block will have a copy button
function example() {
return "Hello world!";
}`}
</code>
</pre>
</div>
);
}
Without a ref, the hook will apply to all code blocks in the document:
import { useCopyCode } from 'copy-code-react';
function MyComponent() {
// Add copy buttons to all code blocks in the document
useCopyCode({
selector: 'code',
});
return (
<div>
{/* Your content */}
</div>
);
}
Both the CopyCode component and useCodeCopy hook accept the following options:
Option | Type | Default | Description |
---|---|---|---|
selector | string | 'pre code' | CSS selector for code blocks |
position | string | 'top-right' | Position of the copy button. Options: 'top-right', 'top-left', 'bottom-right', 'bottom-left' |
copyMessage | string | 'Copied' | Message to show after copying |
copyMessageTimeout | number | 2000 | Time in milliseconds to show the success message |
containerClassName | string | 'react-code-copy-button-container' | Class name for the button container |
buttonClassName | string | 'react-code-copy-button' | Class name for the copy button |
successClassName | string | 'react-code-copy-success' | Class name for success message |
highlightOnCopy | boolean | false | Whether to highlight the code block when copied |
customCopyIcon | ReactNode | undefined | Custom JSX element to use instead of the default copy icon |
customSuccessIcon | ReactNode | undefined | Custom JSX element to use instead of the default success icon |
To see the library in action and explore example implementations:
# Clone the repository
git clone https://github.com/rarar89/copy-code-react.git
cd copy-code-react
# Install dependencies
npm install
# Start the development server
npm run dev
The development server will start, and you can view the examples at http://localhost:5173
(or the port shown in your terminal).
The repository includes several example implementations in the demo app (src/App.tsx
). These examples showcase different configurations and use cases for the library.
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature
) - Commit your changes (
git commit -m 'Add some amazing feature'
) - Push to the branch (
git push origin feature/amazing-feature
) - Open a Pull Request
MIT