onInputChange

The onInputChange prop is a callback function that is triggered whenever the input value changes in the Chipster.Input component. This allows you to track and react to user input in real-time.

Type Definition

type OnInputChangeCallback = (value: string) => void;

Basic Usage

BasicExample.tsx

import { Chipster } from '@micoblanc/chipster'
 
export default function BasicExample() {
  const handleInputChange = (value: string) => {
    console.log('Current input:', value)
    // Additional logic here
  }
 
  return (
    <Chipster>
      <Chipster.ItemList />
      <Chipster.Input 
        placeholder="Type and press Enter"
        onInputChange={handleInputChange}
      />
    </Chipster>
  )
}

Recommended Usage with Debouncing

Since onInputChange fires on every keystroke, it's recommended to debounce the callback when making API calls or performing expensive operations:

DebouncedExample.tsx

import { debounce } from 'lodash' // or your preferred debounce implementation
 
export default function DebouncedExample() {
  // Memoize the debounced function to prevent recreation on renders
  const debouncedSearch = useCallback(
    debounce((value: string) => {
      console.log('Debounced search:', value)
      // Make API call or perform expensive operation here
      searchAPI(value)
    }, 300), // Adjust delay as needed
    []
  )
 
  return (
    <Chipster>
      <Chipster.ItemList />
      <Chipster.Input 
        placeholder="Search..."
        onInputChange={debouncedSearch}
      />
      <Chipster.Suggestions getSuggestions={getSuggestions} />
    </Chipster>
  )
}

With External State Management

ExternalStateExample.tsx

export default function ExternalStateExample() {
  const [inputMetrics, setInputMetrics] = useState({
    length: 0,
    lastValue: '',
    timestamp: Date.now()
  })
 
  // Debounce the metrics update
  const updateMetrics = useCallback(
    debounce((value: string) => {
      setInputMetrics({
        length: value.length,
        lastValue: value,
        timestamp: Date.now()
      })
    }, 250),
    []
  )
 
  return (
    <div>
      <Chipster>
        <Chipster.ItemList />
        <Chipster.Input 
          placeholder="Start typing..."
          onInputChange={updateMetrics}
        />
      </Chipster>
      {inputMetrics.length > 0 && (
        <div className="mt-2 text-sm text-gray-500">
          Last input: {inputMetrics.lastValue} 
          ({inputMetrics.length} characters)
        </div>
      )}
    </div>
  )
}

Important Notes

The callback is triggered on every keystroke - consider debouncing for performance
Receives the raw input value before any transformation
Works independently of the Chipster.Validation component
Runs before any validation rules are checked
Useful for implementing real-time features
Consider memory usage when using with state updates
Debounce when making API calls or expensive operations

Common Use Cases

Real-time search (with debouncing)
Input analytics tracking
Character counting
Auto-save drafts
Dynamic UI updates
Form state management
Typing indicators
Progress tracking

Performance Considerations

PerformanceExample.tsx

export default function PerformanceExample() {
  // Expensive operation simulation
  const expensiveOperation = (value: string) => {
    // This could be an API call, complex calculation, etc.
    return value.split('').reverse().join('')
  }
 
  // Debounce expensive operations
  const debouncedOperation = useCallback(
    debounce((value: string) => {
      const result = expensiveOperation(value)
      console.log('Processed value:', result)
    }, 300),
    []
  )
 
  // Light operations can run immediately
  const lightOperation = (value: string) => {
    console.log('Input length:', value.length)
  }
 
  const handleInputChange = (value: string) => {
    // Run light operations immediately
    lightOperation(value)
    // Debounce expensive operations
    debouncedOperation(value)
  }
 
  return (
    <Chipster>
      <Chipster.ItemList />
      <Chipster.Input 
        placeholder="Type here..."
        onInputChange={handleInputChange}
      />
    </Chipster>
  )
}

placeholder itemClassName