react-code-copy-block

Installation

Install with:

npm install --save react-code-copy-block

Usage

import ReactCodeCopyBlock from 'rect-code-copy-block';
 
...
 
render() {
  return (
    <div>
      ...
      <ReactCodeCopyBlock sLanguage="javascript">
        var array1 = ['a', 'b', 'c'];
 
        array1.forEach(function(element) {
        console.log(element);
        });
      </ReactCodeCopyBlock>
    </div>
  )
}

Description

A useful React component that combines react-copy-to-clipboard, react-toastify, and react-syntax-highlighter to bring you copiable code snippets with popup feedback:

Works on Desktop, Mobile, and Tablet - the styles will make it so that the code field fills the width of it's container! (Looks nicest within fixed with or max-width containers.)

Works great in Gatsby JS blogs! (At least for .js style posts; won't work in markdown posts of course!)

Styling

Styles are Monokai-ish and with default as follows:

.reactCodeCopyBlock--Container {
  position: relative;
}
 
.reactCodeCopyBlock--Button {
  cursor: pointer;
    background-image: gray;
    border-radius: 60px;
  box-sizing: border-box;
    color: gray;
    display: block;
    font: 1.125rem 'Montserrat', Arial, sans-serif; /*18*/
  font-weight: bold;
    height: 60px;
    margin: 0 auto;
    padding: 6px;
    position: absolute;
  text-decoration: none;
    width: 60px;
    z-index: 999;
  right: 10px;
  bottom: 10px;
}
 
.reactCodeCopyBlock--Button span {
    align-items: center;
    background: #ffffff;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    height: 100%;
    transition: background .5s ease;
    width: 100%;
}
 
.reactCodeCopyBlock--Button:hover span {
    background: white;
}
 
.reactCodeCopyBlock--Notification {
  background: gray;
  color: #ffffff;
}