Socket
Socket
Sign inDemoInstall

react-numeric-keyboard

Package Overview
Dependencies
16
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-numeric-keyboard

A numeric keyboard for React


Version published
Maintainers
1
Weekly downloads
44
increased by131.58%

Weekly downloads

Readme

Source

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

  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

propsTypedefaultDescription
isOpenbooleanRequired. Open or close the keyboard
onChange({value,name})VoidFunctionRequired. Getting the total value and the name of each keyboard characters
modesimple or spacedsimpleKeyboard's mode
hasTransitionbooleantruekeyboard's opening and closing transition
transitionTimenumber300mskeyboard's transition time. Only works if hasTransition prop is true.
classNamestringkeyboard's classname
styleCSSPropertieskeyboard's style
isKeyboardDisabledbooleanfalsePrevents keyboard's items from being clicked or touched
backSpaceIconReactNodeCustom backspace icon
leftIconReactNodeCustom left corner icon
containerClassNamestringClassName of the keyboard's items container
fullWidthbooleankeyboard's container width
headerReactNodeAn 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

Keywords

FAQs

Last updated on 27 Jan 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc