# mui-numpad

> > ⚠️ **NOTE: This package is in very early stage of development. NOT recommended for production use yet.**

Latest version **0.1.4-alpha** (published 2021-01-24) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install mui-numpad
pnpm add mui-numpad
yarn add mui-numpad
bun add mui-numpad
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.1.4-alpha |
| Published | 2021-01-24 |
| First published | 2020-09-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 14.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | dotundefined |
| Keywords | numpad, react, mui-numpad, material ui |

## Links

- npm: https://www.npmjs.com/package/mui-numpad
- npm.io page: https://npm.io/package/mui-numpad

## Dependencies (4)

- [react](https://npm.io/package/react.md) ^16.13.1
- [react-dom](https://npm.io/package/react-dom.md) ^16.13.1
- [@material-ui/core](https://npm.io/package/@material-ui/core.md) ^4.11.0
- [@material-ui/icons](https://npm.io/package/@material-ui/icons.md) ^4.9.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.4-alpha (latest) — 2021-01-24
- 0.1.3-alpha — 2020-09-19
- 0.1.2 — 2020-09-18
- 0.1.1 — 2020-09-18
- 0.1.0 — 2020-09-18

## README

<!-- PROJECT LOGO -->
> ⚠️  **NOTE: This package is in very early stage of development. NOT recommended for production use yet.**

<br />

<p align="center">
  <a href="https://github.com/dotundefined/mui-numpad">
    <img src="https://i.imgur.com/n8LojKk.png" title="logo" alt="numpad logo" />
  </a>

  <h3 align="center">MUI-NUMPAD</h3>

  <p align="center">
    Numpad component for your React app.
    <br />
    <a href="https://mui-numpad.herokuapp.com/">View Demo</a>
    ·
    <a href="https://github.com/dotundefined/mui-numpad/issues">Report Bug</a>
    ·
    <a href="https://github.com/dotundefined/mui-numpad/issues">Request Feature</a>
    ·
    <a href="https://github.com/dotundefined/mui-numpad/issues">Ask a question</a>
  </p>
</p>
<br />

![npm](https://img.shields.io/npm/dw/mui-numpad?style=flat-square)
![Maintenance](https://img.shields.io/maintenance/yes/2020?style=flat-square)
![GitHub package.json version](https://img.shields.io/github/package-json/v/dotundefined/mui-numpad?style=flat-square)



<!-- TABLE OF CONTENTS -->
## Table of Contents

* [Getting Started](#getting-started)
  * [Installation](#installation)
  * [Usage](#usage)
  * [Props](#props)
* [About the Project](#about-the-project)
  * [Built With](#built-with)
* [Roadmap](#roadmap)
* [Contributing](#contributing)
* [License](#license)
* [Contact](#contact)

<!-- ABOUT THE PROJECT -->
## Getting Started

mui-numpad is available as an [npm package](https://www.npmjs.com/package/mui-numpad).

### Installation

```bash
// with npm
npm install mui-numpad
// with yarn
yarn add mui-numpad
```

### Usage

#### Simple numpad

```javascript
import React, { useState } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { Grid, TextField } from '@material-ui/core';

import MuiNumpad from 'mui-numpad';

const useStyles = makeStyles((theme) => ({
    gridItem: {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
    },
    textField: {
        width: '100%',
    }
}));

function SimpleNumpad() {
    const classes = useStyles();
    const [value, setValue] = useState();

    const onChange = (_value) => {
        setValue(_value);
    }

    return (
        <Grid container spacing={2}>
            <Grid item className={classes.gridItem} xs={3}>
                <TextField 
                margin="dense"
                className={classes.textField}
                value={value}
                variant="outlined" />
            </Grid>
            <Grid item xs={3}>
                <MuiNumpad
                    onChange={onChange}
                />
            </Grid>
        </Grid>
    );
}

export default SimpleNumpad;
```

### Props

| Name           	| Type     	| Default  	| Description                                                                                                                                                                                                                      	|
|----------------	|----------	|----------	|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------	|
| onChange       	| `func`     	|          	| Callback fired when the value is changed. <br><br>function(value: string) => string  value: The value that has been entered. Value is concatenated internally, so with each input you will be getting full value entered so far. 	|
| onKeyPress     	| `func`     	|          	| Callback fired when the key is pressed. <br><br>function(value: string) => string  value: The value of a button that has been pressed.                                                                                           	|                    



<!-- ABOUT THE PROJECT -->
## About The Project

Numpad component for your React app.


### Built With

* [React.js](https://reactjs.org/)
* [Material UI](https://material-ui.com/)



<!-- ROADMAP -->
## Roadmap

See the [open issues](https://github.com/dotundefined/mui-numpad/issues) for a list of proposed features (and known issues).



<!-- CONTRIBUTING -->
## Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**.

1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request



<!-- LICENSE -->
## License

Distributed under the MIT License. See `LICENSE` for more information.



<!-- CONTACT -->
## Contact

Jasmin Mustafic

`Gmail:` mustaficjasmin7@gmail.com

`Patreon:` https://www.patreon.com/dotundefined

`Linkedin:` https://www.linkedin.com/in/jasmin-mustafic-126141151/

---
_Source: https://npm.io/package/mui-numpad · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._