# useCopy

The **useCopy** hook is a common hook provided by the Hartan library. This hook uses the native web Clipboard API internally to provide the copy functionality on the text provided by user.

{% hint style="success" %}
This hook is a public hook and **available** for the users to use.
{% endhint %}

#### Code

{% code overflow="wrap" %}

```javascript
import { useState } from "react"

export default function useCopy(textToCopy) {

    const [isCopied, setIsCopied] = useState(false);

    async function copyTextToClipboard(text) {
        if ('clipboard' in navigator) {
            return await navigator.clipboard.writeText(text);
        } else {
            return document.execCommand('copy', true, text);
        }
    }

    const handleCopyClick = () => {
        copyTextToClipboard(textToCopy)
            .then(() => {
                setIsCopied(true);
                setTimeout(() => {
                    setIsCopied(false);
                }, 1500);
            })
            .catch((err) => {
                console.log(err);
            });
    }

    return [isCopied, handleCopyClick]
}
```

{% endcode %}

#### Explanation

* As you can see above it uses the [useState](https://react.dev/reference/react/useState) hook of the React and the native Clipboard API internally.
* It accepts a single parameter, the text to be copied to clipboard, which is provided by the user.
* It returns two things:
  * `isCopied` : a state value to tell that text is copied.
  * `handleCopyClick` : the function which contains the copy logic.

### Usage

{% code overflow="wrap" %}

```jsx
// App.jsx
import snippetStyle from "./Snippet.module.css"
import useCopy from "../../Hooks/Snippet"

export default function Snippet({ snippetSymbol = "$", snippetSymbolState = true, snippetText = "npm i react-hartan", userSnippetStyle, userSnippetTextStyle }) {

    const [isCopied, handleCopyClick] = useCopy(snippetText);

    return (

        <div className={`${snippetStyle.snippet} ${userSnippetStyle}`} onClick={handleCopyClick}>
            <pre>
                <code>
                    <span className={`${snippetStyle.snippetText} ${userSnippetTextStyle}`}>{snippetSymbolState && snippetSymbol} {snippetText}</span>
                    <span>
                        {
                            isCopied ?
                                <svg xmlns="http://www.w3.org/2000/svg" height="14" width="10.5" viewBox="0 0 448 512"><path fill="#ffffff" d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z" /></svg>
                                :
                                <svg xmlns="http://www.w3.org/2000/svg" height="14" width="10.5" viewBox="0 0 384 512"><path fill="#ffffff" d="M280 64h40c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128C0 92.7 28.7 64 64 64h40 9.6C121 27.5 153.3 0 192 0s71 27.5 78.4 64H280zM64 112c-8.8 0-16 7.2-16 16V448c0 8.8 7.2 16 16 16H320c8.8 0 16-7.2 16-16V128c0-8.8-7.2-16-16-16H304v24c0 13.3-10.7 24-24 24H192 104c-13.3 0-24-10.7-24-24V112H64zm128-8a24 24 0 1 0 0-48 24 24 0 1 0 0 48z" />
                                </svg>
                        }
                    </span>
                </code>
            </pre>
        </div>

    )
}
```

{% endcode %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://hartans-organization.gitbook.io/hartan-docs/hooks/usecopy.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.