Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/MojtabaHs/iPhoneNumberField
Elegant SwiftUI phone number textField.
https://github.com/MojtabaHs/iPhoneNumberField
Last synced: 2 months ago
JSON representation
Elegant SwiftUI phone number textField.
- Host: GitHub
- URL: https://github.com/MojtabaHs/iPhoneNumberField
- Owner: MojtabaHs
- License: mit
- Created: 2020-10-25T10:54:02.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2024-08-05T11:27:45.000Z (5 months ago)
- Last Synced: 2024-08-05T13:18:28.183Z (5 months ago)
- Language: Swift
- Size: 15.4 MB
- Stars: 523
- Watchers: 12
- Forks: 84
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-swiftui - MojtabaHs/iPhoneNumberField - A SwiftUI text field view that formats your phone number as you type (Samples)
- awesome-swiftui-libraries - iPhoneNumberField - Elegant SwiftUI phone number textField (TextField / Content)
- awesome-swiftui - SwiftUI phone number text field
README
iPhoneNumberField ☎️
Format phone numbers as they're typed—entirely in SwiftUI. 📱
Get Started |
Examples |
Customize |
Features |
Install |
Pricing
## And it's as easy as
```swift
iPhoneNumberField("Phone", text: $text)
```
## Get Started
1. [Install](./INSTALL.md) `iPhoneNumberField`.
2. Add `iPhoneNumberField` to your project.
```swift
import SwiftUI
import iPhoneNumberField
struct ContentView: View {
@State var text = ""
var body: some View {
iPhoneNumberField("Phone", text: $text)
}
}
```
3. Customize your `iPhoneNumberField`
## Examples
### Flags 🇦🇶
Show the flag, and make it selectable, so your users can find their region.
```swift
import SwiftUI
import iPhoneNumberField
struct ContentView: View {
@State var text = ""
var body: some View {
iPhoneNumberField(text: $text)
.flagHidden(false)
.flagSelectable(true)
.font(UIFont(size: 30, weight: .bold, design: .rounded))
.padding()
}
}
```
Focus and unfocus 🔍
Use iPhoneNumberField's optional binding and programmatically change the text field.
```swift
import SwiftUI
import iTextField
import iPhoneNumberField
struct ContentView: View {
@State var nameText = ""
@State var phoneText = ""
@State var phoneEditing = false
var body: some View {
VStack {
TextField("Name", text: $nameText)
.padding()
iPhoneNumberField("Phone", text: $phoneText, isEditing: $phoneEditing)
.font(UIFont(size: 24, weight: .light, design: .monospaced))
.padding()
}
}
}
```
### Custom style 🎀
Use our modifiers to create a fully customized field.
```swift
import SwiftUI
import iPhoneNumberField
struct ContentView: View {
@State var text: String = ""
@State var isEditing: Bool = false
var body: some View {
iPhoneNumberField("(000) 000-0000", text: $text, isEditing: $isEditing)
.flagHidden(false)
.flagSelectable(true)
.font(UIFont(size: 30, weight: .light, design: .monospaced))
.maximumDigits(10)
.foregroundColor(Color.pink)
.clearButtonMode(.whileEditing)
.onClear { _ in isEditing.toggle() }
.accentColor(Color.orange)
.padding()
.background(Color.white)
.cornerRadius(10)
.shadow(color: isEditing ? .lightGray : .white, radius: 10)
.padding()
}
}
```
## Customize
`iPhoneNumberField` takes 2 required parameters: 1️⃣ a `String` placeholder, and 2️⃣ a binding to a phone number string. All customizations are built into our modifiers.
**Example**: Customize the text field style, and call a closure when editing ends.
```swift
iPhoneNumberField("", text: $text)
.accentColor(Color.green)
.clearsOnBeginEditing(true)
.clearButtonMode(.always)
.onEditingEnded { print("DONE ✅") }
```
Use our exhaustive input list to customize your view.
| | Modifier | Description
--- | --- | ---
🔠 | `.font(_:)` | Modifies the text field’s **font** from a `UIFont` object.
🎨 | `.foregroundColor(_:)` | Modifies the **text color** of the text field.
🖍 | `.accentColor(_:)` | Modifies the **cursor color** while typing on the text field.
🌈 | `.placeholderColor(_:)` | Modifies the entire **placeholder color** of the text field.
🖍 | `.numberPlaceholderColor(_:)` | Modifies solely the **phone number placeholder color** of the text field – without the country code.
🐠 | `.countryCodePlaceholderColor(_:)` | Modifies solely the **country code placeholder color** of the text field – without the phone number.
↔️ | `.multilineTextAlignment(_:)` | Modifies the **text alignment** of a text field.
☎️ | `.textContentType(_:)` | Modifies the **content type** of a text field for implied formatting.
▶️ | `.clearsOnEditingBegan(_:)` | Modifies the **clear-on-begin-editing** setting of a text field.
👆 | `.clearsOnInsert(_:)` | Modifies the **clear-on-insertion** setting of a text field.
❌ | `.clearButtonMode(_:)` | Modifies whether and when the text field **clear button** appears on the view.
☑️ | `.textFieldStyle(_:)` | Modifies the style of the text field to one of Apple's three pre-designed styles.
🔟 | `.maximumDigits(_:)` | Modifies the maximum number of digits the text field allows.
🇦🇶 | `.flagHidden(_:)` | Modifies whether the text field hides the country flag on the left 🇸🇪🇹🇼🇨🇬.
🇸🇮 | `.flagSelectable(_:)` | Modifies whether the flag is selectable.
➕ | `.prefixHidden(_:)` | Modifies whether the country code prefix should be hidden. Note: prefix will only be shown if using the default placeholder (`placeholder = nil`).
📞 | `.formatted(_:)` | Modifies whether the binding you pass as the `text` parameter gets formatted.
✋ | `.disabled(_:)` | Modifies whether the text field is **disabled**.
▶️ | `.onEditingBegan(perform: { code })` | Modifies the function called when text editing **begins**.
💬 | `.onNumberChange(perform: { code })` | Modifies the function called when the user makes any **changes** to the text in the text field.
💬 | `.onEdit(perform: { code })` | Modifies the function called when the user makes any **changes** to the text in the text field.
🔚 | `.onEditingEnded(perform: ({ code })` | Modifies the function called when text editing **ends**.
🔘 | `.onClear(perform: { code })` | Modifies the function called when the user clears the text field.
↪️ | `.onReturn(perfom: { code })` | Modifies the function called when the user presses return.
🏳️| `.defaultRegion(_:)` | Receives a country string and selects the default phone format.
## Features
| |Features |
--------------------------|------------------------------------------------------------
:phone: | Validate, normalize and extract the elements of any phone number string.
:checkered_flag: | Fast. 1000 parses -> ~0.4 seconds.
:books: | Best-in-class metadata from Google's libPhoneNumber project.
:trophy: | Fully tested to match the accuracy of Google's JavaScript implementation of libPhoneNumber.
:iphone: | Built for iOS. Automatically grabs the default region code from the phone.
📝 | Editable (!) AsYouType formatter for UITextField.
:us: | Convert country codes to country names and vice versa
⚙️ | Access to all native `UITextField` configurations
🔍 | Searchable and customizable country code and name list
∞ | Many more features to discover
## Install
You can use the Swift package manager to install `iPhoneNumberField`. Find Xcode SPM instructions [here](./INSTALL.md)
```
dependencies: [
.package(url: "https://github.com/MojtabaHs/iPhoneNumberField.git", .upToNextMinor(from: "0.10.0"))
]
```
# 🌟 Become a Paid Subscriber
This library is under the **MIT** license and completely **FREE**. Anyone can use it anywhere, and any contribution is welcome.
In addition, you can show your support and [become My sponsor](https://www.buymeacoffee.com/mojtabahs/membership).
By supporting me, you will gain¹:
- Tickets for code-level support in any project you want (not just this one)
- Access me through my socials and we can discuss technologies together.
- Discounts and early access to my premium products.
- Early access to updates and bug fixes.
- We can even discuss your project entirely and build it together 💪🏻.
Remember that it is my pleasure to be a part of the community and try my best to deliver my experience to anyone who needs it.
¹ Paid program options are related to the chosen level.