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.