We use react-copy-to-clipboard package to enable auto copy feature. Install it in your project using the following command.
Adding code inside render function
Inside the render() function in react file, paste the following code where you want the copy button to be displayed. Here we need to provide the text to be copied to the CopyToClipboard component via the text props. We pass the script code. We get the access token for the bot via the saved cookie. Inside the children of CopyToClipboard we need to pass the copy button which we want to show.
Thus, when the user clicks on the “copy” button, the code will be automatically copied to the user’s clipboard.
Showing snackbar message
After the code has been copied to the user’s clipboard, we can show a snackbar message to inform the user. First we pass a function onCopy to the CopyToClipboard component. This sets the state variable copied to true. Then we have a snackbar component which displays the message.
- Snackbar in Material-ui: https://material-ui.com/demos/snackbars/
- NPM package for copying to clipboard: https://www.npmjs.com/package/react-copy-to-clipboard
- State in react: https://reactjs.org/docs/state-and-lifecycle.html