Pre Component

Overview

The Pre component provides a styled preformatted text container with syntax highlighting support and copy functionality. It's designed for displaying code blocks and formatted text.

Basic Usage

import { pre } from '@dashflowx/core'

export default function PreExample() {
  return (
    <pre>
      console.log("Hello, World!");
    </pre>
  )
}

Preview:

console.log("Hello, World!");

Props

Prop	Type	Default	Description
`className`	`string`	`''`	Additional CSS classes
`__src__`	`string`	-	Source file path
`__style__`	`'default' \| 'new-york'`	`'default'`	Style variant
`__withMeta__`	`boolean`	`false`	Whether to show metadata
`__rawString__`	`string`	-	Raw string content
`__bunCommand__`	`string`	-	Bun command
`__npmCommand__`	`string`	-	NPM command
`__yarnCommand__`	`string`	-	Yarn command
`__pnpmCommand__`	`string`	-	PNPM command

Examples

Basic Code Block

import { pre } from '@dashflowx/core'

export default function BasicCodeBlock() {
  return (
    <pre>
      console.log("Hello, World!");
    </pre>
  )
}

Preview:

console.log("Hello, World!");

JavaScript Code

import { pre } from '@dashflowx/core'

export default function JavaScriptCode() {
  return (
    <pre>
      function greet(name) {
        return `Hello, ${name}!`;
      }
      
      console.log(greet("World"));
    </pre>
  )
}

Preview:

function greet(name) { return Hello, ${name}!; }
console.log(greet("World"));

TypeScript Code

import { pre } from '@dashflowx/core'

export default function TypeScriptCode() {
  return (
    <pre>
      interface User {
        id: number;
        name: string;
        email: string;
      }
      
      const user: User = {
        id: 1,
        name: "John Doe",
        email: "john@example.com"
      };
    </pre>
  )
}

Preview:

interface User { id: number; name: string; email: string; }
const user: User = { id: 1, name: "John Doe", email: "john@example.com" };

CSS Code

import { pre } from '@dashflowx/core'

export default function CSSCode() {
  return (
    <pre>
      .button {
        background-color: #007bff;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
      }
      
      .button:hover {
        background-color: #0056b3;
      }
    </pre>
  )
}

Preview:

