React-numeric-keyboard NPM

React Numeric Keyboard

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

Demo

React-Numeric-Keyboard

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