@2e32/react-input
Version:
A React input component
390 lines (365 loc) • 8.86 kB
Markdown
# @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<HTMLInputElement>) => void
</code>
</td>
</tr>
</tbody>
</table>
## Примеры
Смотри [storybook](https://github.com/2e32/react-input-storybook).
## Лицензия
[MIT](https://choosealicense.com/licenses/mit)