# input-material-ui > A material-ui INPUT component which allows to see/hide the password text of the field and to clear the input value Latest version **3.1.1** (published 2023-12-10) · MIT license · 0 weekly downloads ## Install ```sh npm install input-material-ui pnpm add input-material-ui yarn add input-material-ui bun add input-material-ui ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 3.1.1 | | Published | 2023-12-10 | | First published | 2018-10-22 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 5 | | Unpacked size | 25.4 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 2 | | Author | Iulian Radu | | Maintainers | iulian-radu-at | | Keywords | text, input, password, material-ui, input-material-ui, react, react-component, ui, material design | ## Links - npm: https://www.npmjs.com/package/input-material-ui - Repository: https://github.com/iulian-radu-at/input-material-ui - Homepage: https://github.com/iulian-radu-at/input-material-ui#readme - Issues: https://github.com/iulian-radu-at/input-material-ui/issues - npm.io page: https://npm.io/package/input-material-ui ## Dependencies (5) - [lodash](https://npm.io/package/lodash.md) ^4.17.21 - [@mui/material](https://npm.io/package/@mui/material.md) ^5.14.20 - [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.11.1 - [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^11.11.0 - [@mui/icons-material](https://npm.io/package/@mui/icons-material.md) ^5.14.19 ## 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 - 3.1.1 (latest) — 2023-12-10 - 3.1.0 — 2023-12-10 - 3.0.0 — 2022-12-11 - 2.9.0 — 2021-09-04 - 2.8.0 — 2021-04-19 - 2.7.0 — 2021-02-28 - 2.6.1 — 2020-08-07 - 2.6.0 — 2020-07-25 - 2.5.0 — 2020-06-12 - 2.4.0 — 2020-03-22 - 2.3.0 — 2020-01-26 - 2.2.0 — 2019-08-21 - 2.1.0 — 2019-07-11 - 2.0.1 — 2019-06-09 - 2.0.0 — 2019-06-06 - … 9 more at https://npm.io/package/input-material-ui/versions ## README # input-material-ui ![Weekly downloads](https://img.shields.io/npm/dw/input-material-ui 'Weekly downloads') A material-ui INPUT component which allows to see/hide the password text of the field and to clear the input value --- ## Demo You can access the storybook for this component [here](https://iulian-radu-at.github.io/input-material-ui/). ## Props The component accepts the props defined bellow in the table. ### Props accepted by InputMaterialUi | Name | Type | Required | Default | Description | | ------------------- | ----------------------- | -------- | --------- | ------------------------------------------------------ | | FormHelperTextProps | FormHelperTextProps | no | undefined | The props passed to helper text | | helperText | string | no | undefined | The helper text | | id | string | no | undefined | The id of the field | | InputLabelProps | InputLabelProps | no | undefined | The Props passed to label | | InputProps | InputProps | no | undefined | The props passed to input field | | label | string | yes | - | The label of the field | | onChange | (value: string) => void | yes | - | The callback function called when the value is changed | | placeholder | string | no | undefined | The placeholder of the field | | type | string | no | text | The type of the field; ex. text, password | | value | string | no | undefined | The value of the field | --- ## Versions | InputMaterialUi _uses_ | Material-ui | React | | ---------------------: | :---------: | :--------------: | | 1.0.x | 3.2.0 | 16.5.2 | | 1.1.x | 3.6.0 | 16.6.3 | | 1.2.x | 3.9.2 | 16.8.1 | | 1.3.x | 3.9.3 | 16.8.6 | | 2.0.x | 4.0.2 | 16.8.6 | | 2.1.x | 4.2.0 | 16.8.6 | | 2.2.x | 4.3.2 | 16.9.0 | | 2.3.x | 4.9.0 | 16.9.0 | | 2.4.x | 4.9.7 | 16.9.0 | | 2.5.x | 4.10.2 | 16.9.0 | | 2.6.x | 4.11.0 | 16.9.0 | | 2.7.x | 4.11.3 | 16.9.0 or 17.0.0 | | 2.8.x | 4.11.3 | 16.9.0 or 17.0.0 | | 2.9.x | 4.12.3 | 16.9.0 or 17.0.0 | | 3.0.x | 5.10.17 | >=18.0.0 | | 3.1.x | 5.14.20 | >=18.0.0 | ### About versioning schema used for InputMaterialUi - Major - it will be increased if the major version of the dependat package changes or there are breaking changes in the code of InputMaterialUi - Minor - it will be increased if no major version of the dependat package changes, but there are changes of the minor or patch versions of it - Patch - it will be increased if there are no changes of the dependat packages, but there are non breaking changes in the code of InputMaterialUi --- ## Example The base component which allows to create an input with a visible or masked input: ```js import * as React from 'react'; import InputMaterialUi from 'input-material-ui'; class App extends React.Component { render() { return (
); } handleChange = (event: any) => { console.log(event); }; } export default App; ``` ```js import * as React from 'react'; import InputMaterialUi from 'input-material-ui'; class App extends React.Component { render() { return (
); } handleChange = (event: any) => { console.log(event); }; } export default App; ``` --- ## Changelog ### 1.0.0 - input-material-ui is made publicly available ### 1.0.1 - Replaced fontawesome icon with an svg icon ### 1.0.3 - Fixed display of remove value when the field has a value ### 1.0.5 - Fixed the bug related to switching between being uncontroled/controled ### 1.1.0 - Updated the react and material-ui package ### 1.1.1 - Fixed the controlled mode for input ### 1.2.0 - Updated packages ### 1.2.1 - The input field received a name automatically. The name is created by doing kebabCase from the first defined of: id, label or placeholder. - Fixed the height of the input field to do not cut the letter 'g' or 'y' ### 1.3.0 - Updated packages ### 2.0.0 - Updated packages ### 2.0.1 - Added the possibility to display a helper text - Added new props for passing props to input field, label and helper text - Added a storybook for this component ### 2.1.0 - Updated packages ### 2.2.0 - Updated packages ### 2.3.0 - Updated packages ### 2.4.0 - Updated packages - Moved from npm to yarn ### 2.5.0 - Updated packages ### 2.6.0 - Updated packages ### 2.6.1 - Fixed crash produced by "export \* from" ### 2.7.0 - Accepting React 17 as peerDependencies - Fixed security warnings ### 2.8.0 - Added support for defaultValue ### 2.9.0 - Updated the packages ### 3.0.0 - Migrated to material-ui 5 - Supports minimum React 18 ### 3.1.0 - Updated the packages ### 3.1.1 - Fixed bundled lib --- _Source: https://npm.io/package/input-material-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._