https://github.com/hichemtab-tech/copyshareify-js
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.
https://github.com/hichemtab-tech/copyshareify-js
button-actions clipboard copy-content customizable-actions dom-manipulation frontend-development html html-elements image-copying javascript javascript-library jquery-plugin share-content social-media-sharing ui-components utility-library web-development web-share-api
Last synced: about 1 month ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/hichemtab-tech/copyshareify-js
- Owner: HichemTab-tech
- License: mit
- Created: 2023-07-11T22:34:34.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2023-08-30T07:09:23.000Z (over 1 year ago)
- Last Synced: 2025-03-30T20:02:05.620Z (about 2 months ago)
- Topics: button-actions, clipboard, copy-content, customizable-actions, dom-manipulation, frontend-development, html, html-elements, image-copying, javascript, javascript-library, jquery-plugin, share-content, social-media-sharing, ui-components, utility-library, web-development, web-share-api
- Language: JavaScript
- Homepage: https://hichemtab-tech.github.io/CopyShareify-js
- Size: 531 KB
- Stars: 10
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# CopyShareify-js
**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.
## Features
- Seamlessly integrate copy and share functionality into buttons on your web pages
- Copy strings, HTML elements, and even images to the clipboard
- Customize the action behavior based on your specific requirements
- Easy way to integrate without manually add the events.
## Installation
### npm
You can install CopyShareify-js via npm:
```bash
npm install copyshareify-js
```
### CDN
You can also include CopyShareify-js directly from a CDN by adding the following script tag to your HTML file:
```HTML
```
### Local Download
If you prefer to host the library locally, you can download the latest release from the source code and include it in your project:
```HTML
```
## Usage
### HTML Attribute Method
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.
```html
Your Page Title
Copy Text
Share Link
// Initialize CopyShareify on the buttons
$('[data-action]').CopyShareify();
```
### Individual Element Method
Alternatively, you can trigger CopyShareify on individual elements by passing an options object:
```html
Your Page Title
Copy Text
Share Link
// 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',
});
```
### Selecting the Text
CopyShareify-js provides multiple ways to select the text to be copied or shared:
- **String**: You can directly specify a string value to be copied or shared.
- **HTML Input Selector**: You can select the text from an - HTML input element by providing the input selector.
- **HTML Element Selector**: You can select the text from an HTML element by providing the element selector.
- **HTML Image Selector**: You can select an image to be copied or shared by providing the image selector.
Here's an example of how to use CopyShareify-js with different selection options:
```html
Your Page Title
Copy Text
Share Link
This is a paragraph text
Copy Input Text
Copy Paragraph Text
Copy Image
// Initialize CopyShareify on the buttons
$('[data-action]').CopyShareify();
```
## Options
| 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. |
## Demo
Here's a Demo example :
[Demo](https://hichemtab-tech.github.io/CopyShareify-js/)
## Contributing
Contributions are always welcome!
If you have any ideas, improvements, or bug fixes, please open an issue or submit a pull request.
## Authors
- [@HichemTab-tech](https://www.github.com/HichemTab-tech)
## License
[MIT](https://github.com/HichemTab-tech/CopyShareify-js/blob/master/LICENSE)