copyshareify-js
Advanced tools
Readme
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
The npm package copyshareify-js receives a total of 1 weekly downloads. As such, copyshareify-js popularity was classified as not popular.
We found that copyshareify-js demonstrated a healthy version release cadence and project activity because the last version was released less than 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
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.