code6 min read

4 likes

Copy Code to Clipboard with React Markdown

Extend react-markdown to copy code blocks to clipboard.

ByAmir ArdalanMarch 21, 2022

Introduction to Custom Components with React Markdown
Targeting the Pre Element
Adding the Copy Button and Click Handler
Accessing the Raw Code Data for Copying
Setting up State for Our 'Copied' UI Element
Putting it all Together
Final Thoughts

Share on X

In this guide, I will show you how to implement a copy code to clipboard feature with react-markdown using TypeScript. Once again, we will be utilizing the custom component feature.

Introduction to Custom Components with React Markdown

The official documentation shows this example for overriding various elements in your markdown.

"The keys in components are HTML equivalents for the things you write with markdown. Every component will receive a node (Object). This is the original hast element being turned into a React element."

tsx

1// Markdown.tsx
2import ReactMarkdown from 'react-markdown'
3
4<ReactMarkdown
5  components={{
6    // Map `h1` (`# heading`) to use `h2`s.
7    h1: 'h2',
8    // Rewrite `em`s (`*like so*`) to `i` with a red foreground color.
9    em: ({node, ...props}) => <i style={{color: 'red'}} {...props} />
10  }}
11/>
12

This is an incredibly powerful feature. It allows us to select any HTML element rendered from markdown and modify it.

For the sake of this guide, we are going to be targeting the pre element which wraps code blocks.

Targeting the Pre Element

Let's start by setting up a <pre> element and passing it the existing props to keep the existing functionality of our code blocks. This will set us up to be able to add our button to copy the code. We'll also create a type interface for our custom node object.

tsx

1// Markdown.tsx
2import ReactMarkdown from 'react-markdown'
3
4interface PreNode {
5  node?: any
6  children: Array<object>
7  position: object
8  properties: object
9  tagName: string
10  type: string
11}
12
13<ReactMarkdown
14  components={{
15    pre: (pre: PreNode) => {
16      return <pre {...pre}></pre>
17    }
18  }}
19/>
20

At this point, everything should look the same... we are overriding the existing <pre> elements with the same thing that was rendering before. But now we have a place to put our custom code.

Adding the Copy Button and Click Handler

Here we will add a wrapping div around the <pre> tag. This will give us a way to absolutely position the copy button over the code block.

tsx

1// Markdown.tsx
2
3...
4<ReactMarkdown
5  components={{
6    pre: (pre: PreNode) => {
7
8      return (
9        <div className="copyCode">
10          <button onClick={()=> handleCopyCode()} />
11          <pre {...pre}></pre>
12        </div>
13      )
14    }
15  }}
16/>
17

And the corresponding CSS, for this guide, I am using Emotion, but it should be simple enough to refactor to whatever type of CSS you're using.

typescript

1// Markdown.tsx
2import ReactMarkdown from 'react-markdown'
3
4const styleMarkdown = css({
5  '.copyCode': {
6    position: 'relative',
7    button: {
8      zIndex: 1,
9      position: 'absolute',
10      top: 13,
11      right: -10,
12      backgroundColor: 'var(--code-highlight)',
13      borderRadius: 5,
14      textTransform: 'uppercase',
15      fontSize: 13,
16      padding: '.1rem .4rem .2rem',
17      color: 'var(--color-bg)',
18      '&:after': {
19        content: '"📋"',
20      },
21    },
22    '&.active button:after': {
23      content: '"☑️"'
24    }
25  }
26})
27
28<ReactMarkdown
29  css={styleMarkdown}
30...
31

Accessing the Raw Code Data for Copying

Let's create a variable that stores the raw data for this code block. Using standard dot notation, we're accessing the raw string from the underlying markdown. This string, along with other useful data, is passed to the node object from the base Hast element.

tsx

