use-submittable-text-input.ts 803 B

12345678910111213141516171819202122232425262728293031
  1. import { useCallback, useState, Dispatch, SetStateAction } from 'react'
  2. export default function useSubmittableTextInput(
  3. handleSubmit: (
  4. content: string,
  5. setContent: Dispatch<SetStateAction<string>>
  6. ) => void
  7. ) {
  8. const [content, setContent] = useState('')
  9. const handleKeyPress = useCallback(
  10. (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
  11. if (e.key === 'Enter' && !e.shiftKey && !e.ctrlKey && !e.metaKey) {
  12. e.preventDefault()
  13. if (content.trim().length > 0) {
  14. handleSubmit(content, setContent)
  15. }
  16. }
  17. },
  18. [content, handleSubmit]
  19. )
  20. const handleChange = useCallback(
  21. (e: React.ChangeEvent<HTMLTextAreaElement>) => {
  22. setContent(e.target.value)
  23. },
  24. []
  25. )
  26. return { handleChange, handleKeyPress, content }
  27. }