DEV Community

HichemTech
HichemTech

Posted on

Elevate Your Buttons with CopyShareify-js: Copy, Share, and More!

Are you tired of having bland and monotonous buttons on your website? Want to offer users a more interactive experience? Well, you're in luck! Say hello to the CopyShareify-js JavaScript library, a game-changer that transforms ordinary buttons into dynamic tools for various actions, such as copying content, sharing on social media, and beyond.

The Power of CopyShareify-js

CopyShareify-js is a versatile JavaScript library that empowers you to take your buttons to the next level. Imagine effortlessly adding copy and share functionality to your buttons, allowing users to perform actions like never before. Whether it's duplicating text, sharing links, or even copying images, CopyShareify-js has you covered.

Features That Shine

  • Seamless Integration: Enhance your website's functionality by integrating copy and share features seamlessly into your buttons.

  • Copy Any Content: Copy strings, HTML elements, and even images to the clipboard with a single click.

  • Customizable Actions: Tailor the behavior of your buttons based on your unique requirements, offering a personalized experience.

  • Easy Integration: No need to manually add complex event listeners. CopyShareify-js simplifies the integration process for you.

Simple Installation Options

Getting started with CopyShareify-js is a breeze. Choose the installation method that suits you best:

npm install copyshareify-js
Enter fullscreen mode Exit fullscreen mode
  • CDN: Incorporate CopyShareify-js directly from a CDN by adding this script tag to your HTML:
<script src="https://cdn.jsdelivr.net/gh/HichemTab-tech/CopyShareify-js@1.3.2/dist/copyshareify.min.js"></script>
Enter fullscreen mode Exit fullscreen mode
  • Local Download: If you prefer hosting the library locally, download the latest release from the source code and include it in your project:
<script src="path/to/copyshareify.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

Effortless Usage

Integrating CopyShareify-js into your buttons is a breeze, offering you multiple ways to implement its functionality:

HTML Attribute Method

Use HTML attributes to define actions and configure options:

<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>
Enter fullscreen mode Exit fullscreen mode

Individual Element Method

Trigger CopyShareify-js on individual elements with custom options:

<button id="copyButton">Copy Text</button>
<button id="shareButton">Share Link</button>

<script>
  $('#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>
Enter fullscreen mode Exit fullscreen mode

Versatile Selection Options

CopyShareify-js offers flexibility in selecting content to copy or share:

  • Direct String
  • HTML Input Selector
  • HTML Element Selector
  • HTML Image Selector

Explore the Possibilities!

Get ready to amplify user engagement and interaction on your website. Spice up those buttons and empower your users with CopyShareify-js. Check out the GitHub repository to dive into the possibilities!

Top comments (0)