Code

Usage

Basic usage example to quickly see how the Code works.

React.createElement()

{
  "filePath": "C:/Data/path/package.json",
  "error": {
    "errno": -4048,
    "code": "EPERM",
    "syscall": "open",
    "path": "C:\Data\path\package.json"

  },
  "_tag": "fs.WriteFileError"
}

{
  "name": "string",
  "symbol": "string",
  "position": "number",
  "mass": "number"
}

import { Code } from "@/ui/code";
import { Stack } from "@/ui/stack";

const data = [
  { name: "Carbon", symbol: "C", position: 6, mass: 12.011 },
  { name: "Nitrogen", symbol: "N", position: 7, mass: 14.007 },
  { name: "Yttrium", symbol: "Y", position: 39, mass: 88.906 },
  { name: "Barium", symbol: "Ba", position: 56, mass: 137.33 },
  { name: "Cerium", symbol: "Ce", position: 58, mass: 140.12 },
  { name: "Sodium", symbol: "Na", position: 11, mass: 22.99 }
];

const code = `{
  "filePath": "C:/Data/path/package.json",
  "error": {
    "errno": -4048,
    "code": "EPERM",
    "syscall": "open",
    "path": "C:\\Data\\path\\package.json"

  },
  "_tag": "fs.WriteFileError"
}`;

export function CodeDemo() {
  return (
    <Stack className="flex max-w-full flex-col items-center justify-center">
      <Code block code="React.createElement()" />
      <Code quote>{code}</Code>
      <Code samp={data} />
    </Stack>
  );
}

Properties

Interactive configurator to explore customization options for the Code component.

{
  "filePath": "C:/Data/path/package.json",
  "error": {
    "errno": -4048,
    "code": "EPERM",
    "syscall": "open",
    "path": "C:\Data\path\package.json"

  },
  "_tag": "fs.WriteFileError"
}{
  "name": "string",
  "symbol": "string",
  "position": "number",
  "mass": "number"
}

Block

Quote

By default, Code component renders inline code html element.
To render code in pre element pass block prop to Code component.

API References

Styles API

type T = "code" | "samp";

Styles API	Type	Default	Annotation
unstyled`?`	`Partial<Record<T, boolean>>`	`false`	if `true`, default styles will be removed
className`?`	`string`	`undefined`	pass to root component `<div>`
classNames`?`	`Partial<Record<T, string>>`	`undefined`
style`?`	`CSSProperties`	`undefined`	pass to root component `<div>`
styles`?`	`Partial<Record<T, CSSProperties>>`	`undefined`

Props API

type Dir = "ltr" | "rtl" | (string & {});

Props API	Type	Default	Annotation
children`?`	`string`	`undefined`	Only accept children as strings
block`?`	`boolean`	`false`	If set code will be rendered inside `pre`
quote`?`	`boolean`	`false`	Allows applying styles like as blockquote
dir`?`	`Dir`	`rtl`	Attribute that indicates the directionality of the element's text
code`?`	`string`	`undefined`	Used to display inline code
samp`?`	`Record<string, any>`	`undefined`	Used to display data type conversions to strings such as JSON.

Source Codes

Full working code example, including necessary markup and styles. You can copy and paste this code directly to start using the component immediately.