Awesome
<h1 align="center"> iPhoneNumberField โ๏ธ</p> <h3 align="center">Format phone numbers as they're typedโentirely in <span style="text-decoration: underline;">SwiftUI</span>. ๐ฑ</h3> <!-- <p align="center">(entirely in SwiftUI!)</p> --> <p align="center"> <strong><a href="#get-started">Get Started</a></strong> | <strong><a href="#examples">Examples</a></strong> | <strong><a href="#customize">Customize</a></strong> | <strong><a href="#features">Features</a></strong> | <strong><a href="#install">Install</a></strong> | <strong><a href="#pricing">Pricing</a></strong> </p> <p align="center"> <img src="https://github.com/AlexFine/SwiftUICode/blob/master/ASSETS/gifygifytwo.gif" alt="CI" /> </p> <br />And it's as easy as
iPhoneNumberField("Phone", text: $text)
<p align="center">
<img src="./Resources/showcase-pic.png" width="300" alt="CI" />
</p>
Get Started
-
Install
iPhoneNumberField
. -
Add
iPhoneNumberField
to your project.
import SwiftUI
import iPhoneNumberField
struct ContentView: View {
@State var text = ""
var body: some View {
iPhoneNumberField("Phone", text: $text)
}
}
- Customize your
iPhoneNumberField
Examples
Flags ๐ฆ๐ถ
<img align="right" src="/Resources/example-1.gif" width="250">Show the flag, and make it selectable, so your users can find their region.
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()
}
}
<br clear="right"/>
<br/>
<h3 align="left">Focus and unfocus ๐</h3>
<p align="left">Use iPhoneNumberField's optional binding and programmatically change the text field.</p>
<img align="left" src="/Resources/example-2.gif" width="250">
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()
}
}
}
<br clear="left"/>
<br/>
<br/>
Custom style ๐
<img align="right" src="/Resources/example-3.gif" width="250">Use our modifiers to create a fully customized field.
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()
}
}
<br clear="right"/>
<br/>
<br/>
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.
iPhoneNumberField("", text: $text)
.accentColor(Color.green)
.clearsOnBeginEditing(true)
.clearButtonMode(.always)
.onEditingEnded { print("DONE โ
") }
Use our exhaustive input list to customize your view.
<div align="center">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 <i>entire</i> placeholder color of the text field. |
๐ | .numberPlaceholderColor(_:) | Modifies <i>solely</i> the phone number placeholder color of the text field โ without the country code. |
๐ | .countryCodePlaceholderColor(_:) | Modifies <i>solely</i> 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
<div align="center">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
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. 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.
<sub>ยน Paid program options are related to the chosen level.</sub>