https://github.com/rarar89/copy-code-react
Add copy button to your code blocks automatically
https://github.com/rarar89/copy-code-react
button clipboard code-blocks react
Last synced: 2 months ago
JSON representation
Add copy button to your code blocks automatically
- Host: GitHub
- URL: https://github.com/rarar89/copy-code-react
- Owner: rarar89
- Created: 2025-03-07T20:16:47.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-03-21T07:42:37.000Z (10 months ago)
- Last Synced: 2025-10-04T10:57:22.982Z (3 months ago)
- Topics: button, clipboard, code-blocks, react
- Language: TypeScript
- Homepage:
- Size: 464 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Copy Code React
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.
## Installation
Install using pnpm, npm or yarn
```bash
pnpm install copy-code-react
```
```bash
npm install copy-code-react
```
```bash
yarn add copy-code-react
```
## Usage
### Method 1: Using the CopyCode wrapper Component
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.
```tsx
import { CopyCode } from 'copy-code-react';
function MyComponent() {
return (
Example code block:
{`function hello() {
console.log("Hello, world!");
}`}
Example code block 2:
{`function hello() {
console.log("Hello, world!");
}`}
);
}
```
CopyCode component also works with dangerouslySetInnerHTML:
```tsx
import { CopyCode } from 'copy-code-react';
function MyComponent() {
return (
console.log("Hello, world!");' }} />
);
}
```
You can also customize the appearance and behavior of the copy buttons:
```tsx
import { CopyCode } from 'copy-code-react';
function MyComponent() {
return (
{/* Your code blocks here */}
);
}
```
### Method 2: Using the Hook Directly
For more control, you can use the useCopyCode hook directly in your components. This allows you to target specific sections of your app.
```tsx
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 (
{`// This code block will have a copy button
function example() {
return "Hello world!";
}`}
);
}
```
Without a ref, the hook will apply to all code blocks in the document:
```tsx
import { useCopyCode } from 'copy-code-react';
function MyComponent() {
// Add copy buttons to all code blocks in the document
useCopyCode({
selector: 'code',
});
return (
{/* Your content */}
);
}
```
## Options
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 |
## Development
### Running the Demo
To see the library in action and explore example implementations:
```bash
# 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).
### Example Implementations
The repository includes several example implementations in the demo app (`src/App.tsx`). These examples showcase different configurations and use cases for the library.
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request
## License
MIT