click-to-copy

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 <Copyable> </Copyable> 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";
<Copyable>
<h1 title={text} className='u-ellipsise'>
{text} {/*this text is going to be ellipsised due to css. so you can't just select and copy*/}
</h1>
</Copyable>

There is a more detailed explanation in this medium article .