Designly Blog

React-Markdown - How To Create a Copy Code Button

React-Markdown - How To Create a Copy Code Button

Posted in Full-Stack Development by Jay Simons
Published on June 4, 2022

Markdown is the markup language of choice for tech-savvy bloggers and publishing code samples is commonplace. When creating tutorials (such as this one), it's nice to have a quick way to copy a code block to the clipboard, instead of having to drag-select the code.

This tutorial will use two React libraries: react-markdown and react-syntax-highlighter.

We start with a component called postBody. This is responsible for rendering our markdown as HTML:

import ReactMarkdown from 'react-markdown';
import rehypeRaw from 'rehype-raw';
import remarkGfm from 'remark-gfm';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
import { a11yDark } from 'react-syntax-highlighter/dist/cjs/styles/prism'
import CodeCopyBtn from './codeCopyBtn';

export default function PostBody({ content }) {
    // Add the CodeCopyBtn component to our PRE element
    const Pre = ({ children }) => <pre className="blog-pre">

    return (
                pre: Pre,
                code({ node, inline, className = "blog-code", children, ...props }) {
                    const match = /language-(\w+)/.exec(className || '')
                    return !inline && match ? (
                            {String(children).replace(/\n$/, '')}
                    ) : (
                        <code className={className} {...props}>

And then we'll create a component called codeCopyBtn:

import React from "react";

export default function CodeCopyBtn({ children }) {
    const [copyOk, setCopyOk] = React.useState(false);

    const iconColor = copyOk ? '#0af20a' : '#ddd';
    const icon = copyOk ? 'fa-check-square' : 'fa-copy';

    const handleClick = (e) => {

        setTimeout(() => {
        }, 500);

    return (
        <div className="code-copy-btn">
            <i className={`fas ${icon}`} onClick={handleClick} style={{color: iconColor}} />

And here's the CSS:

.blog-pre {
    margin-bottom: 3em !important;
    -webkit-box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 35px -23px 2px -16px rgba(0, 0, 0, 0);
    box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 35px -23px 2px -16px rgba(0, 0, 0, 0);
    position: relative;

.code-copy-btn {
    color: white;
    position: absolute;
    right: 10px;
    top: -2px;
    font-size: 1.5em;
    cursor: pointer;
    transition: all 0.3s ease-in-out;

.code-copy-btn:hover {
    transform: scale(1.1);
    opacity: 0.9;

I hope you found this tutorial useful. Happy coding!

For more greate information, please Visit our Blog.

Loading comments...