react-hex-viewer

A React component to display and edit hex data.

Install

npm install @malsuke/react-hex-viewer

or

yarn add @malsuke/react-hex-viewer

or

pnpm add @malsuke/react-hex-viewer

Usage

Basic Usage

import { HexViewer } from '@malsuke/react-hex-viewer'

export default function App() {
  return (
    <HexViewer
      hexString="48656c6c6f2c20576f726c642120f09f918b"
      editable={true}
      showDebugPanel={true}
    />
  )
}

With Next.js (next/font)

For the best experience, it is recommended to use a monospace font. If you are using Next.js, you can use next/font to load a font and pass it to the fontFamily prop.

import { JetBrains_Mono } from 'next/font/google'
import { HexViewer } from '@malsuke/react-hex-viewer'

const jetbrainsMono = JetBrains_Mono({
  subsets: ['latin'],
  display: 'swap',
})

export default function Page() {
  return (
    <HexViewer
      hexString="48656c6c6f2c20576f726c642120f09f918b"
      fontFamily={jetbrainsMono.style.fontFamily}
    />
  )
}

Props

Property	Type	Default	Description
hexString	string	'00000000000000000000000000000000'	The hex string to display (2 characters = 1 byte).
fontFamily	string	undefined	The font family to use for the hex viewer.
showDebugPanel	boolean	true	Whether to show the debug panel on the right side.
editable	boolean	true	Whether the hex values can be edited.
className	string	''	Additional CSS class for the root container.