XHubKeyboard

Thư viện React component cho bàn phím ảo với giao diện đẹp và dễ tùy chỉnh.

Cài đặt

``bash
npm install xhub-keyboard


hoặc

`tsx
import { Input, THEME, DisplayType } from "xhub-keyboard";

function InputExample() {
const [value, setValue] = useState("");

return (
value={value}
placeholder="Nhập văn bản..."
theme={THEME.DARK}
displayType={DisplayType.Text}
leftElement={🔍}
rightElement={✓}
onFocus={() => console.log("Input focused")}
onBlur={() => console.log("Input blurred")}
/>
);
}
`

#### Props của Input

| Prop | Type | Default | Mô tả |
| ------------------- | --------------------------------- | ------------------ | ------------------------------- |
| value | string | - | Giá trị hiện tại |
| placeholder | string | - | Placeholder text |
| theme | THEME | THEME.LIGHT | Theme của input |
| displayType | DisplayType | DisplayType.Text | Kiểu hiển thị giá trị |
| leftElement | ReactNode | - | Element bên trái input |
| rightElement | ReactNode | - | Element bên phải input |
| onFocus | () => void | - | Callback khi focus |
| onBlur | () => void | - | Callback khi blur |
| autoFocus | boolean | false | Tự động focus |
| alwaysFocus | boolean | false | Luôn giữ focus |
| isUseFormatNumber | boolean | true | Sử dụng format số |
| replaceElement | ReactNode | "●" | Element thay thế cho Replace |
| renderValue | (value: ReactNode) => ReactNode | - | Hàm render giá trị tùy chỉnh |
| elementsAcceptIds | string[] | - | IDs của elements được chấp nhận |
| styles | InputStyleProps | - | Custom styles |
| classNames | InputClassNames | - | Custom class names |

$3

Component bàn phím ảo với nhiều layout khác nhau và hỗ trợ keyboard events.

`tsx
import { Keyboard, THEME, KeyboardType, LayoutType } from "xhub-keyboard";

function KeyboardExample() {
const [value, setValue] = useState("");

return (
value={value}
onChange={setValue}
theme={THEME.LIGHT}
keyboardType={KeyboardType.Number}
layoutType={LayoutType.Decimal}
alwaysOpen={true}
onOpen={(height) => console.log("Keyboard opened, height:", height)}
onClose={() => console.log("Keyboard closed")}
toolbar={

| Prop | Type | Default | Mô tả |
| ------------------------ | --------------------------- | --------------------- | ------------------------------ |
| value | string | "" | Giá trị hiện tại |
| onChange | (value: string) => void | - | Callback khi giá trị thay đổi |
| theme | THEME | THEME.LIGHT | Theme của keyboard |
| keyboardType | KeyboardType | KeyboardType.Number | Loại keyboard |
| layoutType | LayoutType | LayoutType.Decimal | Layout của keyboard |
| alwaysOpen | boolean | false | Luôn hiển thị keyboard |
| openInit | boolean | false | Hiển thị keyboard khi khởi tạo |
| toolbar | ReactNode | - | Toolbar tùy chỉnh |
| onOpen | (height?: number) => void | - | Callback khi mở keyboard |
| onClose | () => void | - | Callback khi đóng keyboard |
| validateKeyValue | (value: string) => string | - | Validate giá trị nhập |
| outFocusOnClickToolbar | boolean | true | Mất focus khi click toolbar |
| id | string | - | ID của keyboard container |
| keyboardId | string | - | ID của keyboard section |
| toolbarId | string | - | ID của toolbar |
| children | ReactNode | - | Children elements |
| viewFullHeight | boolean | false | Hiển thị full height |
| styles | KeyboardStyleProps | - | Custom styles |
| classNames | KeyboardClassNamesProps | - | Custom class names |

$3

Component hiển thị nhãn với khả năng trigger keyboard và hỗ trợ browser input.

`tsx
import { Label } from "xhub-keyboard";

function LabelExample() {
return (

Nhãn tùy chỉnh

);
}
`

#### Props của Label

| Prop | Type | Default | Mô tả |
| ----------------- | --------------------------------------------- | ------- | ---------------------------- |
| htmlFor | string | - | ID của element được liên kết |
| className | string | - | Custom class name |
| children | ReactNode | - | Nội dung của label |
| inputProps | React.InputHTMLAttributes | - | Props cho input element |
| useBrowserInput | boolean | false | Sử dụng browser input |

Enums và Types

$3

`tsx
enum THEME {
LIGHT = "tek-keyboard-light",
DARK = "tek-keyboard-dark",
}
`

$3

`tsx
enum DisplayType {
Text = "text", // Hiển thị dạng text
Number = "number", // Hiển thị dạng số
Replace = "replace", // Hiển thị dạng thay thế
}
`

$3

`tsx
enum KeyboardType {
Text = "text", // Bàn phím text
Number = "number", // Bàn phím số
}
`

$3

`tsx
enum LayoutType {
Text = "text", // Layout text
Number = "number", // Layout số
Decimal = "decimal", // Layout số thập phân
}
`

Utility Functions

$3

Format giá trị số với dấu phẩy ngăn cách hàng nghìn.

`tsx
import { formatValues } from "xhub-keyboard";

