copy-to-clipboard-react
React component helps ease the work of copying to clipboard using render prop.
Install
npm install --save @uxui/copy-to-clipboard-react
Render Prop Usage
It uses render prop
, you render whatever you want to based on the state of CopyToClipboard
.
import * as React from 'react';
import CopyToClipboard from 'copy-to-clipboard-react';
class CopyToClipboard extends React.Component {
render() {
return (
<CopyToClipboard>
{({ copied, copy, turnOffCopied }) => (
// JSX goes here
)}
</CopyToClipboard>
);
}
}
Live demo can be found here.
Children Function
-
copy: (content: string) => void
: copy any thing passed to paramcontent
to clipboard. -
copied: boolean
: a state will get truthy aftercopy()
gets called. -
turnOffCopied: () => void
: simply setcopied
tofalse
.
Props
-
callback: (content?: string) => void
: callback aftercopy()
get called.
Hook Usage
Hook is supported as React 16.8.x came out.
import React from 'react';
import './App.css';
import { useCopyToClipboard } from '@uxui/copy-to-clipboard-react';
const YourFunctionalComponent = () => {
const { copied, copy, turnOffCopied } = useCopyToClipboard();
return (
// JSX goes here
);
};
License
MIT © zlatanpham