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
Copy
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.