Package Exports

@idui/react-inputs
@idui/react-inputs/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@idui/react-inputs) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Input React Component

Install

npm install --save @idui/react-inputs

yarn add @idui/react-inputs

TextInput

Docs
Playground
For using mask add props (all props supported) from @idui/react-mask-input

import React from 'react'
import { TextInput } from '@idui/react-inputs'

function Example() {
    const [value, setValue] = useState('');

    return (
        <TextInput
            value={value}
            onChange={setValue}
            type="text"
            
            onlyValue // call onChange with value, true by default
            isClearable // whether show clear icon or not, true by default
            onClear={undefined} // clear icon click handler, if not specified onChange with empty value called instead
            rightAddon={<SomeIcon />}
            leftAddon={<AnotherIcon />}
            disabled={false}
            hasError={false}

            mask="+7 (999)-999-99-99"// See @idui/react-mask-input mask, undefined by default
            maskPlaceholder="+7 (___)-___-__-__" // See @idui/react-mask-input maskPlaceholder
        />
    );
}

NumberInput

import React from 'react'
import { NumberInput } from '@idui/react-inputs'

function Example() {
    const [value, setValue] = useState('');

    return (
        <NumberInput
            value={value}
            onChange={setValue}
            type="text"
            onlyValue // call onChange with value, true by default
            thousandsSeparator=" " // separator inserted between thousands, space by default
            countOfDigitsAfterPoint={2} // count of digits in integral part of float value, undefined by default
            // ... TextInput props
        />
    );
}

useNumberInput hook

import React from 'react'
import { useNumberInput } from '@idui/react-inputs'

function Example({ value: providedValue, onChange  }) {
    const {value, ...handlers} = useNumberInput({
        onChange,
        countOfDigitsAfterPoint: undefined,
        thousandsSeparator: ", ",
        onlyValue: true,
        value: providedValue,
    });

    return (
        <input
            value={value}
            {...handlers}
        />
    );
}

SearchInput

import React from 'react'
import { SearchInput } from '@idui/react-inputs'

function Example() {
    const [value, setValue] = useState('');

    return (
        <SearchInput
            value={value}
            onChange={setValue}
            type="text"
            onlyValue // call onChange with value, true by default
            searchTimeout={300} // time interval during which onChange called only once, 300 by default
            showSearchIcon // whether show search icon or not, true by default
            searchIconPlacement="left" // show search icon 
            // ... TextInput props
        />
    );
}

useSearchInput hook

import React from 'react'
import { useNumberInput } from '@idui/react-inputs'

function Example({ value: providedValue, onSearch  }) {
    const {value, ...handlers} = useSearchInput({
        onChange: onSearch,
        searchTimeout: 300,
        onlyValue: true,
        value: providedValue,
    });

    return (
        <input
            value={value}
            {...handlers}
        />
    );
}

TagInput

import React from 'react'
import { TagInput } from '@idui/react-inputs'

function Example() {
    const [value, setValue] = useState(["tag1"]);

    return (
        <TagInput
            value={value}
            onChange={setValue}
            type="text"
            onlyValue // call onChange with value, true by default
            searchTimeout={300} // time interval during which onChange called only once, 300 by default
            showSearchIcon // whether show search icon or not, true by default
            searchIconPlacement="left" // show search icon 
            // ... TextInput props
        />
    );
}

Input

import React from 'react'
import Input from '@idui/react-inputs'

function Example(props) {
    const [value, setValue] = useState('');

    return (
        <Input
            value={value}
            onChange={setValue}
            // type="number" => NumberInput
            // type="search" => SearchInput
            // type="tag" // TagInput
            // any other type => TextInput
            
            // ... props for typed input
        />
    );
}

Styling

import React from 'react';
import styled from 'styled-components';
import { TextInput } from '@idui/react-inputs'; // or any other type of Input

const customColors = {
  default: {
    border: '#B3B3B3',
    color: '#313131',
    placeholder: '#B3B3B3',
    tag: '#14B9E4',
  },
  disabled: {
    border: '#f1eded',
    color: '#f1eded',
    tag: '#B3B3B3',
  },
  error: {
    border: '#C02908',
    color: '#C02908',
    background: '#FDDCDC',
    tag: '#C02908',
  },
  focused: {
    border: '#14B9E4',
    tag: '#11AFD9',
  },
};

const StyledTextInput = styled(TextInput)`
  min-height: 50px;
  padding: 12px 10px;
  border-radius: 15px;
  width: 500px;
  font-size: 16px;
`;

export function StylingExample({
  onChange,
  value: providedValue,
  onlyValue,
  ...props
}) {
  const [value, setValue] = useState(providedValue);

  useEffect(() => {
    setValue(providedValue);
  }, [providedValue]);

  const handleChange = useCallback(
    (e) => {
      setValue(onlyValue ? e : e.target.value);
      onChange(e);
    },
    [onChange, onlyValue]
  );

  return (
    <StyledTextInput
      {...props}
      value={value}
      onChange={handleChange}
      onClear={undefined}
      colors={customColors}
    />
  );
}

@idui/react-inputs