README
@n3/react-input
Инпут для приложений на базе @n3/input
.
import Input from '@n3/react-input';
Использование
Обычный инпут
import React, { useState } from 'react';
import Input from '@n3/react-input';
const Example = () => {
const [value, setValue] = useState('');
<Input
value={value}
onChange={(event) => {
setValue(event.target.value);
}}
/>
};
С кнопкой
import React, { useState } from 'react';
import Input, {
StyledButton,
} from '@n3/react-input';
const Example = () => {
const [value, setValue] = useState('');
<Input
value={value}
onChange={(event) => {
setValue(event.target.value);
}}
buttons={[
(inputProps, index) => (
<StyledButton
type="button"
key={index}
>
<FontAwesomeIcon
icon="cog"
/>
</StyledButton>
),
(inputProps, index) => (
<StyledButton
type="button"
key={index}
>
<FontAwesomeIcon
icon="file"
/>
</StyledButton>
),
]}
/>
};
Обычный инпут
const [value, setValue] = useState('');
<Input
value={value}
onChange={(event) => {
setValue(event.target.value);
}}
/>
Props
Input
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
component | InputComponent | Компонент корневого элемента инпута | ||
disabled | boolean | Выключено ли поле | ||
hasError | boolean | Есть ли у поля ошибка | ||
hasWarning | boolean | Есть ли у поля предупреждение | ||
small | boolean | Маленькое ли поле | ||
className | string | Дополнительный класс корневого компонента инпута | ||
isOnlyBorderBottom | boolean | Отображение без рамки только с подчёркиванием снизу | ||
buttons | RenderInputButton[] | Массив функций реднеда кнопок @param props - все props инпута @param index - индекс кнопки |
StyledButton
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
disabled | boolean | Кнопка выключена | ||
$small | boolean | Кнопка маленькая |