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.