@2e32/react-input
Version:
A React input component
382 lines (357 loc) • 7.32 kB
Markdown
# @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<HTMLInputElement>) => void
</code>
</td>
</tr>
</tbody>
</table>
## Examples
See [storybook](https://github.com/2e32/react-input-storybook).
## License
[MIT](https://choosealicense.com/licenses/mit)