1// Markdown.tsx
2
3...
4<ReactMarkdown
5  css={styleMarkdown}
6  components={{
7    pre: (pre: PreNode) => {
8      const codeChunk = pre.node.children[0].children[0].value
9      
10      return (
11        <div className="copyCode">
12          <button onClick={()=> handleCopyCode(codeChunk)} />
13          <pre {...pre}></pre>
14        </div>
15      )
16    }
17  }}
18/>
19

Setting up State for Our 'Copied' UI Element

Now let's import useState and set up our state for styling the button to notify the user that the code has been copied to their clipboard. Note that the className is being refactored to support a ternary linked to our state.

We'll initially set the state to false, and then true once the button is clicked along with our code to copy the codeChunk to the clipboard.

Lastly, we will utilize a setTimeout to display the "copied" styling for 5 seconds. This simple feedback makes it clear that the code was, in fact, copied.

tsx

1// Markdown.tsx
2import { useState } from 'react'
3
4...
5<ReactMarkdown
6  css={styleMarkdown}
7  components={{
8    pre: (pre: PreNode) => {
9      const codeChunk = pre.node.children[0].children[0].value
10      
11      const [codeCopied, setCodeCopied] = useState(false)
12      const handleCopyCode = (codeChunk: string) => {
13        setCodeCopied(true)
14        navigator.clipboard.writeText(codeChunk)
15        setTimeout(() => {
16          setCodeCopied(false)
17        }, 5000)
18      }
19      return (
20        <div className={codeCopied ? 'copyCode active' : 'copyCode'}>
21          <button onClick={()=> handleCopyCode(codeChunk)} />
22          <pre {...pre}></pre>
23        </div>
24      )
25    }
26  }}
27/>
28

Putting it all Together

We now have a button on each code block that copies the raw code data to clipboard. We're also utilizing a state management hook to visually notify users that the action was successful ✨.

tsx

1// Markdown.tsx
2import { useState } from 'react'
3import ReactMarkdown from 'react-markdown'
4
5const styleMarkdown = css({
6  '.copyCode': {
7    position: 'relative',
8    button: {
9      zIndex: 1,
10      position: 'absolute',
11      top: 13,
12      right: -10,
13      backgroundColor: 'var(--code-highlight)',
14      borderRadius: 5,
15      textTransform: 'uppercase',
16      fontSize: 13,
17      padding: '.1rem .4rem .2rem',
18      color: 'var(--color-bg)',
19      '&:after': {
20        content: '"📋"',
21      },
22    },
23    '&.active button:after': {
24      content: '"☑️"'
25    }
26  }
27})
28
29interface PreNode {
30  node?: any
31  children: Array<object>
32  position: object
33  properties: object
34  tagName: string
35  type: string
36}
37
38<ReactMarkdown
39  css={styleMarkdown}
40  components={{
41    pre: (pre: PreNode) => {
42      const codeChunk = pre.node.children[0].children[0].value
43      
44      const [codeCopied, setCodeCopied] = useState(false)
45      const handleCopyCode = (codeChunk: string) => {
46        setCodeCopied(true)
47        navigator.clipboard.writeText(codeChunk)
48        setTimeout(() => {
49          setCodeCopied(false)
50        }, 5000)
51      }
52      return (
53        <div className={codeCopied ? 'copyCode active' : 'copyCode'}>
54          <button onClick={()=> handleCopyCode(codeChunk)} />
55          <pre {...pre}></pre>
56        </div>
57      )
58    }
59  }}
60/>
61

Final Thoughts

It's quite simple to extend react-markdown with custom component overrides. Unified provides a lot of out of the box Rehype and Remark plugins which may suit your needs, but there is currently no plugin for copying the markdown code to clipboard. I'm glad I didn't have the temptation to add a dependency to the project when making my own feature was so easy (and fun!).

In addition to react-syntax-highlighter, my custom Next/Image component, and this copy to clipboard feature, I am using rehype-slug, rehype-auto-link-headings, rehype-raw, and remark-gfm. I may write some guides on a few of those plugins and my configurations in the future.

As always, you can find me on Twitter if you have any questions.✌️