feat: useKeyFilter docs added

Author: tugcekucukoglu

apps/showcase/demo/usekeyfilter/pattern-demo.tsx

@@ -0,0 +1,65 @@
+import { useKeyFilter } from '@primereact/hooks';
+import { InputText } from 'primereact/inputtext';
+import { Label } from 'primereact/label';
+import * as React from 'react';
+
+export default function PatternDemo() {
+    const { onKeyPress: onIntegerKeyPress } = useKeyFilter({ pattern: 'int' });
+    const { onKeyPress: onNumberKeyPress } = useKeyFilter({ pattern: 'num' });
+    const { onKeyPress: onMoneyKeyPress } = useKeyFilter({ pattern: 'money' });
+    const { onKeyPress: onHexKeyPress } = useKeyFilter({ pattern: 'hex' });
+    const { onKeyPress: onAlphaKeyPress } = useKeyFilter({ pattern: 'alpha' });
+    const { onKeyPress: onAlphanumKeyPress } = useKeyFilter({ pattern: 'alphanum' });
+
+    const [integer, setInteger] = React.useState('');
+    const [number, setNumber] = React.useState('');
+    const [money, setMoney] = React.useState('');
+    const [hex, setHex] = React.useState('');
+    const [alphabetic, setAlphabetic] = React.useState('');
+    const [alphanumeric, setAlphanumeric] = React.useState('');
+
+    return (
+        <div className="card">
+            <div className="flex flex-wrap gap-3 mb-4">
+                <div className="flex-auto">
+                    <Label htmlFor="integer" className="font-bold block mb-2">
+                        Integer
+                    </Label>
+                    <InputText id="integer" value={integer} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setInteger(e.target.value)} onKeyPress={onIntegerKeyPress} className="w-full" />
+                </div>
+                <div className="flex-auto">
+                    <Label htmlFor="number" className="font-bold block mb-2">
+                        Number
+                    </Label>
+                    <InputText id="number" value={number} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setNumber(e.target.value)} onKeyPress={onNumberKeyPress} className="w-full" />
+                </div>
+                <div className="flex-auto">
+                    <Label htmlFor="money" className="font-bold block mb-2">
+                        Money
+                    </Label>
+                    <InputText id="money" value={money} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setMoney(e.target.value)} onKeyPress={onMoneyKeyPress} className="w-full" />
+                </div>
+            </div>
+            <div className="flex flex-wrap gap-3">
+                <div className="flex-auto">
+                    <Label htmlFor="hex" className="font-bold block mb-2">
+                        Hex
+                    </Label>
+                    <InputText id="hex" value={hex} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setHex(e.target.value)} onKeyPress={onHexKeyPress} className="w-full" />
+                </div>
+                <div className="flex-auto">
+                    <Label htmlFor="alphabetic" className="font-bold block mb-2">
+                        Alphabetic
+                    </Label>
+                    <InputText id="alphabetic" value={alphabetic} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setAlphabetic(e.target.value)} onKeyPress={onAlphaKeyPress} className="w-full" />
+                </div>
+                <div className="flex-auto">
+                    <Label htmlFor="alphanumeric" className="font-bold block mb-2">
+                        Alphanumeric
+                    </Label>
+                    <InputText id="alphanumeric" value={alphanumeric} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setAlphanumeric(e.target.value)} onKeyPress={onAlphanumKeyPress} className="w-full" />
+                </div>
+            </div>
+        </div>
+    );
+}

apps/showcase/demo/usekeyfilter/regex-demo.tsx

@@ -0,0 +1,31 @@
+import { useKeyFilter } from '@primereact/hooks';
+import { InputText } from 'primereact/inputtext';
+import { Label } from 'primereact/label';
+import * as React from 'react';
+
+export default function RegexDemo() {
+    const { onKeyPress: onSpaceKeyPress } = useKeyFilter({ pattern: /[^\s]/ });
+    const { onKeyPress: onCharsKeyPress } = useKeyFilter({ pattern: /^[^<>*!]+$/ });
+
+    const [spacekey, setSpacekey] = React.useState('');
+    const [chars, setChars] = React.useState('');
+
+    return (
+        <div className="card">
+            <div className="flex flex-wrap gap-3">
+                <div className="flex-auto">
+                    <Label for="spacekey" className="font-bold block mb-2">
+                        Block Space
+                    </Label>
+                    <InputText id="spacekey" value={spacekey} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSpacekey(e.target.value)} onKeyPress={onSpaceKeyPress} fluid />
+                </div>
+                <div className="flex-auto">
+                    <Label htmlFor="chars" className="font-bold block mb-2">
+                        Block &lt; &gt; * !
+                    </Label>
+                    <InputText id="chars" value={chars} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setChars(e.target.value)} onKeyPress={onCharsKeyPress} fluid />
+                </div>
+            </div>
+        </div>
+    );
+}

apps/showcase/demo/usekeyfilter/regex-word-demo.tsx

@@ -0,0 +1,27 @@
+import { useKeyFilter } from '@primereact/hooks';
+import { InputText } from 'primereact/inputtext';
+import { Label } from 'primereact/label';
+import * as React from 'react';
+
+export default function RegexWordDemo() {
+    const { onKeyPress, validate } = useKeyFilter({ pattern: /^[+]?(\d{1,12})?$/, validateOnly: true });
+
+    const [text, setText] = React.useState('');
+
+    const validateInput = (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (validate(e)) {
+            setText(e.target.value);
+        }
+    };
+
+    return (
+        <div className="card flex justify-center">
+            <div>
+                <Label htmlFor="numkeys" className="font-bold block mb-2">
+                    Block Numeric (allow &quot;+&quot; only once at start)
+                </Label>
+                <InputText id="numkeys" value={text} onChange={(e: React.ChangeEvent<HTMLInputElement>) => validateInput(e)} onKeyPress={onKeyPress} fluid />
+            </div>
+        </div>
+    );
+}

apps/showcase/docs/hooks/usekeyfilter/features.mdx

@@ -0,0 +1,35 @@
+---
+title: useKeyFilter
+description: useKeyFilter used to block individual keystrokes based on a pattern.
+component: usekeyfilter
+---
+
+## Usage
+
+```tsx
+import { useKeyFilter } from '@primereact/hooks';
+```
+
+```tsx
+const keyfilter = useKeyFilter();
+```
+
+## Examples
+
+### Pattern
+
+useKeyFilter provides various presets configured with the _pattern_ option.
+
+<DocDemoViewer name="usekeyfilter:pattern-demo" />
+
+### Regex
+
+In addition to the presets, a regular expression can be configured for customization of blocking a single key press.
+
+<DocDemoViewer name="usekeyfilter:regex-demo" />
+
+### Regex Word
+
+In addition to the presets, a regular expression can be used to validate the entire word using _validateOnly_ option.
+
+<DocDemoViewer name="usekeyfilter:regex-word-demo" />