react-copy-code

react-copy-code is a component that will add a "copy to clipboard" button to 'pre code' blocks that are rendered as it's children. Children can be jsx, other components, or an html string by setting the innerHtml prop. If the highlight prop is set, it also uses highlight.js to add the proper classes needed for highlighting code.

Installation

npm install react-copy-code

Usage

import CodeBlock from 'react-copy-code';

const App = () => (
   <CodeBlock>
      {write the rest of your component here}
      {using as many pre code blocks you want}
   </CodeBlock>
);

import CodeBlock from 'react-copy-code';

const App = () => (
   <CodeBlock innerHtml>
      {html string is passed in as the only child}
   </CodeBlock>
);

Props

name	type	default	description
element	JSX intrinsic Element	"div"	Allows you to specify which element the component renders as
innerHtml	bool	false	If this is set to true, it is expecting the html string to be passed as the only child. Warning: uses dangerouslySetInnerHTML so be sure you trust the source
highlight	bool	false	If this is set to true, It will use highlight.js to add classes that correspond to highlight.js css theme. Checkout documentation for highlight.js for more details
svg	ReactComponent	null	Allows you to pass in any SVG based React Component as the button icon
onCopy	function	no-op	Allows you to pass in a function to run when the copy button is clicked

Contributing

In lieu of a formal styleguide, please format your code using 'prettier' prior to commit.

Release History