React-click-copy-code NPM

react-click-copy-code

Copies any child component's code to clipboard. Great for example pages.

Install

yarn add react-click-copy-code

Usage

import React, { Component } from 'react'

import { ClickCopy } from 'react-click-copy-code'

class Example extends Component {
  render () {
    return (
      <ClickCopy>
      {/* Put anything you want in here. Including subcomponents. */}
        <ClickCopy.Items>
        {/* Components to copy go inside here. */}
         <Icon size={'50%'} duotone={true} />
        </ClickCopy.Items>
        {/* Optional Source and Notification friends */}
        <ClickCopy.Source />
        <ClickCopy.Notification />
      </ClickCopy>
    )
  }
}

Properties

ClickCopy

Property	Type	Default	Description
copyText	string	'Click to copy!'	Text shown in notification when ready to copy.
formattingOptions	object	{ showDefaultProps: false }	Any option from react-element-to-jsx-string options
errorText	string	'Oops. Try again.'	Text shown in notification when copy action fails.
onClick	function	Copies text and sets state to success/fail.	Function called when element is clicked. Custom will be called alongside default.
onError	function	Resets state to ready to copy.	Function called when copy action fails. Custom will be called alongside default.
onSuccess	function	Resets state to ready to copy.	Function called when when copy action succeeds. Custom will be called alongside default.
sourceOverwrite	string	-----------	Optional text to be copied to the clipboard in place of the source contained in the Items subcomponent.
successText	string	'Copied!'	Text shown in notification when copy action succeeds.

ClickCopy.Items

This space intentionally left blank — no props for the Items!

ClickCopy.Notification

Property	Type	Default	Description
background	string	#001eff	Set background color of notification overlay.
color	string	white	Set text color of notification overlay.
font	string	monospace	Set font family of notification overlay.
className	string	-----------	Composes with internal classes.
style	object	-----------	Overwrites internal style attributes.

ClickCopy.Source

Property	Type	Default	Description
background	string	#dadadd	Set background color of source box.
color	string	#53535c	Set text color of source box.
font	string	monospace	Set font family of source box.
className	string	----	Composes with internal classes.
style	object	----	Overwrites internal style attributes.

License

copy-to-clipboard create-react-context react-element-to-jsx-string

@everything-registry/sub-chunk-2545 @zalastax/nolb-react-cl

1.1.0

6 years ago

1.0.0

6 years ago