Skip to content

Commit 690f876

Browse files
committed
Added README
1 parent 1892e75 commit 690f876

File tree

1 file changed

+216
-1
lines changed

1 file changed

+216
-1
lines changed

README.md

+216-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,218 @@
11
# ResponsiveTextField
22

3-
A description of this package.
3+
This library aims to achieve one goal, which is provide a reasonably flexible
4+
and useful SwiftUI wrapper around UITextField that provides more control over
5+
it's first responder status, one of the most glaring omissions from SwiftUI's
6+
native TextField even in iOS 14.
7+
8+
## Features
9+
10+
At a high level, it provides:
11+
12+
* A simple API, making use of SwiftUI bindings to capture entered text and
13+
control the text field's first responder status.
14+
* The ability to set the text field's placeholder.
15+
* Support for secure text entry.
16+
* The ability to handle return key taps.
17+
* The ability to style the text field using SwiftUI-style view modifiers.
18+
* Support for enabling and disabling the text field using the SwiftUI
19+
Environment.
20+
* A composable configuration system for detailed configuration of the underlying
21+
UITextField.
22+
23+
The following features are not currently supported:
24+
25+
* Control over if the text field should begin or end editing using the
26+
UITextFieldDelegate methods.
27+
* Control over how text should be replaced or cleared.
28+
* Managing the text selection.
29+
* Any of the built-in attributed string supporting APIs.
30+
31+
Most UITextField APIs that are not exposed directly can be managed using the
32+
text field configuration system.
33+
34+
## Installation
35+
36+
The library is made available as a Swift package and can be added to your
37+
project using Xcode's built-in package management tools.
38+
39+
## Usage
40+
41+
### Getting Started
42+
43+
To use `ResponsiveTextField` you will need to provide it with, at a minimum,
44+
a placeholder string, a `Binding<String>` to capture the text entered into the
45+
text field and a `Binding<Bool>` to manage the text field's first responder
46+
status.
47+
48+
```swift
49+
struct ExampleView: View {
50+
@State var email: String
51+
@State var isEditingEmail: Bool
52+
53+
var body: some View {
54+
VStack {
55+
ResponsiveTextField(
56+
placeholder: "Email address",
57+
text: $email,
58+
isEditing: $isEditingEmail
59+
)
60+
}
61+
}
62+
}
63+
```
64+
65+
Out of the box, `ResponsiveTextField` will fill the width of it's container and
66+
will not expand if text overflows the available space. It will also try and fill
67+
the height of its container - you can fix its height to its intrinsic content
68+
size using the `.fixedSize` modifier:
69+
70+
```swift
71+
ResponsiveTextField(
72+
placeholder: "Email address",
73+
text: $email,
74+
isEditing: $isEditingEmail
75+
)
76+
.fixedSize(horizontal: false, vertical: true)
77+
```
78+
79+
As the user types in the field, it will update the state that the binding was
80+
derived from.
81+
82+
### Disabling the text field
83+
84+
You can disable the text field using the standard SwiftUI `.disabled` modifier:
85+
86+
```swift
87+
88+
ResponsiveTextField(
89+
placeholder: "Email address",
90+
text: $email,
91+
isEditing: $isEditingEmail
92+
)
93+
.disabled(true)
94+
```
95+
96+
This uses the SwiftUI Environment system so it does not need to be called
97+
directly on the `ResponsiveTextField` element itself - you can also attach it
98+
to any parent view.
99+
100+
The disabled state can be updated and the text field will update it's state
101+
accordingly. This means you can use an `@State` variable to control the disabled
102+
state. No binding is required for this.
103+
104+
Disabling the text field will make it ignore any taps and will also resign the
105+
first responder status if the user was editing when it is disabled.
106+
107+
### Customising the text field appearance
108+
109+
You can control the appearance of the text field, including it's font, text
110+
color, text alignment and return key type using custom view modifiers. These
111+
modifiers also use the Environment system so can be called on any container
112+
view as well as the text field itself. Note - these modifiers take UIKit values
113+
for fonts and colors, not SwiftUI values:
114+
115+
```swift
116+
/// Sets the return key type
117+
textField.responsiveKeyboardReturnType(.next)
118+
119+
/// Sets the text color
120+
textField.responsiveTextFieldTextColor(.red)
121+
122+
/// Sets the font
123+
textField.responsiveTextFieldTextColor(.preferredFont(forTextStyle: .headline))
124+
125+
/// Sets the text alignment
126+
textField.responsiveTextFieldTextAlignment(.center)
127+
```
128+
129+
### Advanced re-usable configuration
130+
131+
For more detailed configuration, you can pass a
132+
`ResponsiveTextField.Configuration` value to the initialiser. This is a value
133+
type that takes a single argument, a closure of `(UITextField) -> Void`. This
134+
allows you to have full control over the properties of the `UITextField`.
135+
136+
Its important to note that this configuration will be called early during the
137+
`makeUIView()` function meaning that certain properties will be overwritten.
138+
139+
```swift
140+
ResponsiveTextField(
141+
placeholder: "Email address",
142+
text: $email,
143+
isEditing: $isEditingEmail,
144+
configuration: .init {
145+
$0.autocorrectionType = .no
146+
$0.clearButtonModde = .whileEditing
147+
}
148+
)
149+
```
150+
151+
The real power of this type is the ability to create pre-defined configurations
152+
that you can re-use throughout your app. You can define these as static values
153+
in an extension on `ResponsiveTextField.Configuration`.
154+
155+
For example, we may define an `email` configuration that sets the keyboard
156+
type and disables autocorrection:
157+
158+
```swift
159+
public extension ResponsiveTextField.Configuration {
160+
static let emailField = Self {
161+
$0.keyboardType = .emailAddress
162+
$0.autocorrectionType = .no
163+
$0.autocapitalizationType = .none
164+
$0.spellCheckingType = .no
165+
$0.clearButtonMode = .whileEditing
166+
}
167+
}
168+
```
169+
170+
You can now use this anywhere within your app in a concise way:
171+
172+
```swift
173+
ResponsiveTextField(
174+
placeholder: "Email address",
175+
text: $email,
176+
isEditing: $isEditingEmail,
177+
configuration: .emailField
178+
)
179+
```
180+
181+
The real power is being able to create small focused configurations that do just
182+
one thing, then combining them to create higher-level configurations. For
183+
example, we could refactor the previous configuration into smaller ones and
184+
then combine them in different ways:
185+
186+
```swift
187+
public extension ResponsiveTextField.Configuration {
188+
static let noCorrection = Self {
189+
$0.autocorrectionType = .no
190+
$0.autocapitalizationType = .none
191+
$0.spellCheckingType = .no
192+
}
193+
194+
static func keyboardType(_ type: UIKeyboardType) -> Self {
195+
$0.keyboardType = type
196+
}
197+
198+
static let clearWhileEditing = Self {
199+
$0.clearButtonMode = .whileEditing
200+
}
201+
202+
static let emailField = .combine(
203+
.keyboardtype(.emailAddress),
204+
.noCorrection,
205+
.clearWhileEditing
206+
)
207+
208+
static let passwordField = .combine(
209+
.noCorrection,
210+
.clearWhileEditing
211+
)
212+
}
213+
```
214+
215+
## Licence
216+
217+
This library is released under the Apache v2.0 license. See [LICENSE](LICENSE)
218+
for details.

0 commit comments

Comments
 (0)