react-copy-to-clipboard-component v1.0.6

# React Copy to Clipboard Component - Just in One Click!

A lightweight and easy-to-use React component to copy text to the clipboard with just one click.

Features

• Simple Integration: Easily integrate into any React project.
• Minimal Dependencies: No external CSS or libraries required.
• Customizable: Set custom text length, title display, and inline styles.

Installation

Install the component via npm:

npm install react-copy-to-clipboard-component

Usage

Import and use the CopyToClipboard component in your React project:

import React from 'react';
import { CopyToClipboard } from 'react-copy-to-clipboard-component';
const App = () => (
<div>
    <h1>Copy to Clipboard Example</h1>
    <CopyToClipboard textToCopy="Hello World" />
</div>
);
export default App;

Demo

Here's a quick demo of the CopyToClipboard component in action:

Props

• textToCopy (string): The text to be copied to the clipboard.
• textLength (number, optional): The maximum length of the displayed text. If not provided, the full text will be displayed.
• showTitle (boolean, optional): Whether to show the full text as a title on hover. Default is false.
• customStyle (object, optional): Custom inline styles for the span element. Default is an empty object.

Example

import React from 'react';
import { CopyToClipboard } from 'react-copy-to-clipboard-component';

const ExampleComponent = () => {
return (
<div>
     <h2>Copy to Clipboard Demo</h2>
	     <CopyToClipboard
	      textToCopy="This is the text to copy!"
	       textLength={10}
	       showTitle={true}
	        />
	      </div>
     );
   };
 export default ExampleComponent;

Demo 2

Here's a quick demo of the CopyToClipboard component in action with the textLength and showTitle props: In this demo, you can see how the component truncates the text to the specified length and displays the full text as a title on hover.

License

Copyright © 2024, Sonu Mahto. Released under the MIT License