Goten Text Field
GotenTextField is a React component that facilitates the use of text inputs.
- It allows to bind an object to the value of a text input.
- This avoids common boilerplate of state definition and setState calls.
- It helps validating a text input using its type.
- You can specify a pattern (Regex) for the validation.
- You can modify the error's display message and add certain functionality like pop-ups.
Index
Install
npm install goten-react-text-field
Usage
var GotenTextField = GotenTextField; // ES5import GotenTextField from 'goten-react-text-field'; // ES6refsGotenTextFieldWithPattern = ReactgotenTextFields =<GotenTextField===========/>{return refsGotenTextFieldWithPatterncurrent}
Example of use
import React Component from 'react'import GotenTextField from 'goten-react-text-field'const state =changeOnPress: true{thisstate = statethisrefsGotenTextFieldWithPattern = ReactthisgotenTextFields =}{return<div><div ='title'>GotenTextField</div><GotenTextField=// === // ; ; ; ; ;========/><br/><br/><input='submit'='Validate And Show Input'=/></div>}
Props
Prop Name | Type | Default | Description |
---|---|---|---|
bindContainer | Object | Container of the attributes that will be binded to the value of the text fields. | |
bindProp | String | Attribute`s name of the bindContainer object. | |
componentLabel | Component | Label component, same as 'label' but with a component. | |
errorMessage | String, Component | String Message | Error message corresponding to the pattern or type. |
errorRequiredMessage | String, Component | String Message | Error message corresponding to the 'required' prop. |
label | String | Label of the text field. | |
pattern | String | Pattern to validate the value of the text field with. | |
placeholder | String | Placeholder. | |
required | Boolean | False | Whether the text field is required (true) or not. |
showError | Boolean | False | Whether to show error messages (true) or not. |
type | String | text | The text field's type. |
- All other props are inherited from the react component input
Methods
- validate()
Validate the GotenTextField using the props types, pattern and required.
- clearError()
Clears the text field's error (if any).
- clear()
Clears any text and errors the text field has.
Contributions
To contribute to this package, we use the following workflow:
- Add an issue with related tags to describe the contribution (is it a bug? a feature request?).
- Branch your solution from develop, naming it like
#<issue_number>-<descriptive_name>
. - Send a pull request and wait for approval/corrections.