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 } from 'mdb-react-ui-kit';

  const [inputText, setInputText] = useState('');

  const triggerRef = useRef(null);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInputText(e.target.value);
  };

  useClipboard(testText, triggerRef);

  export default function App() {
    return (
      <>
        <MDBInput value={inputText} onChange={handleChange} />
        <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';

    const [outerText, setOuterText] = useState('');

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

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

    useClipboard(outerText, outerTrigger);

    export default function App() {
      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';

    const propTrigger = useRef(null);

    useClipboard('This text is from property!', propTrigger);

    export default function App() {
      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, useClipboard, MDBAlert } from 'mdb-react-ui-kit';

          const [feedbackText, setFeedbackText] = useState('');
      
          const feedbackTrigger = useRef(null);
      
          useClipboard(feedbackText, feedbackTrigger);

          const handleFeedbackChange = (e: React.ChangeEvent<HTMLInputElement>) => {
            setFeedbackText(e.target.value);
          };
      
          export default function App() {
            return (
              <>
                <MDBInput value={feedbackText} onChange={handleFeedbackChange} />
                <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)