diff --git a/.babelrc b/.babelrc index ac77c29..d4c982a 100644 --- a/.babelrc +++ b/.babelrc @@ -37,9 +37,7 @@ ] }, "rollup": { - "plugins": [ - "babel-plugin-dev-expression" - ] + "plugins": ["babel-plugin-dev-expression"] } } -} \ No newline at end of file +} diff --git a/.eslintrc.js b/.eslintrc.js index 03c4261..2e7eff1 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,22 +1,22 @@ const OFF = 0; -const WARN = 1; +// const WARN = 1; const ERROR = 2; module.exports = { - parser: "babel-eslint", + parser: "@babel/eslint-parser", parserOptions: { - ecmaVersion: 2018 + ecmaVersion: 2018, }, extends: ["airbnb", "prettier"], plugins: ["prettier", "react-hooks"], env: { - browser: true + browser: true, }, rules: { "react/jsx-filename-extension": OFF, "react/jsx-props-no-spreading": OFF, "react/require-default-props": OFF, - 'react/no-find-dom-node': OFF, + "react/no-find-dom-node": OFF, "react/prop-types": [ERROR, { ignore: ["value", "defaultValue"] }], "react-hooks/rules-of-hooks": ERROR, "react-hooks/exhaustive-deps": ERROR, @@ -25,9 +25,12 @@ module.exports = { "no-plusplus": OFF, "global-require": OFF, "consistent-return": OFF, - "prefer-const": [ERROR, { - "destructuring": "all" - }], + "prefer-const": [ + ERROR, + { + destructuring: "all", + }, + ], "prettier/prettier": ERROR, - } + }, }; diff --git a/.husky/pre-commit b/.husky/pre-commit new file mode 100644 index 0000000..718da8a --- /dev/null +++ b/.husky/pre-commit @@ -0,0 +1 @@ +npx --no lint-staged diff --git a/.size-snapshot.json b/.size-snapshot.json index 2cacc4d..91504d3 100644 --- a/.size-snapshot.json +++ b/.size-snapshot.json @@ -1,22 +1,22 @@ { "dist/react-input-mask.js": { - "bundled": 72731, - "minified": 23443, - "gzipped": 7886 + "bundled": 72798, + "minified": 23579, + "gzipped": 7913 }, "lib/react-input-mask.development.js": { - "bundled": 29131, - "minified": 12358, - "gzipped": 4109 + "bundled": 29196, + "minified": 12423, + "gzipped": 4126 }, "dist/react-input-mask.min.js": { - "bundled": 30580, - "minified": 10544, - "gzipped": 3782 + "bundled": 30623, + "minified": 10612, + "gzipped": 3797 }, "lib/react-input-mask.production.min.js": { - "bundled": 28000, - "minified": 11281, - "gzipped": 3783 + "bundled": 28043, + "minified": 11346, + "gzipped": 3793 } } diff --git a/README.md b/README.md index 899cc7a..5b3339a 100644 --- a/README.md +++ b/README.md @@ -3,6 +3,7 @@ + [![npm version](https://img.shields.io/npm/v/@mona-health/react-input-mask.svg?style=flat)](https://www.npmjs.com/package/@mona-health/react-input-mask) Input masking component for React. Made with attention to UX. @@ -27,8 +28,8 @@ react-input-mask v3 requires **React 16.8.0 or later.** If you need support for # Usage ```jsx -import React from 'react' -import InputMask from '@mona-health/react-input-mask' +import React from "react"; +import InputMask from "@mona-health/react-input-mask"; function DateInput(props) { return ( @@ -117,13 +118,13 @@ Selection positions will be `null` if input isn't focused and during rendering. // Trim trailing slashes function beforeMaskedStateChange({ nextState }) { let { value } = nextState; - if (value.endsWith('/')) { + if (value.endsWith("/")) { value = value.slice(0, -1); } return { ...nextState, - value + value, }; } @@ -143,9 +144,9 @@ Please note that `beforeMaskedStateChange` executes more often than `onChange` a To use another component instead of regular `` provide it as children. The following properties, if used, should always be defined on the `InputMask` component itself: `onChange`, `onMouseDown`, `onFocus`, `onBlur`, `value`, `disabled`, `readOnly`. ```jsx -import React from 'react'; -import InputMask from '@mona-health/react-input-mask'; -import MaterialInput from '@material-ui/core/Input'; +import React from "react"; +import InputMask from "@mona-health/react-input-mask"; +import MaterialInput from "@material-ui/core/Input"; // Will work fine function Input(props) { @@ -170,31 +171,30 @@ function InvalidInput(props) { 1. a function component that implments `React.forwardRef` - ```jsx - const FunctionalInputComponent = React.forwardRef((props, ref) => { - return ( - - ); - }); - ``` + ```jsx + const FunctionalInputComponent = React.forwardRef((props, ref) => { + return ; + }); + ``` + 2. a class component that is wrapped in a function component that implements `React.forwardRef` (`innerRef` can be called anything as long as it's not `ref`) - ```jsx - class InnerClassInputComponent extends React.Component { - render() { - const { innerRef, ...restProps } = this.props; - return ( -