React component helps ease the work of copying to clipboard using render prop.
npm install @uxui/copy-to-clipboard-react> React component helps ease the work of copying to clipboard using render prop.
``bash`
npm install --save @uxui/copy-to-clipboard-react
It uses render prop, you render whatever you want to based on the state of CopyToClipboard.
`jsx
import * as React from 'react';
import CopyToClipboard from 'copy-to-clipboard-react';
class CopyToClipboard extends React.Component {
render() {
return (
{({ copied, copy, turnOffCopied }) => (
// JSX goes here
)}
);
}
}
`
Live demo can be found here.
- copy: (content: string) => void: copy any thing passed to param content to clipboard.copied: boolean
- : a state will get truthy after copy() gets called.turnOffCopied: () => void
- : simply set copied to false.
- callback: (content?: string) => void: callback after copy() get called.
Hook is supported as React 16.8.x came out.
`jsx
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
);
};
``
MIT © zlatanpham