Copy

Overview

The Copy extension displays a copy button and attempts to write code to a clipboard when the button is clicked.

type Props = {
  header: React.ReactNode;
  footer: React.ReactNode;
}


class Layout extends React.Component<Props> {
  render() {
    return (
      <div>
        { this.props.header }
        
        <main id="main">
          { this.props.children }
        </main>
        
        { this.props.footer }
      </div>
    )
  }
}
TSX
The click button works only when the code is highlighted by the apply() method. If you use html(), you have to manually handle the click and copy.

Usage

Register the Overlay and Copy extensions:

import { RyuseiLight, Overlay, Copy } from '@ryusei/light';


RyuseiLight.compose( { Overlay, Copy } );
JavaScript

Or import the extension files:

<script src="path-to-the-file/overlay.min.js"></script>
<script src="path-to-the-file/copy.min.js"></script>
HTML

Then, set the copy option to true:

ryuseilight.apply( 'pre', { copy: true } );
JavaScript

Options

The Copy extension accepts some options by providing an object literal instead of true.

OptionDescription
positionDetermines a position where to display the button by topLeft or topRight.
htmlAn HTML string for the button content.
activeHtmlAn HTML string for the button content displayed after the button is clicked.
durationDuration in milliseconds for displaying the activeHTML.
ariaLabelThe value for aria-label of the button.

For example, you can change the button text like this:

ryuseilight.apply( 'pre', { 
  copy: {
    html      : 'Copy code',
    activeHtml: 'Copied!',
  },
} );
JavaScript

These values accept an HTML string so that you can set icons or whatever you want.

ryuseilight.apply( 'pre', { 
  copy: {
    html      : '<svg>...</svg>',
    activeHtml: '<svg>...</svg>',
  },
} );
JavaScript