Clipboard

Bootstrap 5 Clipboard

Copy to clipboard feature for the latest Bootstrap 5. Let your users easily copy text or links with one click.

Note: Read the API tab to find all available options and advanced customization

Basic example

Create copy to clipboard by adding button with reference that is passed to useClipboard hook along with the value to be copied. 

import React, { useState, useRef } from "react";
import { MDBBtn, useClipboard, MDBInput } from "mdb-react-ui-kit";

export default function App() {
  const [inputText, setInputText] = useState("");
  const triggerRef = useRef(null);
  const handleChange = (e) => {
    setInputText(e.target.value);
  };

  useClipboard(inputText, triggerRef);

  return (
    <>
      <MDBInput value={inputText} onChange={handleChange} label="Type here text to copy" />
      <MDBBtn ref={triggerRef}>Copy</MDBBtn>
    </>
  );
}

Copy from element

There is no difference if element is an input or just div element.

Here is text to copy!
import React, { useState, useRef, useEffect } from 'react';
import { MDBBtn, useClipboard } from 'mdb-react-ui-kit';

export default function App() {
  const [outerText, setOuterText] = useState('');

  const outerTrigger = useRef(null);
  const outerDivText = useRef(null);

  useEffect(() => {
    setOuterText(outerDivText.current.textContent);
  }, []);

  useClipboard(outerText, outerTrigger);
  return (
    <>
      <MDBBtn ref={outerTrigger}>Copy</MDBBtn>
      <div ref={outerDivText} className='mt-2'>
        Here is text to copy!
      </div>
    </>
  );
}

Copy hardcoded value

By passing a string as first argument to useClipboard you can hardcode value to copy.

Copy hardcoded value instead of text content. 
import React, { useRef } from 'react';
import { MDBBtn, useClipboard } from 'mdb-react-ui-kit';

export default function App() {
  const propTrigger = useRef(null);

  useClipboard('This text is from property!', propTrigger);
  return (
    <>
      <MDBBtn ref={propTrigger}>Copy</MDBBtn>
      <div className='mt-2'>Copy hardcoded value instead of text content.</div>
    </>
  );
}

Feedback example

An example of triggering feedback using an alert and reference. 

import React, { useState, useRef } from "react";
import { MDBBtn, MDBInput, useClipboard, MDBAlert } from "mdb-react-ui-kit";

export default function App() {
  const [feedbackText, setFeedbackText] = useState("");

  const feedbackTrigger = useRef(null);

  useClipboard(feedbackText, feedbackTrigger);

  const handleFeedbackChange = (e) => {
    setFeedbackText(e.target.value);
  };
  return (
    <>
      <MDBInput value={feedbackText} onChange={handleFeedbackChange} label="Type here text to copy" />
      <MDBBtn ref={feedbackTrigger}>Copy</MDBBtn>
      <MDBAlert
        color="primary"
        autohide
        position="top-right"
        delay={4000}
        width={"25%"}
        appendToBody
        triggerRef={feedbackTrigger}
      >
        Text copied!
      </MDBAlert>
    </>
  );
}

Clipboard - API

Import

import { useClipboard } from 'mdb-react-ui-kit';

Properties

useClipboard

Name Type Default Description Example
text string '' A text to copy. useClipboard('Text', someRef)
trigger React.Ref A trigger for copy. useClipboard('Text', someRef)