Advanced Clipboard Management in JavaScript Clipify.js

Clipify is a JavaScript clipboard management library that extends browser clipboard functionality with history tracking and expiry management.

The library builds upon the native Clipboard API to handle text and file data while maintaining a clipboard history.

Features:

• Copy Text: Copy text to the system clipboard and store it in a managed history.
• Copy Files: Add files (e.g., images, documents) to the clipboard history for reference.
• Retrieve History: Access clipboard history or specific items using keys.
• Expiry Management: Automatically remove clipboard items after a specified expiry time.
• Event Handling: Listen for clipboard events like copy or expire.
• Clear History: Easily clear all stored clipboard history.
• Browser Compatibility Check: Detect clipboard API support in the browser.

How to use it:

1. Install Clipify with NPM or Yarn:

# Yarn
$ yarn add clipify
# NPM
$ npm install clipify

2. Import Clipify and register a new instance:

import Clipify from 'clipify';
const clipboard = new Clipify();

3. Copy your text to the clipboard and store it in the clipboard history.

clipboard.copy({
  text: 'CSSScript!',
  expiryTime: 5000,  // the expiry time for the clipboard item
  key: 'greeting' // a key for identifying the clipboard item
});

4. Copy a file (image, document) to the clipboard and store it in the clipboard history.

const fileBlob = new Blob(["File content"], { type: "text/plain" });
clipboard.copyFile(fileBlob, "fileKey", 5000); // Expires after 5000ms

5. Read the most recent text from the clipboard.

const text = await clipboard.paste();

6. Retrieve clipboard history.

// get all
const history = clipboard.getHistory();
console.log(history);
// Get an item by key
const item = clipboard.getHistory("itemKey");
console.log(item);

7. Clear all history:

clipboard.clearHistory();

8. Listen to Clipboard Events:

clipboard.on("copy", (data) => {
  console.log("Copied:", data);
});
clipboard.on("expire", (data) => {
  console.log("Expired:", data);
});

9. Checks if clipboard access is supported.

if (Clipify.isClipboardSupported()) {
  console.log("Clipboard API is supported!");
} else {
  console.log("Clipboard API is not supported.");
}