rc-inputs v0.7.18

rc-inputs

• Installation
• EmailInput
• PasswordInput
• TagInput
• Select

Installation

npm i rc-inputs --save

EmailInput

import { EmailInput } from "rc-inputs";

<EmailInput
  className={"some-class"}
  placeholder={"Please enter a valid email address."}
  value={"some value"}
  onChange={(element) => console.log("value", element.target.value)}
  onValid={(valid, element) => console.log("valid", valid, "value", element.target.value)}
  onEnter={(value) => console.log(value)}
  autofill={true}
  autoComplete={"email"}     
/>

PasswordInput

import { PasswordInput } from "rc-inputs";

<PasswordInput
  className={"some-class"}
  placeholder={"Password must be at least 6 characters"}
  value={"qwerty123"}
  onChange={(element) => console.log("value", element.target.value)}
  pattern={"^.{6,}$"}
  onValid={(valid, element) => console.log("valid", valid, "value", element.target.value)}
  onEnter={(value) => console.log(value)}
  autofill={true}
  autoComplete={"password"}     
/>

Select

import { Select } from "rc-inputs";
import "rc-inputs/styles/select.css" // or select.less or select.scss

<Select
  className="some-class"
  options={[
    {option: "item 1", className: "test-1", style: {backgroundColor: "red"}},
    {option: "item 2", className: "test-2", style: {backgroundColor: "green"}},
    {option: "item 3", className: "test-3", style: {backgroundColor: "yellow"}},
    {option: "item 4", className: "test-4", style: {backgroundColor: "blue"}}
  ]}
  placeholder={"placeholder"}
  listPlaceholder={"the list is empty"}
  onChange={(e) => console.log("e", e)}
  selected={{option: "item 2"}}
  customeArrow={<i className="my-arrow" />}
/>

class App extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      activeIndex: 0,
      option: <span>test 1</span>
    };
    this.handleSelect = this.handleSelect.bind(this);
  }
  handleSelect(option, index) {
    this.setState({
      activeIndex: index,
      option: option
    });
  }
  render() {
    return (
     <Select
       onChange={this.handleSelect}
       activeClass={"active"}
       activeIndex={this.state.activeIndex}
       selected={this.state.option}
       options={[
        {option: <span>item 1</span>, className: "some-class"},
        {option: <span>item 2</span>, className: "some-class"},
        {option: <span>item 3</span>, className: "some-class"},
        {option: <span>item 4</span>, className: "some-class"}
      ]}/>
    );
  }
}

TagInput

import { TagInput } from "rc-inputs";
import "rc-inputs/styles/tag-input.css" // or tag-input.less or tag-input.scss

<TagInput
  tags={[{name: "some name", href: "https://www.some...", className: "some-tag-class", style: {color: "#fff"}}]}
  onAdd={(tag) => console.log(tag)}
  onDelete={(tagIndex, tag, tags) => console.log(tagIndex, tag, tags)}
  onChange={(tags) => console.log(tags)}
  disableInput={false}
  createTagOnKeys={[13, 32]}
  createTagOnPress={[","]}
/>

Autocomplete Schema

Also 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.

class SomeComponent extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      emails: [],
      isValid: false,
      inputValue: ""
    };
    this.addTag = this.addTag.bind(this);
    this.handleValidity = this.handleValidity.bind(this);
  }
  addTag(value) {
    if (this.state.isValid) {
      const emails = this.state.emails.concat([value]);
      this.setState({
        emails: emails,
        inputValue: ""
      });
    }
  }
  handleValidity(isValid, e) {
    this.setState({
      isValid: isValid,
      inputValue: e.target.value
    });
  }
  render() {
    return (
      <TagInput disableInput={true}
        inputValue={this.state.inputValue}
        autocomplete={{
          items: [{userData: {email: "test@test.co"}, name: "jo"},
          {userData: {email: "tom@gmail.com"}, name: "tom"},
          {userData: {email: "mark@mark.net"}, name: "mark"},
          {userData: {email: "al@amazon.com"}, name: "alice"},
          {userData: {email: "al@al.co"}, name: "alex"}],
          searchPath: "userData.email",
          className: "list",
          label: "this is label:"
        }}
        tags={this.state.emails}>
        <EmailInput value={this.state.inputValue}
          onEnter={this.addTag}
          onValid={this.handleValidity} />
       </TagInput>
      );
   }
}