# @2e32/react-input

[Русский (ru)](README.ru.md)

React text input.

## How install

npm

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

yarn

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

## Usage

App.js

```javascript
// Once (css import)
import '@2e32/react-input/css';

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

export default App;
```

Page.js

```javascript
import { useState, useCallback } from 'react';
// Import the component
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;
```

## Props

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Type</th>
      <th>Default</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>id</td>
      <td>
        <code>string</code>
      </td>
      <td></td>
      <td>The id of the input.</td>
    </tr>
    <tr>
      <td>value</td>
      <td>
        <code>string</code>
      </td>
      <td></td>
      <td>The value of the input (controlled state).</td>
    </tr>
    <tr>
      <td>defaultValue</td>
      <td>
        <code>string</code>
      </td>
      <td></td>
      <td>The value of the input (uncontrolled state).</td>
    </tr>
    <tr>
      <td>label</td>
      <td>
        <code>React.ReactNode</code>
      </td>
      <td></td>
      <td>Label.</td>
    </tr>
    <tr>
      <td>placeholder</td>
      <td>
        <code>string</code>
      </td>
      <td></td>
      <td>Placeholder.</td>
    </tr>
    <tr>
      <td>hint</td>
      <td>
        <code>React.ReactNode</code>
      </td>
      <td></td>
      <td>Hint.</td>
    </tr>
    <tr>
      <td>inputProps</td>
      <td>
        <code>InputControlProps</code>
      </td>
      <td></td>
      <td>Props forwarded to HTML-element input.</td>
    </tr>
    <tr>
      <td>className</td>
      <td>
        <code>string</code>
      </td>
      <td></td>
      <td>The class applied to the root element.</td>
    </tr>
    <tr>
      <td>style</td>
      <td>
        <code>React.CSSProperties</code>
      </td>
      <td></td>
      <td>The style applied to the root element.</td>
    </tr>
    <tr>
      <td>labelClassName</td>
      <td>
        <code>string</code>
      </td>
      <td></td>
      <td>The class applied to the label.</td>
    </tr>
    <tr>
      <td>inputClassName</td>
      <td>
        <code>string</code>
      </td>
      <td></td>
      <td>The class applied to the input.</td>
    </tr>
    <tr>
      <td>hintClassName</td>
      <td>
        <code>string</code>
      </td>
      <td></td>
      <td>The class applied to the hint.</td>
    </tr>
    <tr>
      <td>disabled</td>
      <td>
        <code>boolean</code>
      </td>
      <td>
        <code>false</code>
      </td>
      <td>
        If true, the component is disabled (<code>value</code> cannot be changed).
      </td>
    </tr>
    <tr>
      <td>readOnly</td>
      <td>
        <code>boolean</code>
      </td>
      <td>
        <code>false</code>
      </td>
      <td>
        If true, the component is readonly (<code>value</code> cannot be changed).
      </td>
    </tr>
    <tr>
      <td>required</td>
      <td>
        <code>boolean</code>
      </td>
      <td>
        <code>false</code>
      </td>
      <td>
        If true, the input element is required.
      </td>
    </tr>
    <tr>
      <td>allowClear</td>
      <td>
        <code>boolean</code>
      </td>
      <td>
        <code>false</code>
      </td>
      <td>Show clear button.</td>
    </tr>
    <tr>
      <td>block</td>
      <td>
        <code>boolean</code>
      </td>
      <td>
        <code>false</code>
      </td>
      <td>Expands the component to 100% of available space.</td>
    </tr>
    <tr>
      <td>loading</td>
      <td>
        <code>boolean</code>
      </td>
      <td>
        <code>false</code>
      </td>
      <td>Show loading indicator.</td>
    </tr>
    <tr>
      <td>clearIcon</td>
      <td>
        <code>React.ReactNode</code>
      </td>
      <td></td>
      <td>Cleaning icon.</td>
    </tr>
    <tr>
      <td>clearClassName</td>
      <td>
        <code>string</code>
      </td>
      <td></td>
      <td>The class applied to the clear button.</td>
    </tr>
    <tr>
      <td>asteriskIcon</td>
      <td>
        <code>React.ReactNode</code>
      </td>
      <td>*</td>
      <td>Asterisk icon.</td>
    </tr>
    <tr>
      <td>asteriskPosition</td>
      <td>
        <code>'left' | 'right'</code>
      </td>
      <td>
        <code>'right'</code>
      </td>
      <td>Asterisk placement.</td>
    </tr>
    <tr>
      <td>asteriskClassName</td>
      <td>
        <code>string</code>
      </td>
      <td></td>
      <td>
        The class applied to the <code>asteriskIcon</code> container.
      </td>
    </tr>
    <tr>
      <td>prependOuter</td>
      <td>
        <code>React.ReactNode</code>
      </td>
      <td></td>
      <td>Content rendered on the left side of the component.</td>
    </tr>
    <tr>
      <td>prependInner</td>
      <td>
        <code>React.ReactNode</code>
      </td>
      <td></td>
      <td>Content rendered on the left side of the input.</td>
    </tr>
    <tr>
      <td>appendInner</td>
      <td>
        <code>React.ReactNode</code>
      </td>
      <td></td>
      <td>Content rendered on the right side of the input.</td>
    </tr>
    <tr>
      <td>appendOuter</td>
      <td>
        <code>React.ReactNode</code>
      </td>
      <td></td>
      <td>Content rendered on the right side of the component.</td>
    </tr>
    <tr>
      <td>prependOuterClassName</td>
      <td>
        <code>string</code>
      </td>
      <td></td>
      <td>
        The class applied to the <code>prependOuter</code> container.
      </td>
    </tr>
    <tr>
      <td>prependInnerClassName</td>
      <td>
        <code>string</code>
      </td>
      <td></td>
      <td>
        The class applied to the <code>prependInner</code> container.
      </td>
    </tr>
    <tr>
      <td>appendInnerClassName</td>
      <td>
        <code>string</code>
      </td>
      <td></td>
      <td>
        The class applied to the <code>appendInner</code> container.
      </td>
    </tr>
    <tr>
      <td>appendOuterClassName</td>
      <td>
        <code>string</code>
      </td>
      <td></td>
      <td>
        The class applied to the <code>appendOuter</code> container.
      </td>
    </tr>
    <tr>
      <td>onClear</td>
      <td>
        <code>function</code>
      </td>
      <td></td>
      <td>
        Callback fired when the clear button is pressed.
        <br />
        <br />
        <code>(clearedValue: string) => void</code>
      </td>
    </tr>
    <tr>
      <td>onChange</td>
      <td>
        <code>function</code>
      </td>
      <td></td>
      <td>
        Callback fired when the value is changed by user (typing, clearing).
        <br />
        <br />
        <code>
          (newValue: string, e: React.ChangeEvent&lt;HTMLInputElement&gt;) => void
        </code>
      </td>
    </tr>
  </tbody>
</table>

## Examples

See [storybook](https://github.com/2e32/react-input-storybook).

## License

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