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