https://github.com/diwakersurya/click-to-copy

A library for component wrapping labels and h1 so that we can click to copy the their text. https://www.npmjs.com/package/click-to-copy
https://github.com/diwakersurya/click-to-copy

click-to-copy clicktocopy copy react-component select-copy-paste select-text

Last synced: 23 days ago
JSON representation

A library for component wrapping labels and h1 so that we can click to copy the their text. https://www.npmjs.com/package/click-to-copy

• Host: GitHub
• URL: https://github.com/diwakersurya/click-to-copy
• Owner: diwakersurya
• License: mit
• Created: 2019-01-12T15:40:25.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2020-05-27T18:46:44.000Z (about 6 years ago)
• Last Synced: 2025-02-28T09:19:34.222Z (over 1 year ago)
• Topics: click-to-copy, clicktocopy, copy, react-component, select-copy-paste, select-text
• Language: JavaScript
• Homepage:
• Size: 6.25 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 22
• Metadata Files:
  • Readme: README.md
  • Contributing: contributing.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

          
# click-to-copy

[![Build Status](https://travis-ci.org/diwakersurya/click-to-copy.svg?branch=master)](https://travis-ci.org/diwakersurya/click-to-copy)[![codecov](https://codecov.io/gh/diwakersurya/click-to-copy/branch/master/graph/badge.svg)](https://codecov.io/gh/diwakersurya/click-to-copy) [![Greenkeeper badge](https://badges.greenkeeper.io/diwakersurya/click-to-copy.svg)](https://greenkeeper.io/)[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

A library for component wrapping labels and h1 so that we can click to copy

their text.

Sometimes, due to ui/visual design constraints, we end up ellipsising(...) the text through css. It looks good, but at the same time, we loose the ability to select-copy-paste the text because whatever we copy is not the complete text but the ellipsised one.

This component solves this problem. You just wrap h1 or label component in ` ` component and it will enable click to copy feature on your label or h1. It picks up the title attribute of your label or h1 and copies that to your clipboard so that you can paste it anywhere you want.

```

let text="this is some very long text which you want to copy";



{text} {/*this text is going to be ellipsised due to css. so you can't just select and copy*/}



```

There is a more detailed explanation in [this medium article](https://medium.com/@diwakersurya/click-to-copy-react-component-f87b7eff3197) .