This <CopyButton /> component allows you to copy text to the clipboard on click.
There are two main ways to use the <CopyButton /> component:
The main difference between the two is that the icon-only button is a standalone button, while the text + icon button is a button that wraps around the text you want to copy, letting you click either the text or the icon to copy the text.
| --- | |
| import { siteName } from "~/config/config"; | |
| const links = [ | |
| { | |
| text: 'Home', | |
| href: '/' | |
| }, | |
| { | |
| text: 'About', |
| // Run yarn audit and only exit 0 on critical vulnerabilities (greater than 8) | |
| // https://github.com/yarnpkg/yarn/blob/298e0ea6cea3ab8a610cabf28de3fdf8e7fa8d1f/src/cli/commands/audit.js#L158-L162 | |
| // | |
| // Credit: https://github.com/yarnpkg/yarn/issues/7260#issuecomment-506556626 | |
| stage('Node dependencies') { | |
| steps { | |
| sh script: '/bin/bash -c "yarn audit; [[ $? -ge 8 ]] && exit 1 || exit 0"', label: "Vulnerability audit" | |
| sh script: 'yarn', label: 'Install dependencies' | |
| } |
| <!-- | |
| * Drag and drop your screenshots into the Github PR description, | |
| * then copy and paste the URLs from the generated markdown into the `src`, | |
| * and delete the generated markdown. | |
| --> | |
| <table> | |
| <tr> | |
| <th><strong>Before</strong></th> | |
| <th><strong>After</strong></th> |
| // source http://jsbin.com/mokikomobe | |
| const current_bottle_weight = 1120; | |
| const empty_bottle_weight = 649; | |
| const full_bottle_weight = 1357; | |
| const full_bottle_ml = 700; | |
| const full_bottle_volume = full_bottle_weight - empty_bottle_weight; |
| /** | |
| * Basic input field wrapped with FormField HOC | |
| */ | |
| import React from 'react' | |
| import PropTypes from 'prop-types' | |
| import FormFieldWrapper from './FormFieldWrapper' | |
| import './BasicField.css' |
| [core-date-range] [core-morph-popup] .content-box .footer .btn.close.disabled, | |
| [core-date-range] [core-morph-popup] .content-box .footer .btn.close.disabled.active, | |
| [core-date-range] [core-morph-popup] .content-box .footer .btn.close.disabled.focus, | |
| [core-date-range] [core-morph-popup] .content-box .footer .btn.close.disabled:active, | |
| [core-date-range] [core-morph-popup] .content-box .footer .btn.close.disabled:focus, | |
| [core-date-range] [core-morph-popup] .content-box .footer .btn.close.disabled:hover, | |
| [core-date-range] [core-morph-popup] .content-box .footer .btn.close[disabled], | |
| [core-date-range] [core-morph-popup] .content-box .footer .btn.close[disabled].active, | |
| [core-date-range] [core-morph-popup] .content-box .footer .btn.close[disabled].focus, | |
| [core-date-range] [core-morph-popup] .content-box .footer .btn.close[disabled]:active, |
| // Transmitter | |
| var storedHeight = 0, payload; | |
| setInterval(function() { | |
| var currentHeight = $('.ng-scope').height(); | |
| if (currentHeight == storedHeight) { | |
| return false; | |
| } else { | |
| storedHeight = currentHeight; | |
| payload = JSON.stringify({ height: currentHeight }); |
| // Setup an icon array of name modifer keys + content values | |
| // eg. "pencil": "\e602"; becomes a class of .icon--pencil | |
| $icon-types: ( | |
| "pencil": "\e602", | |
| "ticket": "\e60d", | |
| "cart2": "\e60f", | |
| "credit": "\e627", | |
| "location": "\e612", | |
| "map": "\e634", | |
| "clock": "\e614", |
| { | |
| "AF": { | |
| "name": "Afghanistan" | |
| }, | |
| "AX": { | |
| "name": "Åland Islands" | |
| }, | |
| "AL": { | |
| "name": "Albania" | |
| }, |