{"id":26042671,"url":"https://github.com/nstr/rc-inputs","last_synced_at":"2025-04-10T05:40:35.934Z","repository":{"id":65482688,"uuid":"82976738","full_name":"nstr/rc-inputs","owner":"nstr","description":"Special inputs for React JS","archived":false,"fork":false,"pushed_at":"2018-09-27T08:57:31.000Z","size":99,"stargazers_count":5,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-25T04:21:36.954Z","etag":null,"topics":["react","react-input","react-inputs","react-tags","reactjs"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/rc-inputs","language":"JavaScript","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/nstr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-23T22:14:41.000Z","updated_at":"2021-10-18T02:55:58.000Z","dependencies_parsed_at":"2023-01-25T10:45:29.181Z","dependency_job_id":null,"html_url":"https://github.com/nstr/rc-inputs","commit_stats":null,"previous_names":["njnest/rc-inputs"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nstr%2Frc-inputs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nstr%2Frc-inputs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nstr%2Frc-inputs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nstr%2Frc-inputs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nstr","download_url":"https://codeload.github.com/nstr/rc-inputs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248084893,"owners_count":21045135,"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":["react","react-input","react-inputs","react-tags","reactjs"],"created_at":"2025-03-07T16:44:07.803Z","updated_at":"2025-04-10T05:40:35.917Z","avatar_url":"https://github.com/nstr.png","language":"JavaScript","readme":"# rc-inputs\n\n* [Installation](#installation)\n* [EmailInput](#emailinput)\n* [PasswordInput](#passwordinput)\n* [TagInput](#taginput)\n* [Select](#select)\n\n## Installation\n\n```\nnpm i rc-inputs --save\n```\n\n## EmailInput\n\n```jsx\nimport { EmailInput } from \"rc-inputs\";\n\n\u003cEmailInput\n  className={\"some-class\"}\n  placeholder={\"Please enter a valid email address.\"}\n  value={\"some value\"}\n  onChange={(element) =\u003e console.log(\"value\", element.target.value)}\n  onValid={(valid, element) =\u003e console.log(\"valid\", valid, \"value\", element.target.value)}\n  onEnter={(value) =\u003e console.log(value)}\n  autofill={true}\n  autoComplete={\"email\"}     \n/\u003e\n```\n\nProperty | Type | Description\n:---|:---|:---\n`className` | string | CSS classes of the input.\n`placeholder` | string | Default placeholder of the input.\n`value` | string | Value of the input.\n`onChange` | function | The function returns the same as onChange of an average input.\n`onValid` | function | The first argument returns bool (true if the email is valid). The second argument returns the same as onChange of an average input.\n`onPaste` | function | Handler of paste event.\n`onEnter` | function | Handling enter button.\n`onFocus` | function | The function called after focus event.\n`onBlur` | function | The function called after blur (unfocus) event.\n`autofill` | bool | Turn off, turn on autofill. You can fetch \"remembers\" of a browser.\n`autoComplete` | string | Default autoComplete of the input.\n`clickableKeys` | array of int | This is keyCodes of keyboard events\n`onKeyClick` | function | Onclicks handler of `clickableKeys`\n\n## PasswordInput\n\n```jsx\nimport { PasswordInput } from \"rc-inputs\";\n\n\u003cPasswordInput\n  className={\"some-class\"}\n  placeholder={\"Password must be at least 6 characters\"}\n  value={\"qwerty123\"}\n  onChange={(element) =\u003e console.log(\"value\", element.target.value)}\n  pattern={\"^.{6,}$\"}\n  onValid={(valid, element) =\u003e console.log(\"valid\", valid, \"value\", element.target.value)}\n  onEnter={(value) =\u003e console.log(value)}\n  autofill={true}\n  autoComplete={\"password\"}     \n/\u003e\n```\n\nProperty | Type | Description\n:---|:---|:---\n`className` | string | CSS classes of the input.\n`placeholder` | string | Default placeholder of the input.\n`value` | string | Value of the input.\n`onChange` | function | The function returns the same as onChange of an average input.\n`pattern` | string | You can use RegExp for handle input value.\n`onValid` | function | The first argument of the function returns bool (true if the password is valid according to your pattern). The second argument returns the same as onChange of an average input. Without `pattern` property `onValid` doesn't work.\n`onEnter` | function | Handling enter button.\n`onPaste` | function | Handler of paste event.\n`onFocus` | function | The function called after focus event.\n`onBlur` | function | The function called after blur (unfocus) event.\n`autofill` | bool | Turn off, turn on autofill. You can fetch \"remembers\" of a browser.\n`autoComplete` | string | Default autoComplete of the input.\n`clickableKeys` | array of int | This is keyCodes of keyboard events\n`onKeyClick` | function | Onclicks handler of `clickableKeys`\n\n\n## Select\n\n```jsx\nimport { Select } from \"rc-inputs\";\nimport \"rc-inputs/styles/select.css\" // or select.less or select.scss\n\n\u003cSelect\n  className=\"some-class\"\n  options={[\n    {option: \"item 1\", className: \"test-1\", style: {backgroundColor: \"red\"}},\n    {option: \"item 2\", className: \"test-2\", style: {backgroundColor: \"green\"}},\n    {option: \"item 3\", className: \"test-3\", style: {backgroundColor: \"yellow\"}},\n    {option: \"item 4\", className: \"test-4\", style: {backgroundColor: \"blue\"}}\n  ]}\n  placeholder={\"placeholder\"}\n  listPlaceholder={\"the list is empty\"}\n  onChange={(e) =\u003e console.log(\"e\", e)}\n  selected={{option: \"item 2\"}}\n  customeArrow={\u003ci className=\"my-arrow\" /\u003e}\n/\u003e\n```\n\nProperty | Type | Description\n:---|:---|:---\n`className` | string | CSS classes of the Select.\n`dropdownClassName` | string | CSS classes for dropdown list of the Select.\n`activeClass` | string | CSS class for the active option\n`options` | array of string, or array of objects | In the case of using Objects, the tag requires a field `option` and in this case possible use to className and style. It is possible to to put the component in the field `option`. Example of the `option` like an Object `{option: \u003ci className=\"some-class\" /\u003e}` or `{option: \"item 1\", className: \"some-class\", style: {backgroundColor: \"red\"}}`.\n`listPlaceholder` | string or Object | This item will be shown if the list will be empty.\n`onChange` | function | The function returns selected option and index of this option.\n`activeIndex` | Int | If you are using jsx like a option `{option: \u003ci className=\"some-class\" /\u003e}`, you have to use `activeIndex`. Example bellow.\n\n```jsx\nclass App extends React.Component{\n  constructor(props) {\n    super(props);\n    this.state = {\n      activeIndex: 0,\n      option: \u003cspan\u003etest 1\u003c/span\u003e\n    };\n    this.handleSelect = this.handleSelect.bind(this);\n  }\n  handleSelect(option, index) {\n    this.setState({\n      activeIndex: index,\n      option: option\n    });\n  }\n  render() {\n    return (\n     \u003cSelect\n       onChange={this.handleSelect}\n       activeClass={\"active\"}\n       activeIndex={this.state.activeIndex}\n       selected={this.state.option}\n       options={[\n        {option: \u003cspan\u003eitem 1\u003c/span\u003e, className: \"some-class\"},\n        {option: \u003cspan\u003eitem 2\u003c/span\u003e, className: \"some-class\"},\n        {option: \u003cspan\u003eitem 3\u003c/span\u003e, className: \"some-class\"},\n        {option: \u003cspan\u003eitem 4\u003c/span\u003e, className: \"some-class\"}\n      ]}/\u003e\n    );\n  }\n}\n```\n\n## TagInput\n\n```jsx\nimport { TagInput } from \"rc-inputs\";\nimport \"rc-inputs/styles/tag-input.css\" // or tag-input.less or tag-input.scss\n\n\u003cTagInput\n  tags={[{name: \"some name\", href: \"https://www.some...\", className: \"some-tag-class\", style: {color: \"#fff\"}}]}\n  onAdd={(tag) =\u003e console.log(tag)}\n  onDelete={(tagIndex, tag, tags) =\u003e console.log(tagIndex, tag, tags)}\n  onChange={(tags) =\u003e console.log(tags)}\n  disableInput={false}\n  createTagOnKeys={[13, 32]}\n  createTagOnPress={[\",\"]}\n/\u003e\n```\n\nProperty | Type | Description\n:---|:---|:---\n`className` | string | CSS classes of the tag list element.\n`classNameWrap` | string | CSS classes of the element wrapper.\n`tags` | array of string, or array of objects | In the case of using Objects, the tag requires a name and in this case possible use to className and style. Example of the tag like an Object `{name: \"tag name\", className: \"some-class\", style: {color: \"#fff\"}}`.\n`onAdd` | function | The function returns new tag created by a user.\n`onDelete` | function | The first argument of the function  returns deleted tag. The second argument returns tag's index of deleted tag in the tags array. The third argument returns the tags.\n`onChange` | function | The function returns the array of current tags.\n`onInputChange` | function | Handler of own input typing.\n`onPaste` | function | Handler of paste event.\n`onFocus` | function | The function called after focus event.\n`onBlur` | function | The function called after blur (unfocus) event.\n`createTagOnKeys` | array (int) | Array of keyCodes. When you press this character on the keyboard, a tag will be created and functions `onAdd` and `onChange` will be called\n`createTagOnPress` | array | Array of characters. When you press this character on the keyboard, a tag will be created and functions `onAdd` and `onChange` will be called\n`disableInput` | bool | You can hide input. In this case `TagInput` will be just for reading.\n`dynamicInputWidth` | bool | The prop makes any inner input(custom or default) stretched on all remaining width. The default is false.\n`autocomplete` | object | Special data for autocomplete. See schema below.\n`showAutocomplete` | bool | An alternative way to show and hide an indenture autocomplete.\n`inputValue` | string | Value setter. Use only with `autocomplete` and included input. This prop required if you want to use `autocomplete`.\n`onSelect` | function | The function returns selected tag from `autocomplete` and all used `tags`\n`renderAutocompleteItem` | function | The function for render custom autocomplete items.\n\nAutocomplete Schema\n\nProperty | Type | Description\n:---|:---|:---\n`items` | array | Displayed items of autocomplete\n`searchKey` | string | If you are using objects in `items` you will have to select key of an object on which will be searched.\n`searchPath` | string | Completely the same as `searchKey` but works for the deep key. Use dots for going deeper. For exemple key for object `{test: {abc: 123}}` will be `test.abc`. Attention! It doesn't work with `searchKey`.\n`label` | string | text in the begin of the autocomplete list.\n`isUnderInput` | bool | Show autocomplete under input (on another line).\n\nAlso exist posobility include some elements into TagInput. In this way, the elements will be added after all elements of TagInput. If you are using autocomplete, don't forget `inputValue`. Usage example: Add EmailInput Component with handling valid emails.\n\n```jsx\nclass SomeComponent extends React.Component{\n  constructor(props) {\n    super(props);\n    this.state = {\n      emails: [],\n      isValid: false,\n      inputValue: \"\"\n    };\n    this.addTag = this.addTag.bind(this);\n    this.handleValidity = this.handleValidity.bind(this);\n  }\n  addTag(value) {\n    if (this.state.isValid) {\n      const emails = this.state.emails.concat([value]);\n      this.setState({\n        emails: emails,\n        inputValue: \"\"\n      });\n    }\n  }\n  handleValidity(isValid, e) {\n    this.setState({\n      isValid: isValid,\n      inputValue: e.target.value\n    });\n  }\n  render() {\n    return (\n      \u003cTagInput disableInput={true}\n        inputValue={this.state.inputValue}\n        autocomplete={{\n          items: [{userData: {email: \"test@test.co\"}, name: \"jo\"},\n          {userData: {email: \"tom@gmail.com\"}, name: \"tom\"},\n          {userData: {email: \"mark@mark.net\"}, name: \"mark\"},\n          {userData: {email: \"al@amazon.com\"}, name: \"alice\"},\n          {userData: {email: \"al@al.co\"}, name: \"alex\"}],\n          searchPath: \"userData.email\",\n          className: \"list\",\n          label: \"this is label:\"\n        }}\n        tags={this.state.emails}\u003e\n        \u003cEmailInput value={this.state.inputValue}\n          onEnter={this.addTag}\n          onValid={this.handleValidity} /\u003e\n       \u003c/TagInput\u003e\n      );\n   }\n}\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnstr%2Frc-inputs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnstr%2Frc-inputs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnstr%2Frc-inputs/lists"}