copyshareify-js
Advanced tools
CopyShareify-js is a versatile JavaScript library that enhances buttons with customizable actions. With CopyShareify-js, you can effortlessly transform ordinary buttons into powerful tools that enable various actions, including copying content, sharing on
CopyShareify-js is a versatile JavaScript library that enhances buttons with customizable actions. With CopyShareify-js, you can effortlessly transform ordinary buttons into powerful tools that enable various actions, including copying content, sharing on social media platforms, and more.
You can install CopyShareify-js via npm:
npm install copyshareify-js
You can also include CopyShareify-js directly from a CDN by adding the following script tag to your HTML file:
<script src="https://cdn.jsdelivr.net/gh/HichemTab-tech/CopyShareify-js@1.3.1/dist/copyshareify.min.js"></script>
If you prefer to host the library locally, you can download the latest release from the source code and include it in your project:
<script src="path/to/copyshareify.min.js"></script>
To use CopyShareify-js with HTML attributes, include the necessary dependencies (e.g., jQuery) and the CopyShareify-js script in your HTML file. Use the data-action attribute to specify the action, and other data attributes to configure the options.
<!DOCTYPE html>
<html>
<head>
<title>Your Page Title</title>
<!-- Include the necessary dependencies -->
<script src="path/to/jquery.js"></script>
<script src="path/to/copyshareify.js"></script>
</head>
<body>
<!-- Your HTML content here -->
<button data-action="copy" data-string="Hello, world!">Copy Text</button>
<button data-action="share" data-title="My Page" data-description="Check out this amazing website!" data-string="https://www.example.com">Share Link</button>
<script>
// Initialize CopyShareify on the buttons
$('[data-action]').CopyShareify();
</script>
</body>
</html>
Alternatively, you can trigger CopyShareify on individual elements by passing an options object:
<!DOCTYPE html>
<html>
<head>
<title>Your Page Title</title>
<!-- Include the necessary dependencies -->
<script src="path/to/jquery.js"></script>
<script src="path/to/copyshareify.js"></script>
</head>
<body>
<!-- Your HTML content here -->
<button id="copyButton">Copy Text</button>
<button id="shareButton">Share Link</button>
<script>
// Initialize CopyShareify on the buttons individually
$('#copyButton').CopyShareify({
action: 'copy',
string: 'Hello, world!',
});
$('#shareButton').CopyShareify({
action: 'share',
title: 'My Page',
description: 'Check out this amazing website!',
string: 'https://www.example.com',
});
</script>
</body>
</html>
CopyShareify-js provides multiple ways to select the text to be copied or shared:
Here's an example of how to use CopyShareify-js with different selection options:
<!DOCTYPE html>
<html>
<head>
<title>Your Page Title</title>
<!-- Include the necessary dependencies -->
<script src="path/to/jquery.js"></script>
<script src="path/to/copyshareify.js"></script>
</head>
<body>
<!-- Your HTML content here -->
<button data-action="copy" data-string="Hello, world!">Copy Text</button>
<button data-action="share" data-title="My Page" data-description="Check out this amazing website!" data-string="https://www.example.com">Share Link</button>
<input type="text" id="inputText" value="This is an input value">
<p id="paragraph">This is a paragraph text</p>
<img id="image" src="path/to/image.jpg" alt="Image">
<button data-action="copy" data-html-input-selector="#inputText">Copy Input Text</button>
<button data-action="copy" data-html-element-selector="#paragraph">Copy Paragraph Text</button>
<button data-action="copy" data-html-img-selector="#image">Copy Image</button>
<script>
// Initialize CopyShareify on the buttons
$('[data-action]').CopyShareify();
</script>
</body>
</html>
| Key | Description |
|---|---|
action | Specifies the action to be performed (e.g., "copy" or "share"). |
string | The string value to be copied or shared. |
htmlInputSelector | The selector of the HTML input element from which the text will be copied. |
htmlElementSelector | The selector of the HTML element from which the text will be copied. |
htmlImgSelector | The selector of the HTML image element to be copied. |
title | The title or subject of the content to be shared. |
description | The description or additional information about the content to be shared. |
onActionDone | The callback function to be executed when the action is successfully performed. |
onActionFailed | The callback function to be executed when the action fails or encounters an error. |
Here's a Demo example :
Contributions are always welcome!
If you have any ideas, improvements, or bug fixes, please open an issue or submit a pull request.
FAQs
CopyShareify-js is a versatile JavaScript library that enhances buttons with customizable actions. With CopyShareify-js, you can effortlessly transform ordinary buttons into powerful tools that enable various actions, including copying content, sharing on
We found that copyshareify-js demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.