const result = formatValues("1234567.89");
// Kết quả: { value: "1234567.89", displayValue: "1,234,567.89" }
`

$3

Chuyển đổi giá trị thành định dạng chuẩn dựa trên DisplayType.

`tsx
import { getStandardValues, DisplayType } from "xhub-keyboard";

// Text display
const textResult = getStandardValues("Hello", DisplayType.Text);
// Kết quả: { displayValue: ["H", "e", "l", "l", "o"], value: "Hello" }

// Replace display
const replaceResult = getStandardValues("1234", DisplayType.Replace, "•");
// Kết quả: { displayValue: ["•", "•", "•", "•"], value: "1234" }
`

Styling và Customization

$3

Component sử dụng CSS classes có thể tùy chỉnh:

- .tek-keyboard-light - Theme sáng
- .tek-keyboard-dark - Theme tối
- .input-container - Container của input
- .keyboard-container - Container của keyboard
- .keyboard-section - Section chứa keyboard
- .board-of-keys-container - Container của các phím
- .keyboard-trigger - Trigger để mở keyboard
- .label-container - Container của label

$3

Bạn có thể truyền custom styles thông qua props:

`tsx
styles={{
container: { backgroundColor: "#f0f0f0" },
input: { border: "2px solid #007bff" },
text: { fontSize: "16px" },
placeholder: { color: "#666" },
}}
classNames={{
container: "custom-input-container",
input: "custom-input",
}}
/>
`

`tsx
styles={{
container: { backgroundColor: "#ffffff" },
keyboardContainer: { border: "1px solid #ddd" },
keyboards: { gap: "8px" },
key: { backgroundColor: "#e9ecef" },
toolbar: { padding: "12px" },
}}
classNames={{
container: "custom-keyboard",
theKey: {
key: "custom-key",
label: "custom-key-label",
},
}}
/>
`

Ví dụ Sử Dụng

$3

`tsx
import { Input, THEME, DisplayType } from "xhub-keyboard";

function NumberInput() {
const [value, setValue] = useState("");

return (
value={value}
placeholder="Nhập số..."
theme={THEME.LIGHT}
displayType={DisplayType.Number}
isUseFormatNumber={true}
leftElement={💰}
/>
);
}
`

$3

`tsx
import { Input, THEME, DisplayType } from "xhub-keyboard";

function PasswordInput() {
const [value, setValue] = useState("");

return (
value={value}
placeholder="Nhập mật khẩu..."
theme={THEME.DARK}
displayType={DisplayType.Replace}
replaceElement="•"
rightElement={👁️}
/>
);
}
`

$3

`tsx
import { Keyboard, Label, THEME, KeyboardType, LayoutType } from "xhub-keyboard";

function KeyboardWithLabel() {
const [value, setValue] = useState("");

return (


`tsx
import { Keyboard, THEME } from "xhub-keyboard";

function AlwaysOpenKeyboard() {
const [value, setValue] = useState("");

return (
value={value}
onChange={setValue}
theme={THEME.LIGHT}
alwaysOpen={true}
viewFullHeight={true}
styles={{
container: { backgroundColor: "#f8f9fa" },
keyboardContainer: { backgroundColor: "#ffffff" },
key: {
backgroundColor: "#007bff",
color: "#ffffff",
borderRadius: "8px",
},
}}
toolbar={

`tsx
import { Input, THEME, DisplayType } from "xhub-keyboard";

function CustomRenderInput() {
const [value, setValue] = useState("");

const renderValue = (char: ReactNode) => (
style={{
color: char === "A" ? "red" : "blue",
fontWeight: "bold",
}}
>
{char}

);

return (
value={value}
placeholder="Nhập văn bản..."
theme={THEME.LIGHT}
displayType={DisplayType.Text}
renderValue={renderValue}
/>
);
}
``

Keyboard Events

Keyboard component hỗ trợ các phím vật lý:

- Các phím số (0-9)
- Phím dấu chấm (.)
- Phím Backspace/Delete
- Các phím chữ cái (a-z, A-Z)

Browser Support

- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+

Dependencies

- React 18.0.0+
- React DOM 18.0.0+
- clsx 2.1.1+

License

ISC License

xhub-keyboard