halilb / halilb/react-native-textinput-effects
Allow for a separate placeholder and label for the text input
- Langage dominant
- JavaScript
- Étoiles
- 3k
- Forks
- 287
- Métriques de merge des PR
- Aucune PR mergée en 30 j
Description
I wanted to suggest a feature for this component and get some feedback from the users of the component. I think traditionally one may create a text input component by having a separate label and a text input component and the text input component could have a placeholder which may instruct the user what needs to be inputted or some example of valid inputs. With this component, we are going away from an explicit label and specifying the label as part of the text input itself due to which it is not really possible to specify a placeholder for the text input as it would conflict with the label in the rendered component.
I was thinking if it would make sense to add functionality such that if both `placeholder` and `label` are specified, then if the text input box is empty, the `placeholder` is shown and if the text input box has some valid value, the `label` is shown. By doing this, we can have placeholder such as `Enter name of the product` as placeholder and `Product Name` as the label. The placeholder provides a clear instruction to the user what is needed and once the user enters the product name, the label `Product Name` is shown as expected. Just having `Product Name` as the placeholder when the text input box is empty may sometimes be confusing to a very layman user.
Additionally, if the `placeholder` is not specified, we fallback to the current behavior. So, it is not going to break any existing code as the `placeholder` and `label` can't be used together right now.
Guide de contribution
Aucun guide de contribution indexé pour ce dépôt
Piste de recherche
Commencez par localiser la gestion existante du label et du placeholder du composant, puis examinez comment l’input rendu change entre les états vide et rempli. Le travail est terminé lorsque des valeurs distinctes de placeholder et de label sont prises en charge avec le comportement demandé pour les états vide et rempli, tout en conservant le fallback actuel lorsqu’aucun placeholder n’est présent.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- javascript, react-native
- Domaine
- mobile
- Type d'issue
- Fonctionnalité
- Difficulté
- 3/5
- Temps estimé
- 1-2 jours
- Activité
- À l'abandon
- Clarté
- Plutôt claire
- Accessibilité débutants
- 45/100