Custom functionality for copy button in CodeBlock component

[rmatuszczakp]

Hello team, I have a question regarding the CodeBlock component . The component includes its own copy button.

Is there a way to hide this button, or give it a custom functionality? My team currently has a copy button for our code snippets that has a special functionality of doing certain string replacements when used. For example, it will replace a by-default hidden auth token with the actual value.

I couldn't find anything about it in the docs. I guess either hiding or customizing would be good for us.

[shleewhite]

Hi @rmatuszczakp,

Thanks for posting this! Would a copyTextFormatter prop work for your use case? It would work like this:

const myCodeBlock = () => {
  const myCode = `const id = XXXX`;
  
  return (
    <CodeBlock
      code={myCode}
      language='javascript'
      copyTextFormatter={(myCode) => {
          const formattedCode = myCode;
          // do something to the string
          return formattedCode;
      }}
   />
  )
}

[rmatuszczakp]

Hi @shleewhite yes that would definitely work!

[rmatuszczakp]

When do you think that could become available?

[shleewhite]

I have started a PR to add the prop: #2703

I will follow up again once it is merged and the new CodeBlock package is released on npm.

[nkrantz]

Hi @rmatuszczakp - the PR has been merged.