npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

copyshareify-js

v1.3.1

Published

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

Downloads

4

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:

  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:

  <script src="https://cdn.jsdelivr.net/gh/HichemTab-tech/[email protected]/dist/copyshareify.min.js"></script>

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:

<script src="path/to/copyshareify.min.js"></script>

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.

<!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>

Individual Element Method

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>

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:

<!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>

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

Contributing

Contributions are always welcome!

If you have any ideas, improvements, or bug fixes, please open an issue or submit a pull request.

Authors

License

MIT