Construct Customizable Code Snippets with React Code Block

Description:

React Code Block is an open-source React components library that provides a set of unstyled components for building customizable code blocks.

Developers can easily construct code snippets with features like syntax/line/word highlighting, line numbers, and more. The key advantage is that the components come unstyled, so you have full control over the styling.

How to use it:

1. Install and import.

# NPM
$ npm i react-code-block prism-react-renderer

import { CodeBlock } from 'react-code-block';

2. Display your code snippets in the code block.

function CodeBlockDemo() {
  return (
    <CodeBlock code="console.log('ReactScript')" language="js">
      <CodeBlock.Code className="bg-black">
        <CodeBlock.LineContent>
          <CodeBlock.Token />
        </CodeBlock.LineContent>
      </CodeBlock.Code>
    </CodeBlock>
  );
}

3. Apply your own styles to the code block.

function CodeBlockDemo({ code, language }) {
  return (
    <CodeBlock code={code} language={language}>
      <CodeBlock.Code className="customCssClasses">
        <CodeBlock.LineContent>
          <CodeBlock.Token />
        </CodeBlock.LineContent>
      </CodeBlock.Code>
    </CodeBlock>
  );
}
const code = `
  console.log('ReactScript')
`;
<CodeBlockDemo code={code} />;

4. Show line numbers.

function CodeBlockDemo({ code, language }) {
  return (
    <CodeBlock code={code} language={language}>
      <CodeBlock.Code className="bg-gray-900 p-6 rounded-xl shadow-lg">
        <div className="table-row">
          <CodeBlock.LineNumber className="table-cell pr-4 text-sm text-gray-500 text-right select-none" />
          <CodeBlock.LineContent className="table-cell">
            <CodeBlock.Token />
          </CodeBlock.LineContent>
        </div>
      </CodeBlock.Code>
    </CodeBlock>
  );
}

5. Highlight lines & words.

function CodeBlockDemo({ code, language }) {
  return (
    <CodeBlock code={code} language={language} lines={['4:6', 8]}>
      <CodeBlock.Code className="bg-gray-900 py-6 rounded-xl shadow-lg">
        {({ isLineHighlighted }) => (
          <div
            className={`table-row ${
              isLineHighlighted ? 'bg-violet-500/30' : 'opacity-60'
            }`}
          >
            <CodeBlock.LineNumber
              className={`table-cell pl-6 pr-4 text-sm text-right select-none ${
                isLineHighlighted ? 'text-gray-300' : 'text-gray-500'
              }`}
            />
            <CodeBlock.LineContent className="table-cell w-full pr-6">
              <CodeBlock.Token />
            </CodeBlock.LineContent>
          </div>
        )}
      </CodeBlock.Code>
    </CodeBlock>
  );
}

function CodeBlockDemo({ code, language }) {
  return (
    <CodeBlock code={code} language={language} words={['/greet/4:8', 'target']}}>
      <CodeBlock.Code className="bg-gray-900 p-6 rounded-xl shadow-lg">
        <CodeBlock.LineContent>
          <CodeBlock.Token>
            {({ isTokenHighlighted, children }) => (
              <span
                className={
                  isTokenHighlighted
                    ? 'bg-violet-500/20 rounded-md px-1 py-0.5'
                    : ''
                }
              >
                {children}
              </span>
            )}
          </CodeBlock.Token>
        </CodeBlock.LineContent>
      </CodeBlock.Code>
    </CodeBlock>
  );
}

6. Add a copy to clipboard button to the code block.

import { CodeBlock } from 'react-code-block';
import { useCopyToClipboard } from 'react-use';
function CodeBlockDemo({ code, language }) {
  const [state, copyToClipboard] = useCopyToClipboard();
  const copyCode = () => {
    // Logic to copy `code`
    copyToClipboard(code);
  };
  return (
    <CodeBlock code={code} language={language}>
      <div className="relative">
        <CodeBlock.Code className="bg-gray-900 !p-6 rounded-xl shadow-lg">
          <div className="table-row">
            <CodeBlock.LineNumber className="table-cell pr-4 text-sm text-gray-500 text-right select-none" />
            <CodeBlock.LineContent className="table-cell">
              <CodeBlock.Token />
            </CodeBlock.LineContent>
          </div>
        </CodeBlock.Code>
        <button
          className="bg-white rounded-full px-3.5 py-1.5 absolute top-2 right-2 text-sm font-semibold"
          onClick={copyCode}
        >
          {state.value ? 'Copied!' : 'Copy code'}
        </button>
      </div>
    </CodeBlock>
  );
}
export default CodeBlockDemo;

Preview: