Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/weblineindia/reactjs-text-box
ReactJS based Text Box component used to specify an input field where the user can enter data.
https://github.com/weblineindia/reactjs-text-box
react-components react-demo react-input-field react-libraries react-text react-text-input react-textbox reactjs reactjs-components reactjs-demo reactjs-input reactjs-library reactjs-text-box reusable-components text-box-input text-input textbox textbox-component
Last synced: 7 days ago
JSON representation
ReactJS based Text Box component used to specify an input field where the user can enter data.
- Host: GitHub
- URL: https://github.com/weblineindia/reactjs-text-box
- Owner: weblineindia
- License: mit
- Created: 2020-07-23T07:40:20.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-03-30T08:45:15.000Z (8 months ago)
- Last Synced: 2024-08-11T12:36:13.813Z (3 months ago)
- Topics: react-components, react-demo, react-input-field, react-libraries, react-text, react-text-input, react-textbox, reactjs, reactjs-components, reactjs-demo, reactjs-input, reactjs-library, reactjs-text-box, reusable-components, text-box-input, text-input, textbox, textbox-component
- Language: JavaScript
- Homepage: https://www.weblineindia.com/software-development-resources.html
- Size: 38.2 MB
- Stars: 4
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# ReactJS - Text Box Component
ReactJS based Text Box component used to specify an input field where the user can enter data.
## Table of contents
- [Browser Support](#browser-support)
- [Demo](#demo)
- [Getting started](#getting-started)
- [Usage](#usage)
- [Available Props](#available-props)
- [Methods](#methods)
- [Want to Contribute?](#want-to-contribute)
- [Collection of Components](#collection-of-components)
- [Changelog](#changelog)
- [License](#license)
- [Keywords](#Keywords)
## Browser Support
|  |  |  |  |  |
| ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| 83.0 ✔ | 77.0 ✔ | 13.1.1 ✔ | 83.0 ✔ | 11.9 ✔ |
## Demo
[](https://github.com/weblineindia/ReactJS-Text-Box/input.gif)
## Getting started
Install the npm package:
```bash
npm install react-weblineindia-text-box
#OR
yarn add react-weblineindia-text-box
```
## Usage
Use the `` component:
```js
import React ,{ Component } from 'react';
import TextBox from 'react-weblineindia-text-box'
class Test extends Component {
constructor(props) {
super(props);
this.state = {
vData: ""
};
onChange(event){
this.setState({
vData : event.target.value
})
}
render(){
return (
)}
}
```
## Available Props
| Prop | Type | default | Description |
| ------------ | ------- | ------- | ---------------------------------------------- |
| id | String | | ID for the input |
| name | String | | Name for the input |
| value | string | | Value of the component |
| classname | object | | Class to the input |
| placeholder | String | | The input field will get this placeholder text |
| hide | Boolean | false | Hide component |
| disabled | Boolean | false | Disable component |
| tabindex | Number | 0 | Tab index of the component |
| maxlength | Number | 25 | The input maxlength |
| regex | RegExp | | The input regex |
| autocomplete | String | off | The input of autocomplelete |
| type | String | text | Type for the input |
| isnumberonly | Boolean | false | The input field will get number value |
## Methods
| Name | Description |
| -------- | ---------------------------------------------------------------- |
| onFocus | Gets triggered when the autocomplete input field receives focus. |
| onBlur | Gets triggered when the autocomplete input field loses focus. |
| onChange | Gets triggered when the autocomplete results got changed. |
| onKeypress | Gets triggered when a key gets pressed. |
| onKeyDown | Gets triggered when a key gets down. |
| onKeyUp | Gets triggered when a key gets up. |
## Want to Contribute?
- Created something awesome, made this code better, added some functionality, or whatever (this is the hardest part).
- [Fork it](http://help.github.com/forking/).
- Create new branch to contribute your changes.
- Commit all your changes to your branch.
- Submit a [pull request](http://help.github.com/pull-requests/).
---
## Collection of Components
We have built many other components and free resources for software development in various programming languages. Kindly click here to view our [Free Resources for Software Development](https://www.weblineindia.com/software-development-resources.html)
---
## Changelog
Detailed changes for each release are documented in [CHANGELOG.md](./CHANGELOG.md).
## License
[MIT](LICENSE)
[mit]: https://github.com/weblineindia/ReactJS-Text-Box/blob/master/LICENSE
## Keywords
react-weblineindia-textbox, react-weblineindia-text-box, react-textbox, text-input, reactjs-input, react-input-field, react-text-input