.button { background-color: #007bff; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; }
.button:hover { background-color: #0056b3; }

HTML Code

import { pre } from '@dashflowx/core'

export default function HTMLCode() {
  return (
    <pre>
      <div class="container">
        <h1>Welcome to our website</h1>
        <p>This is a sample HTML structure.</p>
        <button class="btn">Click me</button>
      </div>
    </pre>
  )
}

Preview:

<div class="container"> <h1>Welcome to our website</h1> <p>This is a sample HTML structure.</p> <button class="btn">Click me</button> </div>

JSON Data

import { pre } from '@dashflowx/core'

export default function JSONData() {
  return (
    <pre>
      {
        "name": "John Doe",
        "age": 30,
        "email": "john@example.com",
        "address": {
          "street": "123 Main St",
          "city": "New York",
          "zipCode": "10001"
        }
      }
    </pre>
  )
}

Preview:

{ "name": "John Doe", "age": 30, "email": "john@example.com", "address": { "street": "123 Main St", "city": "New York", "zipCode": "10001" } }

Custom Styled Code Block

import { pre } from '@dashflowx/core'

export default function CustomStyledCodeBlock() {
  return (
    <pre className="border border-blue-500 rounded-lg p-4">
      console.log("Custom styled code block");
    </pre>
  )
}

Preview:

console.log("Custom styled code block");

Common Use Cases

Documentation Code Examples

const docCodeExample = (
  <pre>
    npm install @dashflowx/core
  </pre>
);

API Response Examples

const apiResponse = (
  <pre>
    {
      "status": "success",
      "data": {
        "users": [
          {"id": 1, "name": "John"},
          {"id": 2, "name": "Jane"}
        ]
      }
    }
  </pre>
);

Configuration Examples

const configExample = (
  <pre>
    {
      "database": {
        "host": "localhost",
        "port": 5432,
        "name": "myapp"
      }
    }
  </pre>
);

Error Logs

const errorLog = (
  <pre>
    Error: Cannot read property 'name' of undefined
        at Object.render (App.js:15:20)
        at ReactDOM.render (react-dom.js:12345:67)
  </pre>
);

Best Practices

1. Proper Indentation

Maintain consistent indentation in code blocks.

// ✅ Good - Consistent indentation
<pre>
  function example() {
    return "Hello, World!";
  }
</pre>

// ❌ Avoid - Inconsistent indentation
<pre>
function example() {
return "Hello, World!";
}
</pre>

2. Appropriate Content

Use pre for code and formatted text only.

// ✅ Good - Code content
<pre>
  console.log("Hello, World!");
</pre>

// ❌ Avoid - Regular text
<pre>
  This is just regular text that doesn't need preformatting.
</pre>

3. Copy Functionality

Include copy functionality for code blocks.

// ✅ Good - With copy functionality
<pre __rawString__="console.log('Hello, World!');">
  console.log("Hello, World!");
</pre>

// ❌ Avoid - Without copy functionality
<pre>
  console.log("Hello, World!");
</pre>

4. Responsive Design

Make code blocks responsive for different screen sizes.

// ✅ Good - Responsive
<pre className="overflow-x-auto">
  Very long code line that might overflow on small screens
</pre>

// ❌ Avoid - Fixed width
<pre className="w-96">
  Very long code line that might overflow on small screens
</pre>

5. Syntax Highlighting

Use appropriate syntax highlighting when possible.

// ✅ Good - With syntax highlighting
<pre className="language-javascript">
  console.log("Hello, World!");
</pre>

// ❌ Avoid - Without syntax highlighting
<pre>
  console.log("Hello, World!");
</pre>

Customization

Custom Styling

You can customize the pre element appearance using CSS classes:

<pre className="border border-gray-300 rounded-lg p-4 bg-gray-50" />

Different Themes

Use different themes for different contexts:

// Light theme
<pre className="bg-white border-gray-200 text-gray-900" />

// Dark theme
<pre className="bg-gray-900 border-gray-700 text-gray-100" />

// Brand theme
<pre className="bg-blue-50 border-blue-200 text-blue-900" />

Size Variations

Use different sizes for different emphasis levels:

// Small code block
<pre className="text-sm" />

// Standard code block
<pre className="text-base" />

// Large code block
<pre className="text-lg" />

Advanced Usage

Dynamic Code Content

Load code content dynamically:

const [codeContent, setCodeContent] = useState('');

useEffect(() => {
  // Load code content from API or file
  loadCodeContent().then(setCodeContent);
}, []);

Code Syntax Highlighting

Implement syntax highlighting:

import { highlight } from 'prismjs';

const highlightedCode = highlight(code, Prism.languages.javascript, 'javascript');

<pre dangerouslySetInnerHTML={{ __html: highlightedCode }} />

Copy to Clipboard

Implement copy to clipboard functionality:

const copyToClipboard = async (text) => {
  try {
    await navigator.clipboard.writeText(text);
    // Show success message
  } catch (err) {
    // Handle error
  }
};

Code: For inline code
Fence: For code fences
CopyButton: For copy functionality
Button: For action buttons
Card: For code containers

API Reference

For the complete API reference and advanced usage patterns, see the Pre API documentation.

Overview

Basic Usage

Props

Examples

Basic Code Block

JavaScript Code

TypeScript Code

CSS Code

HTML Code

JSON Data

Custom Styled Code Block

Common Use Cases

Documentation Code Examples

API Response Examples

Configuration Examples

Error Logs

Best Practices

1. Proper Indentation

2. Appropriate Content

3. Copy Functionality

4. Responsive Design

5. Syntax Highlighting

Customization

Custom Styling

Different Themes

Size Variations

Advanced Usage

Dynamic Code Content

Code Syntax Highlighting

Copy to Clipboard

Related Components

API Reference