PromptInput

A modern, accessible React component for text input with send, attach, and voice action buttons. Built with TypeScript and GSAP animations.

Installation

npm install @sarthakb009/prompt-input

Peer Dependencies

Make sure you have these installed in your project:

npm install react react-dom lucide-react gsap @gsap/react

Required versions:

• react ^18.0.0
• react-dom ^18.0.0
• lucide-react ^0.294.0
• gsap ^3.13.0
• @gsap/react ^2.1.2

Usage

Basic Example

import { PromptInput } from '@sarthakb009/prompt-input';

function App() {
  const handleSend = (message: string) => {
    console.log('Message sent:', message);
  };

  return (
    <PromptInput
      placeholder="Type a message..."
      onSend={handleSend}
      onAttach={() => console.log('Attach clicked')}
      onVoice={() => console.log('Voice clicked')}
    />
  );
}

Controlled Mode

import { PromptInput } from '@sarthakb009/prompt-input';
import { useState } from 'react';

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

  return (
    <PromptInput
      value={value}
      onChange={setValue}
      onSend={(message) => {
        console.log('Sending:', message);
        setValue('');
      }}
    />
  );
}

Props

| Prop | Type | Default | Required | Description | |------|------|---------|----------|-------------| | placeholder | string | "Ask anything..." | No | Placeholder text for the input field | | value | string | undefined | No | Controlled value. When provided, component becomes controlled | | onChange | (value: string) => void | undefined | No | Callback fired when input value changes | | onSend | (value: string) => void | undefined | No | Callback fired when message is sent (Enter key or send button) | | onAttach | () => void | undefined | No | Callback fired when attach button is clicked | | onVoice | () => void | undefined | No | Callback fired when voice button is clicked | | className | string | "" | No | Additional CSS classes to apply to the container |

Features

• ✅ Controlled & Uncontrolled: Supports both controlled and uncontrolled modes
• ✅ Keyboard Support: Press Enter to send, Shift+Enter for new line
• ✅ Smooth Animations: GSAP-powered entrance animations
• ✅ Accessible: Proper ARIA labels and keyboard navigation
• ✅ TypeScript: Full TypeScript support with exported types
• ✅ Customizable: Style override via className prop

TypeScript

The component is written in TypeScript and exports all types:

import { PromptInput, PromptInputProps } from '@sarthakb009/prompt-input';

const props: PromptInputProps = {
  placeholder: "Type here...",
  onSend: (value) => console.log(value),
};

License

MIT