React Numeric Keyboard

A numeric virtual keyboard for React. Especially for Progressive Web Applications and mobile views.

Demo

!React-Numeric-Keyboard
!React-Numeric-Keyboard

Installation

using npm

``bash
npm i react-numeric-keyboard
`

using yarn

`bash
yarn add react-numeric-keyboard
`

Getting Started

Basic Usage

`javascript
import { useState } from 'react';
import { NumericKeyboard } from 'react-numeric-keyboard';

function App() {
const [isOpen, setIsOpen] = useState(false);
const onChange = ({ value, name }) => {
console.log(value, name);
};
return ;
}
`

API Reference

| props | Type | default | Description |
| :----------------------- | :------------------- | :------- | :-------------------------------------------------------------------------------------------------------------------------------------- |
| isOpen | boolean | | Required. Open or close the keyboard |
| onChange({value,name}) | VoidFunction | | Required. Getting the total value and the name of each keyboard characters |
| mode | simple or spaced | simple | Keyboard's mode |
| hasTransition | boolean | true | keyboard's opening and closing transition |
| transitionTime | number | 300ms | keyboard's transition time. Only works if hasTransition prop is true. |
| className | string | | keyboard's classname |
| style | CSSProperties | | keyboard's style |
| isKeyboardDisabled | boolean | false | Prevents keyboard's items from being clicked or touched |
| backSpaceIcon | ReactNode | | Custom backspace icon |
| leftIcon | ReactNode | | Custom left corner icon |
| containerClassName | string | | ClassName of the keyboard's items container |
| fullWidth | boolean | | keyboard's container width |
| header | ReactNode | | An optional header above the keyboard. Note that to prevent your header's overflow use box-sizing:border-box` in your header component |

Authors

- @ehsankh1370

License

MIT

Roadmap

- Add more keyboard's view