You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
Socket
Book a DemoInstallSign in
Socket

copy-code-react

Package Overview
Dependencies
Maintainers
1
Versions
31
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

copy-code-react - npm Package Compare versions

Comparing version

to
0.6.0

2

package.json
{
"name": "copy-code-react",
"version": "0.5.7",
"version": "0.6.0",
"type": "module",

@@ -5,0 +5,0 @@ "files": [

# Copy Code React
A lightweight React library that automatically adds copy buttons to code blocks. Customizable options for button position, styling, text and highlighting.
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.

@@ -48,9 +48,15 @@ <p align="center">

<h3>Example code block:</h3>
<pre>
<code>
<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>
</code></pre>
</div>
</div>

@@ -97,7 +103,7 @@ </CopyCode>

For more control, you can use the useCodeCopy hook directly in your components. This allows you to target specific sections of your app.
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 { useCodeCopy } from 'copy-code-react';
import { useCopyCode } from 'copy-code-react';
import { useRef } from 'react';

@@ -110,3 +116,3 @@

// Apply the hook with custom options
useCodeCopy(
useCopyCode(
{

@@ -138,7 +144,7 @@ position: 'top-left',

```tsx
import { useCodeCopy } from 'copy-code-react';
import { useCopyCode } from 'copy-code-react';
function MyComponent() {
// Add copy buttons to all code blocks in the document
useCodeCopy({
useCopyCode({
selector: 'code',

@@ -168,2 +174,4 @@ });

| 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 |

@@ -170,0 +178,0 @@ ## Development