@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 | | Кнопка маленькая |