npm package: @2e32/react-input
Description: A React input component
Author: konstantin_b
Latest version: 1.0.0

# @2e32/react-input

[English (en)](README.md)

React текстовое поле ввода.

## Установка

npm

```bash
npm i @2e32/react-input
```

yarn

```bash
yarn add @2e32/react-input
```

## Использование

App.js

```javascript
// Единожды подключить стиль на уровне приложения (точки входа)
import '@2e32/react-input/css';

const App = () => <Page />;

export default App;
```

Page.js

```javascript
import { useState, useCallback } from 'react';
// Импортировать компонент
import Input from '@2e32/react-input';

const Page = () => {
  const [str, setStr] = useState('');

  const handleChange = useCallback((newStr) => {
    setStr(newStr);
  }, []);

  return <Input value={str} label="Label" onChange={handleChange} />;
};

export default Page;
```

## Свойства

<table>
  <thead>
    <tr>
      <th>Название</th>
      <th>Тип</th>
      <th>Значение по умолчанию</th>
      <th>Описание</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>id</td>
      <td>
        <code>string</code>
      </td>
      <td></td>
      <td>Идентификатор элемента в документе.</td>
    </tr>
    <tr>
      <td>value</td>
      <td>
        <code>string</code>
      </td>
      <td></td>
      <td>
        Значение элемента формы.
        <br />
        <br />
        ⚠️ Используйте <code>value</code> для контролируемого состояния.
      </td>
    </tr>
    <tr>
      <td>defaultValue</td>
      <td>
        <code>string</code>
      </td>
      <td></td>
      <td>
        Значение элемента формы.
        <br />
        <br />
        ⚠️ Используйте <code>defaultValue</code> для неконтролируемого состояния.
      </td>
    </tr>
    <tr>
      <td>label</td>
      <td>
        <code>React.ReactNode</code>
      </td>
      <td></td>
      <td>Подпись элемента формы.</td>
    </tr>
    <tr>
      <td>placeholder</td>
      <td>
        <code>string</code>
      </td>
      <td></td>
      <td>Текст-подсказка в поле ввода.</td>
    </tr>
    <tr>
      <td>hint</td>
      <td>
        <code>React.ReactNode</code>
      </td>
      <td></td>
      <td>Подсказка.</td>
    </tr>
    <tr>
      <td>inputProps</td>
      <td>
        <code>InputControlProps</code>
      </td>
      <td></td>
      <td>Props пробрасываемые непосредственно в HTML-элемент input.</td>
    </tr>
    <tr>
      <td>className</td>
      <td>
        <code>string</code>
      </td>
      <td></td>
      <td>CSS-класс.</td>
    </tr>
    <tr>
      <td>style</td>
      <td>
        <code>React.CSSProperties</code>
      </td>
      <td></td>
      <td>Стиль.</td>
    </tr>
    <tr>
      <td>labelClassName</td>
      <td>
        <code>string</code>
      </td>
      <td></td>
      <td>CSS-класс label.</td>
    </tr>
    <tr>
      <td>inputClassName</td>
      <td>
        <code>string</code>
      </td>
      <td></td>
      <td>CSS-класс элемента input.</td>
    </tr>
    <tr>
      <td>hintClassName</td>
      <td>
        <code>string</code>
      </td>
      <td></td>
      <td>CSS-класс hint.</td>
    </tr>
    <tr>
      <td>disabled</td>
      <td>
        <code>boolean</code>
      </td>
      <td>
        <code>false</code>
      </td>
      <td>
        Компонент отключен (значение не может быть изменено, получение фокуса запрещено).
      </td>
    </tr>
    <tr>
      <td>readOnly</td>
      <td>
        <code>boolean</code>
      </td>
      <td>
        <code>false</code>
      </td>
      <td>Компонент только на чтение (значение не может быть изменено).</td>
    </tr>
    <tr>
      <td>required</td>
      <td>
        <code>boolean</code>
      </td>
      <td>
        <code>false</code>
      </td>
      <td>
        Значение должно быть обязательно заполнено (добавляет в label знак обязательности).
      </td>
    </tr>
    <tr>
      <td>allowClear</td>
      <td>
        <code>boolean</code>
      </td>
      <td>
        <code>false</code>
      </td>
      <td>Отображать кнопку очистки значения.</td>
    </tr>
    <tr>
      <td>block</td>
      <td>
        <code>boolean</code>
      </td>
      <td>
        <code>false</code>
      </td>
      <td>Компонент занимает всю ширину контейнера.</td>
    </tr>
    <tr>
      <td>loading</td>
      <td>
        <code>boolean</code>
      </td>
      <td>
        <code>false</code>
      </td>
      <td>Отображать индикатор загрузки.</td>
    </tr>
    <tr>
      <td>clearIcon</td>
      <td>
        <code>React.ReactNode</code>
      </td>
      <td></td>
      <td>Иконка очистки содержимого.</td>
    </tr>
    <tr>
      <td>clearClassName</td>
      <td>
        <code>string</code>
      </td>
      <td></td>
      <td>CSS-класс кнопки очистки.</td>
    </tr>
    <tr>
      <td>asteriskIcon</td>
      <td>
        <code>React.ReactNode</code>
      </td>
      <td>*</td>
      <td>Иконка обязательности заполнения.</td>
    </tr>
    <tr>
      <td>asteriskPosition</td>
      <td>
        <code>'left' | 'right'</code>
      </td>
      <td>
        <code>'right'</code>
      </td>
      <td>Позиция иконки обязательности.</td>
    </tr>
    <tr>
      <td>asteriskClassName</td>
      <td>
        <code>string</code>
      </td>
      <td></td>
      <td>
        CSS-класс контейнера, в котором располагается <code>asteriskIcon</code>.
      </td>
    </tr>
    <tr>
      <td>prependOuter</td>
      <td>
        <code>React.ReactNode</code>
      </td>
      <td></td>
      <td>Внешний контент перед компонентом.</td>
    </tr>
    <tr>
      <td>prependInner</td>
      <td>
        <code>React.ReactNode</code>
      </td>
      <td></td>
      <td>Внутренний контент перед полем ввода.</td>
    </tr>
    <tr>
      <td>appendInner</td>
      <td>
        <code>React.ReactNode</code>
      </td>
      <td></td>
      <td>Внутренний контент после поля ввода.</td>
    </tr>
    <tr>
      <td>appendOuter</td>
      <td>
        <code>React.ReactNode</code>
      </td>
      <td></td>
      <td>Внешний контент после компонента.</td>
    </tr>
    <tr>
      <td>prependOuterClassName</td>
      <td>
        <code>string</code>
      </td>
      <td></td>
      <td>
        CSS-класс контейнера, в котором располагается <code>prependOuter</code>.
      </td>
    </tr>
    <tr>
      <td>prependInnerClassName</td>
      <td>
        <code>string</code>
      </td>
      <td></td>
      <td>
        CSS-класс контейнера, в котором располагается <code>prependInner</code>.
      </td>
    </tr>
    <tr>
      <td>appendInnerClassName</td>
      <td>
        <code>string</code>
      </td>
      <td></td>
      <td>
        CSS-класс контейнера, в котором располагается <code>appendInner</code>.
      </td>
    </tr>
    <tr>
      <td>appendOuterClassName</td>
      <td>
        <code>string</code>
      </td>
      <td></td>
      <td>
        CSS-класс контейнера, в котором располагается <code>appendOuter</code>.
      </td>
    </tr>
    <tr>
      <td>onClear</td>
      <td>
        <code>function</code>
      </td>
      <td></td>
      <td>
        Вызывается при очистке значения (через кнопку очистки).
        <br />
        <br />
        <code>(clearedValue: string) => void</code>
      </td>
    </tr>
    <tr>
      <td>onChange</td>
      <td>
        <code>function</code>
      </td>
      <td></td>
      <td>
        Вызывается при изменении значения (ввод, очистка).
        <br />
        <br />
        <code>
          (newValue: string, e: React.ChangeEvent&lt;HTMLInputElement&gt;) => void
        </code>
      </td>
    </tr>
  </tbody>
</table>

## Примеры

Смотри [storybook](https://github.com/2e32/react-input-storybook).

## Лицензия

[MIT](https://choosealicense.com/licenses/mit)