Material-UI React Copy To Clipboard
-
Pro Component
CopyToClipboard is a simple wrapping component, it does not render
any tags, so it requires the only child element to be present, which
will be used to capture clicks.
Examples
import React , { useState } from " react " ;
// react component that copies the given text inside your clipboard
import { CopyToClipboard } from " react-copy-to-clipboard " ;
// @material-ui/core components
import { makeStyles } from " @material-ui/core/styles " ;
import { useTheme } from " @material-ui/core/styles " ;
import Box from " @material-ui/core/Box " ;
import Grid from " @material-ui/core/Grid " ;
import Tooltip from " @material-ui/core/Tooltip " ;
// core components
import componentStyles from " assets/theme/views/admin/icons.js " ;
const useStyles = makeStyles ( componentStyles );
const Icons = () => {
const classes = useStyles ();
const theme = useTheme ();
const [ copiedText , setCopiedText ] = useState ();
return (
<>
< Grid
item
lg = { 3 }
md = { 6 }
xs = { 12 }
component = { Box }
paddingLeft = " 15px "
paddingRight = " 15px "
>
< CopyToClipboard
text = { " ni ni-active-40 " }
onCopy = {() => setCopiedText ( " ni ni-active-40 " )}
>
< Tooltip
title = {
copiedText === " ni ni-active-40 "
? " This was Copied! "
: " Copy To Clipboard "
}
placement = " top "
>
< Box
component = " button "
fontFamily = " inherit "
fontSize = " 16px "
fontWeight = " 400 "
lineHeight = " 1.25 "
display = " inline-block "
width = " 100% "
margin = " .5rem 0 "
padding = " 24px "
textAlign = " left "
color = { theme . palette . gray [ 800 ]}
border = " 0 "
borderRadius = " 4px "
className = { classes . button }
data - clipboard - text = " album-2 "
type = " button "
>
< div >
< i className = " ni ni-active-40 " />
< span > active - 40 < /span >
< /div >
< /Box >
< /Tooltip >
< /CopyToClipboard >
< /Grid >
< / >
);
};
export default Icons ;
Props
If you want to see more examples and properties please check the
official
React-copy-to-clipboard Documentation onGithub .