Retro Cursor

A retro-styled cursor input component for React applications. This component provides a nostalgic, retro-computing feel with a blinking cursor and typewriter-like text input experience.

Installation

npm install retro-cursor

Usage

import RetroCursor from 'retro-cursor';

function App() {
  const [value, setValue] = useState('');

  return (
    <RetroCursor
      value={value}
      onChange={(e) => setValue(e.target.value)}
      rows={8}
      fullWidth
    />
  );
}

Props

• value (string): The input value
• onChange (function): Callback function when value changes
• rows (number, optional): Number of rows for the input area (default: 8)
• fullWidth (boolean, optional): Whether to take full width of container (default: true)
• currentLineIndex (number, optional): Index of the current line
• repositionSignal (boolean, optional): Signal to reposition cursor
• onReposition (function, optional): Callback after cursor repositioning
• debug (boolean, optional): Enable debug mode (default: false)

Requirements

This component requires the following peer dependencies:

• React 17 or higher
• React DOM 17 or higher
• @mui/material 5 or higher

License

MIT