Skip to content
This repository has been archived by the owner on Aug 7, 2024. It is now read-only.

copy to clipboard feature added #2551

Merged
merged 3 commits into from
Dec 31, 2022
Merged

copy to clipboard feature added #2551

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b8d38d1
copy to clipboard feature added
ChinmayMhatre Dec 31, 2022
952641b
updated handleCopyClick function to use async await
ChinmayMhatre Dec 31, 2022
4606d1a
refactored the copy to clipboard function added react-children-utilities
ChinmayMhatre Dec 31, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 51 additions & 0 deletions components/ClipboardCopy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import React, { useState } from "react";

const ClipboardCopy = ({ copyText, children }) => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need copyText and children? They look the same

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The children have the code blocks commas in the start and end. Should I use slice to remove the firsts 5 and the last three characters? Then We could probably use the children prop itself

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh good point 🤔 I think yes, because I am keen to try and use the same code, so there is not duplicate and not the risk of the code being different and causing bugs for people.

It would probably be safer to separate on the line breaks and remove the first line and last line - because it might not always be 5 characters at the beginning

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh good point 🤔 I think yes, because I am keen to try and use the same code, so there is not duplicate and not the risk of the code being different and causing bugs for people.

It would probably be safer to separate on the line breaks and remove the first line and last line - because it might not always be 5 characters at the beginning

Oh yeah, That is a way better option. Could you tell me how would I convert the children prop to string. I can't seem to find the method to get the text from the object

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I haven't tried before, but after a Google I found this https://github.com/fernandopasik/react-children-utilities

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll give it a go, thanks!

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(copyText)
.then(() => {
setIsCopied(true);
setTimeout(() => {
setIsCopied(false);
}, 1500);
})
.catch((err) => {
console.log(err);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We are using async/await and try/catch

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh okay, I'll fix that

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thank you 👍

});
};

return (
<div className="relative">
<div className="absolute flex items-center space-x-2 top-0 right-0 m-2">
<button
type="button"
aria-label="Copy to Clipboard"
onClick={handleCopyClick}
className="transition rounded-md flex items-center justify-center text-center px-2 focus:outline-none fade-in group-hover:flex"
>
{isCopied ? (
<span className="text-green-500 text-sm">Copied!</span>
) : (
<span className="text-gray-500 text-sm">Copy</span>
)
}
</button>
</div>
{children}
</div>
);
};



export default ClipboardCopy;
36 changes: 36 additions & 0 deletions pages/docs/quickstart.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import DocsLayout from "../../components/layouts/DocsLayout.js";
import ClipboardCopy from "../../components/ClipboardCopy.js";

## Quickstart

Expand Down Expand Up @@ -29,6 +30,15 @@ To do this, you need a GitHub account. If you do not have one yet, you can creat

8. For the file contents use the json structure below:

<ClipboardCopy
copyText ={`{
"name": "Sara Jaoude",
"displayStatsPublic": true,
"type": "personal",
"bio": "Lawyer turned **Digital Nomad**. Travel enthusiast Yoga & Peloton aficionado",
"avatar": "https://github.com/SaraJaoude.png",
}`}
>
```js
{
"name": "Sara Jaoude",
Expand All @@ -38,6 +48,7 @@ To do this, you need a GitHub account. If you do not have one yet, you can creat
"avatar": "https://github.com/SaraJaoude.png",
}
```
</ClipboardCopy>

| field | type | description |
| :----------------- | :------------------- | :------------------------------------------------------------------------------------------------------------ |
Expand All @@ -49,6 +60,15 @@ To do this, you need a GitHub account. If you do not have one yet, you can creat

9. Now add links to your social media and other content (for example: website) so they appear on your Profile.

<ClipboardCopy
copyText ={`"links": [
{
"name": "Follow me on Twitter",
"url": "https://twitter.com/SaraJaoude",
"icon": "FaTwitter"
}
]`}
>
```js
"links": [
{
Expand All @@ -58,6 +78,7 @@ To do this, you need a GitHub account. If you do not have one yet, you can creat
}
]
```
</ClipboardCopy>

| field | type | description |
| :---- | :----- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
Expand All @@ -69,6 +90,20 @@ To do this, you need a GitHub account. If you do not have one yet, you can creat

To add more links add another object inside the links collection. For example:

<ClipboardCopy
copyText ={`"links": [
{
"name": "Follow me on Twitter",
"url": "https://twitter.com/SaraJaoude",
"icon": "FaTwitter"
},
{
"name": "Follow me on Instagram",
"url": "https://twitter.com/EddieAndSaraExplore",
"icon": "FaInstagram"
}
]`}
>
```js
"links": [
{
Expand All @@ -83,6 +118,7 @@ To add more links add another object inside the links collection. For example:
}
]
```
</ClipboardCopy>

10. Scroll to the bottom and commit new file by adding the commit messsage that starts `data: ` followed by your GitHub username (for example `data: SaraJaoude`)

Expand Down