Copying to the clipboard using React, TypeScript & Material UI

It's common in apps to offer a way to "copy to clipboard" so users can paste content.

I whipped up a quick example using TypeScript and React to make such a behavior that can be applied to any React element using the render props pattern.

You can then use it like this, to wrap <Button /> or any other element:

<CopyToClipboard> {({ copy }) => ( <Button variant="contained" color="primary" onClick={() => copy("some text!")} > Copy </Button>  )} </CopyToClipboard> 

This is using the super simple clipboard-copy package.

You can override the <Tooltip /> props using the TooltipProps prop:

<CopyToClipboard TooltipProps={{ title: "Copied XYZ!", leaveDelay: 3000 }}> 

Enjoy!