Copy

Overview

The Copy component 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 components:

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


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

Or import the component 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 component 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