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.
npm install react-copy-code
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>
);
or
import CodeBlock from 'react-copy-code';
const App = () => (
<CodeBlock innerHtml>
{html string is passed in as the only child}
</CodeBlock>
);
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 |
In lieu of a formal styleguide, please format your code using 'prettier' prior to commit.
copy button
is clicked