Convert Hex to Byte Table Visualize hex strings as bytes with decimal, binary, and ASCII.

The tool works by first cleaning the input hex string using a regular expression that replaces any non-hex characters with an empty string, effectively removing them. This cleaned string is then checked to ensure its length is even, as each byte requires two hexadecimal digits for representation. If the string passes this validation, it is processed in pairs of two characters, with each pair being converted into a decimal value using the parseInt function with base 16.

This decimal value is then used to generate the binary representation by calling the toString method with radix 2 and padding the result with leading zeros to ensure an 8-bit length. The ASCII representation is also generated from this decimal value, but only if it falls within the printable character range of 32 to 126; otherwise, a dot is displayed. These processed bytes are stored in an array of objects, each containing the hex, decimal, binary, and ASCII representations.

The React library is used to manage the state of the input hex string and the resulting byte array, with the useState hook initializing these states and the useCallback hook memoizing the copy function to prevent unnecessary re-renders. When the user clicks the copy button, this function uses the copyToClipboard utility from the utils module to copy the space-separated hex string representation of the bytes to the clipboard. The browser's built-in Clipboard API is used under the hood by this utility, allowing for seamless copying without requiring any additional permissions or setup.

The byte viewer table is rendered using React's JSX syntax, with each row representing a single byte and its corresponding representations. The map function is used to iterate over the array of bytes and generate these rows, which are then wrapped in a table element with headers for each column. The concatenated ASCII representation is displayed below this table, generated by mapping over the byte array and joining the ASCII strings together. This allows users to quickly identify any human-readable text within the data.