React Code Block

• Installation
• Usage
• Props
• Icons
• Demo

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

Icons

We support a handful of filetype icons. Here is the current list:

• jsx
• tsx
• swift
• kotlin
• objectivec
• rust
• graphql
• go
• markdown
• python

Demo

You can find a demo on my website or go to the example/ directory and run it there.