copy-code-react
Advanced tools
Comparing version
{ | ||
"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 |
20522
2.19%212
3.92%