@roo-app/react-code-block NPM

React Code Block

Installation

Install with your favorite package manager

# yarn
yarn add @roo-app/react-code-block
# pnpm
pnpm i @roo-app/react-code-block
# npm
npm i @roo-app/react-code-block

Usage

In order to use CodeBlock, simply import and use in a component:

import CodeBlock from "@roo-app/react-code-block";
import { themes } from "prism-react-renderer";

const codeBlock = `
const GroceryItem: React.FC<GroceryItemProps> = ({ item }) => {
  return (
    <div>
      <h2>{item.name}</h2>
      <p>Price: {item.price}</p>
      <p>Quantity: {item.quantity}</p>
    </div>
  );
}
`;
function ReactCodeBlockExample() {
  return (
    <CodeBlock
      code={codeBlock}
      theme={themes.vsDark}
      language="tsx"
      onCopy={(value) => {
        console.log(value);
      }}
    />
  );
}

export default ReactCodeBlockExample;

Props

CodeBlock properties extends HighlightProps from prism-react-renderer. Outside of the existing properties we expose:

Prop name	Type	Description	Example	Required
`highlightLines`	`Array<number>`	The line numbers you want to highlight	1,5,7	No
`filename`	`string`	The filename to show at the top of the code block	MyFile.tsx	No
`showLineNumbers`	`boolean`	To show line number or not	`false`	No
`showFileIcon`	`boolean`	To show the icon left of the filename - must have filename	`false`	No
`onCopy`	`(value: string) => void`	Callback if user taps on the copy logo		No