A React input component
npm install @2e32/react-inputReact текстовое поле ввода.
npm
``bash`
npm i @2e32/react-input
yarn
`bash`
yarn add @2e32/react-input
App.js
`javascript
// Единожды подключить стиль на уровне приложения (точки входа)
import '@2e32/react-input/css';
const App = () =>
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 ;
};
export default Page;
``
| Название | Тип | Значение по умолчанию | Описание |
|---|---|---|---|
| id | string | Идентификатор элемента в документе. | |
| value | string | Значение элемента формы. ⚠️ Используйте value для контролируемого состояния. | |
| defaultValue | string | Значение элемента формы. ⚠️ Используйте defaultValue для неконтролируемого состояния. | |
| label | React.ReactNode | Подпись элемента формы. | |
| placeholder | string | Текст-подсказка в поле ввода. | |
| hint | React.ReactNode | Подсказка. | |
| inputProps | InputControlProps | Props пробрасываемые непосредственно в HTML-элемент input. | |
| className | string | CSS-класс. | |
| style | React.CSSProperties | Стиль. | |
| labelClassName | string | CSS-класс label. | |
| inputClassName | string | CSS-класс элемента input. | |
| hintClassName | string | CSS-класс hint. | |
| disabled | boolean | false | Компонент отключен (значение не может быть изменено, получение фокуса запрещено). |
| readOnly | boolean | false | Компонент только на чтение (значение не может быть изменено). |
| required | boolean | false | Значение должно быть обязательно заполнено (добавляет в label знак обязательности). |
| allowClear | boolean | false | Отображать кнопку очистки значения. |
| block | boolean | false | Компонент занимает всю ширину контейнера. |
| loading | boolean | false | Отображать индикатор загрузки. |
| clearIcon | React.ReactNode | Иконка очистки содержимого. | |
| clearClassName | string | CSS-класс кнопки очистки. | |
| asteriskIcon | React.ReactNode | * | Иконка обязательности заполнения. |
| asteriskPosition | 'left' | 'right' | 'right' | Позиция иконки обязательности. |
| asteriskClassName | string | CSS-класс контейнера, в котором располагается asteriskIcon. | |
| prependOuter | React.ReactNode | Внешний контент перед компонентом. | |
| prependInner | React.ReactNode | Внутренний контент перед полем ввода. | |
| appendInner | React.ReactNode | Внутренний контент после поля ввода. | |
| appendOuter | React.ReactNode | Внешний контент после компонента. | |
| prependOuterClassName | string | CSS-класс контейнера, в котором располагается prependOuter. | |
| prependInnerClassName | string | CSS-класс контейнера, в котором располагается prependInner. | |
| appendInnerClassName | string | CSS-класс контейнера, в котором располагается appendInner. | |
| appendOuterClassName | string | CSS-класс контейнера, в котором располагается appendOuter. | |
| onClear | function | Вызывается при очистке значения (через кнопку очистки). (clearedValue: string) => void | |
| onChange | function | Вызывается при изменении значения (ввод, очистка). |
Смотри storybook.