Merge Text Columns Side by Side Merge two text columns side by side with a custom separator.

The Text Columns Merger uses React's useState hook to store the input values of Column A and Column B in the colA and colB state variables, respectively. It also utilizes the useMemo hook to calculate the merged output whenever the input columns or separator change. The actual separator used is determined by the separator state variable, which can be set to one of five options: tab (\t), comma, space, pipe, or custom. If the custom option is chosen, the customSep state variable stores the user-inputted separator. The merged output is calculated by splitting both input columns into line arrays using the split method with a newline character (\n) as the separator, then iterating through both arrays using a for loop to join each pair of lines with the selected separator.

The tool uses JavaScript's built-in string methods, such as split and join, to manipulate the input text. It also employs React's useCallback hook to memoize the handleCopy function, which is called when the user clicks the Copy button. This function uses the copyToClipboard utility from the @/lib/utils module to copy the merged output to the clipboard. The tool's UI components are styled using CSS classes and Framer Motion's motion component for animations. When the custom separator option is selected, an input field appears, allowing users to enter any text string as the separator, enabling complex formatting like wrapping or bracketing. The merged result is then displayed in a readonly textarea element, where it can be copied to the clipboard using the Copy button.

The tool's algorithm has a time complexity of O(n), where n is the maximum number of lines in the input columns, because it only needs to iterate through both arrays once to calculate the merged output. The space complexity is also O(n) because it needs to store the merged output in memory. The use of React's hooks and JavaScript's built-in string methods makes the code efficient and easy to maintain. The tool supports various separator options, including tab (\t), comma, space, pipe, and custom text input, making it flexible for different use cases.