Guide
Components
Code Snippet

CodeSnippet Component

ℹ️

The CodeSnippet component is a React component designed to showcase and highlight code snippets. It provides a user-friendly interface for displaying code in either TypeScript (tsx) or JavaScript ( jsx) format. The component comes with options to copy the code to the clipboard and toggle the visibility of the code snippet.

Example Preview

CodeSnippet

Usage

Import the CodeSnippet component and use it in your React application:

import { CodeSnippet } from "@/@core";
 
// Use the CodeSnippet component in your JSX
const MyComponent = () => {
  const code = {
    tsx: `// TypeScript code here`,
    jsx: `// JavaScript code here`,
  };
 
  return (
    <CodeSnippet
      id="unique-id"
      code={code}
      title="Code Example"
      className="custom-class"
      maxHeight={300}
    >
      {/* Your content goes here */}
    </CodeSnippet>
  );
};
 
export default MyComponent;

Props

  • id (string): A unique identifier for the component.
  • code (object): An object containing the TypeScript (tsx) and JavaScript (jsx) code snippets.
  • title (string): The title to be displayed above the code snippet.
  • children (ReactNode): The content to be displayed above the code snippet.
  • className (string): Additional CSS classes to be applied to the component.
  • maxHeight (number): The maximum height of the code snippet container.

Features

  • Toggle visibility of the code snippet.
  • Copy code to clipboard.
  • Switch between TypeScript and JavaScript code snippets.
  • Responsive design for mobile screens.

Examples

Check the provided MyComponent example for a basic usage demonstration.

Feel free to customize the component and its props based on your specific needs.

ChipCollapse