{"id":22096526,"url":"https://github.com/pksilen/semantic-ui-react-lineinput","last_synced_at":"2025-07-24T22:32:08.367Z","repository":{"id":35107166,"uuid":"206315327","full_name":"pksilen/semantic-ui-react-lineinput","owner":"pksilen","description":"Line input control with validation support for Semantic UI React","archived":false,"fork":false,"pushed_at":"2023-10-18T14:00:29.000Z","size":4233,"stargazers_count":2,"open_issues_count":2,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-10-31T17:20:05.453Z","etag":null,"topics":["input","javascript","javascript-library","library","line","react","semantic-ui","text","validation"],"latest_commit_sha":null,"homepage":"https://pksilen.github.io/semantic-ui-react-lineinput","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pksilen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null},"funding":{"custom":["paypal.me/pksilen"]}},"created_at":"2019-09-04T12:35:40.000Z","updated_at":"2023-01-14T05:24:23.000Z","dependencies_parsed_at":"2023-09-23T16:34:21.382Z","dependency_job_id":null,"html_url":"https://github.com/pksilen/semantic-ui-react-lineinput","commit_stats":{"total_commits":66,"total_committers":3,"mean_commits":22.0,"dds":0.4545454545454546,"last_synced_commit":"1ded469052524f2b458898349fcf5047e67d01e0"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pksilen%2Fsemantic-ui-react-lineinput","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pksilen%2Fsemantic-ui-react-lineinput/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pksilen%2Fsemantic-ui-react-lineinput/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pksilen%2Fsemantic-ui-react-lineinput/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pksilen","download_url":"https://codeload.github.com/pksilen/semantic-ui-react-lineinput/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227482485,"owners_count":17779968,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["input","javascript","javascript-library","library","line","react","semantic-ui","text","validation"],"created_at":"2024-12-01T04:11:30.388Z","updated_at":"2024-12-01T04:11:31.160Z","avatar_url":"https://github.com/pksilen.png","language":"TypeScript","funding_links":["paypal.me/pksilen"],"categories":[],"sub_categories":[],"readme":"# semantic-ui-react-lineinput\n\nLine input control with validation support for [Semantic UI React]\n\n[![version][version-badge]][package]\n[![build][build]][circleci]\n[![Downloads][downloads]][package]\n[![coverage][coverage]][codecov]\n[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=pksilen_semantic-ui-react-lineinput\u0026metric=alert_status)][sonarcloud]\n[![Bugs](https://sonarcloud.io/api/project_badges/measure?project=pksilen_semantic-ui-react-lineinput\u0026metric=bugs)][sonarcloud]\n[![Vulnerabilities](https://sonarcloud.io/api/project_badges/measure?project=pksilen_semantic-ui-react-lineinput\u0026metric=vulnerabilities)][sonarcloud]\n[![MIT License][license-badge]][license]\n\n![Example image of LineInput](https://raw.githubusercontent.com/pksilen/semantic-ui-react-lineinput/master/example/example1.png)\n   \n![Example image of LineInput](https://raw.githubusercontent.com/pksilen/semantic-ui-react-lineinput/master/example/example2.png)\n    \n![Example image of LineInput](https://raw.githubusercontent.com/pksilen/semantic-ui-react-lineinput/master/example/example3.png)\n\n![Example image of LineInput](https://raw.githubusercontent.com/pksilen/semantic-ui-react-lineinput/master/example/example4.png)\n\n![Example image of LineInput](https://raw.githubusercontent.com/pksilen/semantic-ui-react-lineinput/master/example/example5.png)\n\n![Example image of LineInput](https://raw.githubusercontent.com/pksilen/semantic-ui-react-lineinput/master/example/example6.png)\n\n## Prerequisites\n    \"react\": \"^16.0.0\",\n    \"react-dom\": \"^16.0.0\",\n    \"semantic-ui-react\": \"^0.87.0\"\n\n## Installation\n    npm install --save semantic-ui-react-lineinput\n    \n## Demo\n   LineInput [demo] \n   \n## Example usage\n```jsx\n import React from 'react';\n import LineInput from 'semantic-ui-react-lineinput';\n\n class LineInputExample extends React.Component {\n\n     constructor(props) {\n         super(props);\n         this.state = {\n             value: \"\"\n         };\n     }\n\n     changeValue = (newValue) =\u003e {\n         this.setState({ value: newValue });\n     }\n\n     render() =\u003e {(\n         \u003cLineInput value={this.state.value} onValueChange={this.changeValue} /\u003e\n     )};\n }\n ```\n    \nLineInput with predefined validations\n\n```jsx\n\u003cLineInput errorText=\"value must be an integer\" validation=\"integer\" value={this.state.value} onValueChange={this.changeValue} /\u003e             \n\u003cLineInput errorText=\"Invalid e-mail address\" validation=\"emailAddress\" value={this.state.value} onValueChange={this.changeValue} /\u003e\n```\n    \nLineInput with regular expression validation\n     \n```jsx     \nconst regExp = /^\\d{3,4}$/;\n\u003cLineInput validation={regExp} value={this.state.value} onValueChange={this.changeValue} /\u003e\n```\n     \nLineInput with validation function\n\n```jsx\nconst isEvenNumber = (valueStr) =\u003e {\n  const value = parseInt(valueStr, 10);\n  return value % 2 === 0;\n}\n\n\u003cLineInput validation={isEvenNumber} value={this.state.value} onValueChange={this.changeValue} /\u003e\n```\n      \nLineInput with list of allowed values validation (case sensitive)\n\n```jsx\nconst allowedValues = ['value1', 'value2', 'value3'];\n\u003cLineInput validation={allowedValues} value={this.state.value} onValueChange={this.changeValue} /\u003e\n```\n    \nMore examples can be found in `demo/demo.tsx` file.\n   \n## Mandatory properties      \n    value: string, \n    onValueChange: (newValue: string) =\u003e void,\n         \n## Optional properties\n| property                  | description                                                                                                                                                        |\n| --------------------------| -------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| allowEmptyValue           | Specifies if empty value for input is allowed                                                                                                                      |\n| className                 | class names for outer div                                                                                                                                          |\n| countryCode               | Default country code ISO 3166-1 Alpha-2 code for phone number validation, if not supplied, browser's country code is used                                          |\n| creditCardNumber          | Credit card number for CVC validation                                                                                                                              |\n| disabled                  | Specified if input is enabled or disabled                                                                                                                          |\n| errorText                 | Text shown if validation fails                                                                                                                                     |\n| errorTextPosition         | Position where error text is shown                                                                                                                                 |\n| focus                     | Input has initial focus style                                                                                                                                      |\n| icon                      | Name of Semantic UI icon to be shown in input, is overridden by validationErrorIcon or validationSuccessIcon, has no effect for validation type 'creditCardNumber  |\n| iconColor                 | Color for icon (red, orange, yellow, olive, green, teal, blue, violet, purple, pink, brown, grey, black                                                            |\n| iconPosition              | Position where the icon is shown                                                                                                                                   |\n| maxLength                 | Maximum number of characters allowed for input control value                                                                                                       |\n| maxValue                  | Maximum allowed value when validation is 'number' or 'integer'                                                                                                     |\n| minLength                 | Minimum number of characters needed for input control value                                                                                                        |\n| minValue                  | Minimum allowed value when validation is 'number' or 'interger'                                                                                                    | \n| placeholder               | Placeholder value for input control                                                                                                                                |\n| size                      | Size of control                                                                                                                                                    |\n| type                      | HTML input type, if undefined, sets type automatically according to validation or otherwise 'text'                                                                 |\n| validation                | Validation keyword, a regular expression or a validation function                                                                                                  |\n| validationErrorIcon       | Semantic UI icon name to be shown if validation fails, overrides icon set by icon prop, has no effect for validation type 'creditCardNumber'                       |\n| validationSuccessIcon     | Semantic UI icon name to be shown if validation succeeds, overrides icon set by icon prop, has no effect for validation type 'creditCardNumber'                    |\n\n    \n## Optional property types\n```ts\n allowEmptyValue: boolean,\n className: string,  \n countryCode: string,\n creditCardNumber: string,\n disabled: boolean,\n errorText: string,\n errorTextPosition: 'bottom' | 'right',\n focus: boolean,\n icon: string,\n iconColor: string,\n iconPosition: 'left' | 'right',\n maxLength: number,\n maxValue: number,\n minLength: number,\n minValue: number,\n placeholder: string,\n size: 'mini' | 'small' | 'large' | 'big' | 'huge' | 'massive',\n type: string,\n validation: RegExp | string[] | (inputString: string) =\u003e boolean | 'url' | 'emailAddress' | 'creditCardNumber' | 'creditCardExpiration' | 'creditCardVerificationCode' | 'number' | 'integer' | 'alphaNumeric' | 'usZipCode' | 'caPostCode' | 'ukPostCode' | 'phoneNumber' | 'usSSN' | 'ipAddress' | 'ipv4Address' | 'ipv6Address' | 'hexColor'\n ```\n        \n## Default values for optional properties\n```js\nallowEmptyValue: false,\nclassName: undefined,\ncountryCode: '',\ncreditCardNumber: '',\ndisabled: false,\nerrorText: '',\nerrorTextPosition: 'bottom',\nfocus: false,\nicon: '',\niconColor: undefined,\niconPosition: 'left',\nmaxLength: undefined,\nmaxValue: undefined,\nminLength: undefined,\nminValue: undefined,\nplaceholder: '',\nsize: 'small',\ntype: undefined,\nvalidation: undefined\n ```\n    \n## Styling example\n   ![Example image of LineInput](https://raw.githubusercontent.com/pksilen/semantic-ui-react-lineinput/master/example/styled_example.png) \n   \n   ![Example image of LineInput](https://raw.githubusercontent.com/pksilen/semantic-ui-react-lineinput/master/example/styled_example2.png)\n    \n   styles.css\n \n ```css\n .expiration {\n   margin-left: 0.5em;\n }\n\n .expiration input {\n   width: 4.9em;\n }\n\n .cvc {\n   margin-left: 0.5em;\n }\n\n .cvc input {\n   margin-left: 0.5em;\n   width: 3.5em;\n }\n ```\n   \n   Applying CSS using className\n       \n ```jsx\n \u003cLineInput size=\"huge\" placeholder=\"Enter credit card number...\" errorText=\"must be a valid credit card number\" validation=\"creditCardNumber\" onValueChange={this.changeCreditCardNumber} value={creditCardNumber}/\u003e\n \u003cLineInput className=\"expiration\" size=\"huge\" placeholder=\"MM / YY\" errorText=\"must be a MM / YY\" validation=\"creditCardExpiration\" onValueChange={this.changeCreditCardExpiration} value={creditCardExpiration}/\u003e\n \u003cLineInput className=\"cvc\" size=\"huge\" placeholder=\"CVC\" errorText=\"must be a CVC\" validation=\"creditCardVerificationCode\" onValueChange={this.changeCVCValue} value={cvc}/\u003e\n ```\n\n## Credit card validations\nSupported cards\n* American Express\n* Dankort\n* Diners Club\n* Discover\n* JCB\n* Laser\n* Maestro\n* MasterCard\n* UnionPay\n* Visa\n* Visa Electron\n\nCredit card number must pass Luhn check\n\nCredit card expiration is supported in format 'MM / YY'\n\nCredit card verification code (CVC) can validated with two options\n* Without credit card number: it must be 3-4 digits\n* With credit card number: it must be 3-4 digits depending on the supplied credit card type\n\n## License\nMIT License\n\n[license-badge]: https://img.shields.io/badge/license-MIT-green\n[license]: https://github.com/pksilen/semantic-ui-react-lineinput/blob/master/LICENSE\n[version-badge]: https://img.shields.io/npm/v/semantic-ui-react-lineinput.svg?style=flat-square\n[package]: https://www.npmjs.com/package/semantic-ui-react-lineinput\n[downloads]: https://img.shields.io/npm/dm/semantic-ui-react-lineinput\n[build]: https://img.shields.io/circleci/project/github/pksilen/semantic-ui-react-lineinput/master.svg?style=flat-square\n[circleci]: https://circleci.com/gh/pksilen/semantic-ui-react-lineinput/tree/master\n[coverage]: https://img.shields.io/codecov/c/github/pksilen/semantic-ui-react-lineinput/master.svg?style=flat-square\n[codecov]: https://codecov.io/gh/pksilen/semantic-ui-react-lineinput\n[sonarcloud]: https://sonarcloud.io/dashboard?id=pksilen_semantic-ui-react-lineinput\n[demo]: https://pksilen.github.io/semantic-ui-react-lineinput/\n[Semantic UI React]: https://react.semantic-ui.com/\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpksilen%2Fsemantic-ui-react-lineinput","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpksilen%2Fsemantic-ui-react-lineinput","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpksilen%2Fsemantic-ui-react-lineinput/lists"}