React Numeric Keyboard

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

Demo

Installation

using npm

  npm i react-numeric-keyboard

using yarn

  yarn add react-numeric-keyboard

Getting Started

Basic Usage

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 <NumericKeyboard isOpen={isOpen} onChange={onChange} />;
}

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