Assemble Customizable Code Snippets with React Code Block

React Code Block is an open-source React parts library that gives a set of unstyled parts for constructing customizable code blocks.

Builders can simply assemble code snippets with options like syntax/line/phrase highlighting, line numbers, and extra. The important thing benefit is that the parts come unstyled, so you will have full management over the styling.

The right way to use it:

1. Set up and import.

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

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

2. Show your code snippets within the code block.

perform 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 personal kinds to the code block.

perform 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. Present line numbers.

perform 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. Spotlight strains & phrases.

perform CodeBlockDemo({ code, language }) {
  return (
    <CodeBlock code={code} language={language} strains={['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>
  );
}

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

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

import { CodeBlock } from 'react-code-block';
import { useCopyToClipboard } from 'react-use';
perform CodeBlockDemo({ code, language }) {
  const [state, copyToClipboard] = useCopyToClipboard();
  const copyCode = () => {
    // Logic to repeat `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.worth ? 'Copied!' : 'Copy code'}
        </button>
      </div>
    </CodeBlock>
  );
}
export default CodeBlockDemo;

Preview:

Obtain Particulars:

Creator: blenderskool

Reside Demo: View The Demo

Obtain Hyperlink: Obtain The Supply Code

Official Web site: https://github.com/blenderskool/react-code-block

License: MIT