Installation

npm install use-restricted-input

Usage

1import React, { ChangeEvent } from 'react';
2import useRestrictedInput from 'use-restricted-input';
3
4export function Component() {
5  const {onKeyPress} = useRestrictedInput('abcd0-9');
6  const [text, setText] = useState<string>('');
7  
8  const onChange: (event: ChangeEvent<HTMLInputElement>) => void = useCallback((event: ChangeEvent<HTMLInputElement>) => {
9    setText(event.target.value);
10  }, [setText]);
11  
12  return (
13    <div>
14      <input type="text"
15             value={text}
16             onChange={onChange}
17             onKeyPress={onKeyPress}/>
18      <p>
19        text is "{text}"
20      </p>
21    </div>
22  );
23}

API

useRestrictedInput(availableCharacters: string | ((character: string) => boolean)): { onKeyPress: (event: KeyboardEvent<InputElement>) => void }

• param
  • availableCharacters: string | ((character: string) => boolean)
    • a-z0-9 or abcde0-4#$
    • (character: string) => boolean
• return
  • onKeyPress: (event: KeyboardEvent<InputElement>) => void