Components

Component

CodeBlock

Copyable code surface for examples and installation snippets.

React4 props
PreviewReact
App.tsx
import "@hozorica/hods-react/tokens.css";
import { ActionButton } from "@hozorica/hods-react";

Imports

import { CodeBlock } from "@hozorica/hods-react/code-block";

Props

PropTypeDescription
code *stringCode text to display and copy.
languagestringLanguage label shown in the header.
filenameReactNodeOptional filename replacing the language label.
copyLabel / copiedLabelstringCopy button labels.

Platform Support

React

Client copy button with filename and language labels.

React Native

Use Text in a scrollable code surface when needed.

Usage

<CodeBlock filename="App.tsx" code={'import { ActionButton } from "@hozorica/hods-react";'} />

Notes

  • Use CodeBlock instead of raw pre tags for user-facing examples.
  • Keep long examples scrollable instead of wrapping into unreadable columns.