Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
mui-tel-input
Advanced tools
mui-tel-input - npm Package Compare versions
Comparing version 1.4.1 to 2.0.0
| import React from 'react'; | ||
| import type { MuiTelInputContinent, MuiTelInputCountry, MuiTelInputInfo, MuiTelInputProps, MuiTelInputReason } from './index.types'; | ||
| export { isValidPhoneNumber, AsYouType } from 'libphonenumber-js'; | ||
| export { isValidPhoneNumber as matchIsValidTel, AsYouType } from 'libphonenumber-js'; | ||
| export type { MuiTelInputProps, MuiTelInputReason, MuiTelInputInfo, MuiTelInputCountry, MuiTelInputContinent }; | ||
| declare const MuiTelInput: React.ForwardRefExoticComponent<Pick<MuiTelInputProps, "onChange" | "classes" | "className" | "style" | "children" | "color" | "disabled" | "error" | "fullWidth" | "focused" | "hiddenLabel" | "margin" | "required" | "size" | "sx" | "variant" | "label" | "slot" | "title" | "key" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "InputProps" | "autoComplete" | "autoFocus" | "FormHelperTextProps" | "helperText" | "InputLabelProps" | "inputProps" | "inputRef" | "name" | "rows" | "maxRows" | "minRows" | "SelectProps" | "value" | "disableDropdown" | "excludedCountries" | "onlyCountries" | "preferredCountries" | "defaultCountry" | "forceCallingCode" | "focusOnSelectCountry" | "langOfCountryName" | "disableFormatting" | "continents" | "MenuProps"> & React.RefAttributes<HTMLDivElement>>; | ||
| export { MuiTelInput }; |
| { | ||
| "name": "mui-tel-input", | ||
| "description": "A phone number input designed for the React library MUI", | ||
| "description": "A phone number input designed for the React library MUI built with libphonenumber-js", | ||
| "author": "Victor de la Fouchardiere <victor.delafouchardiere@gmail.com> (https://github.com/viclafouch)", | ||
@@ -9,4 +9,4 @@ "license": "MIT", | ||
| }, | ||
| "homepage": "https://github.com/viclafouch/mui-tel-input", | ||
| "version": "1.4.1", | ||
| "homepage": "https://viclafouch.github.io/mui-tel-input", | ||
| "version": "2.0.0", | ||
| "files": [ | ||
@@ -13,0 +13,0 @@ "dist" |
@@ -11,8 +11,6 @@ <div align="center"> | ||
| [](https://circleci.com/gh/viclafouch/mui-tel-input/tree/master) | ||
| <div align="center"> | ||
| <img src="https://github.com/viclafouch/mui-tel-input/blob/master/mui-tel-input.gif" width="100%" /> | ||
| </div> | ||
| ## ➡️ ➡ ➡️ [DEMO](https://codesandbox.io/s/mui-tel-input-p7b2jz) ⬅️ ⬅️ ⬅️ | ||
@@ -31,2 +29,4 @@ </div> | ||
| The component uses [libphonenumber-js](https://www.npmjs.com/package/libphonenumber-js) for phone number parsing and formatting. | ||
| ## Usage | ||
@@ -48,87 +48,8 @@ | ||
| ``` | ||
| ## [Documentation](https://viclafouch.github.io/mui-tel-input/) | ||
| ### Phone number validation | ||
| ## Changelog | ||
| ```jsx | ||
| import React from 'react' | ||
| import Box from '@mui/material/Box' | ||
| import Typography from '@mui/material/Typography' | ||
| import { MuiTelInput, isValidPhoneNumber } from 'mui-tel-input' | ||
| Go to [Github Releases](https://github.com/viclafouch/mui-tel-input/releases) | ||
| const MyComponent = () => { | ||
| const [value, setValue] = React.useState('') | ||
| const [isValid, setIsValid] = React.useState(false) | ||
| const handleChange = (newValue) => { | ||
| setIsValid(isValidPhoneNumber(newValue)) | ||
| setValue(newValue) | ||
| } | ||
| return ( | ||
| <Box> | ||
| <Typography>This is valid ? {isValid ? 'yes' : 'no'}</Typography> | ||
| <MuiTelInput value={value} onChange={handleChange} /> | ||
| </Box> | ||
| ) | ||
| } | ||
| ``` | ||
| ## Props | ||
| | Name | Type | Description | | ||
| | --------------- | ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | | ||
| | `value` | `string` | The phone number value (**Required**) | | ||
| | `onChange?` | `(value, info) => void` | Gets called once the user updates the input or selects a new country. | `defaultCountry?` | `string` | [Country code](#country-code) to be displayed on mount. | ||
| | `onlyCountries?` | `array` | [Country codes](#country-code) to be included. | ||
| | `excludedCountries?` | `array` | [Country codes](#country-code) to be excluded. | | ||
| | `preferredCountries?` | `array` | [Country codes](#country-code) to be highlighted to the top of the list of countries. | ||
| | `continents?` | `array` | [Continent codes](#continent-code) to include a list of countries. | ||
| | `forceCallingCode?` | `boolean` | Force the calling code (e.g: `+33`) to be displayed so the value cannot be empty. Default `false`. | ||
| | `focusOnSelectCountry?` | `boolean` | Autofocus the input when the user selects a country in the list. Default `false`. | ||
| | `disableDropdown?` | `boolean` | No country list / The current flag is a `span` instead of a `button`. Default `false`. | ||
| | `disableFormatting?` | `boolean` | Remove format (spaces..) from the input value. Default `false`. | ||
| | `langOfCountryName?` | `string` | An Intl locale to translate countries (see [Intl locales](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames/DisplayNames)). Default `en`. | ||
| | `MenuProps?` | [Menu API](https://mui.com/api/menu) | Props for the Menu component. | ||
| | `ref?` | `React.Ref<HTMLDivElement>` | A ref pointing to the [Mui TextField component](https://mui.com/components/text-fields/). | ||
| | [TextField Props](#inheritance) | | | ||
| ### Inheritance | ||
| While not explicitly documented above, the props of the [TextField](https://mui.com/api/text-field) component are also available on MuiTelInput. | ||
| ## CSS | ||
| | Global class | Description | | ||
| | ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | | ||
| | `.MuiTelInput-TextField` | Styles applied to the root element. | | ||
| | `.MuiTelInput-IconButton` | Styles applied to the [IconButton](https://mui.com/material-ui/api/icon-button/) of the current flag. | | ||
| | `.MuiTelInput-Flag` | Styles applied to a flag. | | ||
| | `.MuiTelInput-Menu` | Styles applied to [Menu](https://mui.com/material-ui/api/menu/) component. | | ||
| | `.MuiTelInput-MenuItem` | Styles applied to a flag item of the [Menu](https://mui.com/material-ui/api/menu/). | | ||
| | `.MuiTelInput-ListItemIcon-flag` | Styles applied to the [ListItemIcon](https://mui.com/material-ui/api/list-item-icon/) of a flag item | | ||
| | `.MuiTelInput-ListItemText-country` | Styles applied to the [ListItemText](https://mui.com/material-ui/api/list-item-text/) of a flag item | | ||
| | `.MuiTelInput-Typography-calling-code` | Styles applied to the calling code of a flag item | | ||
| You can override the style of the component with a [global class name](https://mui.com/material-ui/guides/interoperability/#global-css). | ||
| ## Country code | ||
| A "country code" is a [two-letter ISO country code](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) (like `US`). | ||
| This library supports all [officially assigned](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2#Officially_assigned_code_elements) ISO alpha-2 country codes, plus a few extra ones like: `AC` ([Ascension Island](https://en.wikipedia.org/wiki/Ascension_Island)), `TA` ([Tristan da Cunha](https://en.wikipedia.org/wiki/Tristan_da_Cunha)), `XK` ([Kosovo](https://en.wikipedia.org/wiki/Kosovo)). | ||
| ## Continent code | ||
| | Code | Continent | ||
| | --------------- | ------------------------------- | ||
| | AF | Africa | ||
| | AS | Asia | ||
| | EU | Europe | ||
| | NA | North America | ||
| | OC | Oceania | ||
| | SA | South America | ||
| | OC | Oceania | ||
| ## TypeScript | ||
@@ -135,0 +56,0 @@ |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Lines of code
- increased by0.1%
6178
Worsened metrics
- Total package byte prevSize
- decreased by-0.78%
754621
- Number of lines in readme file
- decreased by-53.74%
68
No dependency changes