Nextjs 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 from "react";
// react component that copies the given text inside your clipboard
import { CopyToClipboard } from "react-copy-to-clipboard";
// reactstrap components
import { Button, Col, UncontrolledTooltip } from "reactstrap";

class Datepicker extends React.Component {
  state = {};
  render() {
    return (
      <>
        <Col lg="3" md="6">
          <CopyToClipboard
            text={"active-40"}
            onCopy={() => this.setState({ copiedText: "active-40" })}
          >
            <Button
              className="btn-icon-clipboard"
              id="tooltip982655500"
              type="button"
            >
              <div>
                <i className="ni ni-active-40" />
                <span>active-40</span>
              </div>
            </Button>
          </CopyToClipboard>
          <UncontrolledTooltip
            delay={0}
            trigger="hover focus"
            target="tooltip982655500"
          >
            {this.state.copiedText === "active-40"
              ? "Copied"
              : "Copy To Clipboard"}
          </UncontrolledTooltip>
        </Col>
      </>
    );
  }
}

export default Datepicker;

Props

If you want to see more examples and properties please check the official React-copy-to-clipboard Documentation onGithub.