How to copy mutable text?

[yepyeel]

For example, api like this：

const [isCopied, setCopied] = useClipboard({
  successDuration: 1000,
  defaultCopyText: 'copied text!'
});

// ...
<>
  <span onClick={() => setCopied()}>some text</span> // will be "copied text!"
  <span onClick={() => setCopied('new text!')}>some text</span> // will be "new text!"
</>

[danoc]

Hi @codingbycat, thanks for the issue and sample code. What's an example of a product use case where this is especially helpful? I want to make sure I understand why this would be better than the alternative.

[yepyeel]

Hi @codingbycat, thanks for the issue and sample code. What's an example of a product use case where this is especially helpful? I want to make sure I understand why this would be better than the alternative.

Thanks for replying to me. Sorry, my english is poor. Above the issue, i just want to copy dynamic text, such as get remote data from server, i dont know how to do. So i think the api I mentioned is more suitable for this.

[danoc]

If I'm understanding this correctly, it should be possible to do this with:

const [isCopied, setCopied] = useClipboard({
  successDuration: 1000,
});

const [textToCopy, setTextToCopy] = useState("default text to copy");

useEffect(() => {
  // Get data from the server
  // And then use `setTextToCopy(response)` to update the text that will be copied
}, []);

// ...
<>
  <span onClick={() => setCopied(textToCopy)}>some text</span> // will be "default text to copy" if `useEffect` is not completed
</>

[yepyeel]

If I'm understanding this correctly, it should be possible to do this with:

const [isCopied, setCopied] = useClipboard({
  successDuration: 1000,
});

const [textToCopy, setTextToCopy] = useState("default text to copy");

useEffect(() => {
  // Get data from the server
  // And then use `setTextToCopy(response)` to update the text that will be copied
}, []);

// ...
<>
  <span onClick={() => setCopied(textToCopy)}>some text</span> // will be "default text to copy" if `useEffect` is not completed
</>

This case can also meet my current situation. Maybe it would be better to use one option instead of 'useState' or 'useRef'? It will be

const [isCopied, setCopied] = useClipboard({
   successDuration: 1000,
   defaultValue: 'default text'
});

const getCopyText = async () => {
  // Get link from the server
  const linkUrl = await getServerData()
  setCopied(linkUrl)
}

// ...
<>
  <span onClick={getCopyText}>copy link!</span>
</>

[sangnm0111]

Hi and thanks for the lib!  I created a pull request. Please check/review my pull request. We should add params for the copying function. It will make use more comfortable. I think so. 

[acomito]

I agree... I need something like this

export default function DownloadLinkBtn() {
  const [copyToClipboard] = useClipboard();
  const [getDownloadTokenById, {loading}] = useGetDownloadTokenByIdMutation();
  
  const onClick = async () => {
      const result = await getDownloadTokenById(); // a remote apollo/graphql call that return server data
      copyToClipboard(result?.data?.getDownloadTokenById);
      message.success('Link copied to clipboard!');
  };
  return (
    <Button onClick={onClick}>
      Get PDF Link
    </Button>
  );
}

[danoc]

Ok this is very delayed but I made https://github.com/danoc/react-use-clipboard/pull/48 which is based on #39, the PR that @sangnm0111 made. I'll leave the PR open for feedback.

[Laura-Broder]

Ok this is very delayed but I made #48 which is based on #39, the PR that @sangnm0111 made. I'll leave the PR open for feedback.

hi I'd really love this option(setting the text to be copied dynamically) - is there an update?