Clipify is a lightweight JavaScript/TypeScript library designed for enhanced clipboard management. It provides extended functionality for handling clipboard data, including text and files, maintaining a clipboard history, managing item expiry, and supporting event-driven clipboard updates.
- 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
copyorexpire. - Clear History: Easily clear all stored clipboard history.
- Browser Compatibility Check: Detect clipboard API support in the browser.
npm install clipifyyarn add clipifyAlternatively, you can use it directly in your browser via a CDN:
<script src="https://cdn.jsdelivr.net/npm/clipify@1.1.0"></script>import Clipify from 'clipify';const clipboard = new Clipify();Copies text to the clipboard and stores it in the history.
clipboard.copy({
text: 'Hello, world!',
expiryTime: 5000, // Expires after 5000ms
key: 'greeting'
});Stores files in the clipboard history.
const fileBlob = new Blob(["File content"], { type: "text/plain" });
clipboard.copyFile(fileBlob, "fileKey", 10000); // Expires after 10000msRetrieves the most recent clipboard content.
const text = await clipboard.paste();
console.log(text);Access all stored clipboard items or specific ones by their key.
// Get all history
const history = clipboard.getHistory();
console.log(history);
// Get specific item
const item = clipboard.getHistory("greeting");
console.log(item);Removes all clipboard history items.
clipboard.clearHistory();Listen to clipboard events (copy, expire).
clipboard.on("copy", (data) => {
console.log("Copied:", data);
});
clipboard.on("expire", (data) => {
console.log("Expired:", data);
});Verify if the browser supports clipboard APIs.
if (Clipify.isClipboardSupported()) {
console.log("Clipboard API is supported!");
} else {
console.log("Clipboard API is not supported.");
}import Clipify from 'clipify';
const clipboard = new Clipify();
// Copy text
clipboard.copy({
text: "Important Note",
expiryTime: 6000, // Expires after 6000ms
key: "note"
});
// Listen for copy events
clipboard.on("copy", (data) => {
console.log(`Copied to clipboard: ${data}`);
});
// Get specific clipboard history item
const note = clipboard.getHistory("note");
console.log("Retrieved clipboard item:", note);
// Clear all clipboard history
clipboard.clearHistory();Here’s an example demonstrating how to use Clipify in a browser-based project:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>clipify Example</title>
</head>
<body>
<button id="copy-btn">Store Clipboard</button>
<button id="history-btn">Retrieve Clipboard</button>
<script src="https://cdn.jsdelivr.net/npm/clipify@1.1.0"></script>
<script>
const clipify = new Clipify();
document.getElementById('copy-btn').addEventListener('click', () => {
const textToStore = 'Clipboard Text Example';
clipboard.copy({
text: textToStore
});
clipify.copy(textToCopy);
alert('Clipboard item stored!');
});
document.getElementById('history-btn').addEventListener('click', () => {
const history = clipboard.getHistory();
console.log(history);
});
</script>
</body>
</html>Clipify uses the Clipboard API to manage clipboard actions. Ensure the browser supports navigator.clipboard for full functionality.
Contributions, issues, and feature requests are welcome! Please submit them via GitHub Issues.
Clipify is licensed under the MIT License - see the LICENSE file for details.