@morioh/r-clipboard
v1.0.0
Published
Clipboard React Hooks
Downloads
2
Readme
use Clipboard React Hooks
Install
npm i @morioh/r-clipboard
import useClipboard from "@morioh/r-clipboard";
export default function App() {
const address = '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48';
const [isCopied, toClipboard] = useClipboard();
return (
<div className="space-y-4 px-6 py-4">
<div className="relative mt-1 flex rounded-md shadow-sm">
<input
type="text"
readOnly
value={address}
className="block w-full rounded-md border-gray-300 p-2.5 text-sm text-gray-900 transition focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-indigo-500 dark:focus:ring-indigo-500"
/>
<div className="absolute inset-y-0 right-1 flex items-center">
<button
type="button"
onClick={() => toClipboard(address)}
className="-ml-py inline-flex items-center rounded px-3 py-2 text-sm font-medium transition hover:bg-indigo-500 hover:text-white focus:outline-none focus:ring-1 focus:ring-indigo-500">
{isCopied ? <MdCheck className="h-5 w-5"></MdCheck> : <MdContentCopy className="h-5 w-5"></MdContentCopy>}
</button>
</div>
</div>
</div>
);
}
Props
/// <reference types="react" />
export interface IClipboard {
timeout: number; // default 3000ms
debug?: boolean;
message?: string;
format?: string;
onCopy?: (clipboardData: object) => void;
}
export default function useClipboard(config?: IClipboard): [boolean, (text: string) => void];
Contributing
Please refer to each project's style and contribution guidelines for submitting patches and additions. In general, we follow the "fork-and-pull" Git workflow.
- Fork the repo on GitHub
- Clone the project to your own machine
- Commit changes to your own branch
- Push your work back up to your fork
- Submit a Pull request so that we can review your changes
NOTE: Be sure to merge the latest from "upstream" before making a pull request!
Community
Stay up to date on the development of Morioh UI and reach out to the community with these helpful resources.
Follow @codek_tv and @im_a_developer on Twitter.
Follow Morioh and React Developers on FaceBook.
Join the official Discord room: https://discord.gg/sqxU6un.