{"_id":"@2e32/react-input","name":"@2e32/react-input","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@2e32/react-input","version":"1.0.0","description":"A React input component","keywords":["2e32","ui","frontend","component","input","react","react-component","react-input"],"author":{"name":"konstantin_b"},"repository":{"type":"git","url":"git+https://github.com/2e32/react-input.git"},"license":"MIT","exports":{".":{"types":"./dist/js/types/index.d.ts","import":"./dist/js/esm/index.js","require":"./dist/js/cjs/index.js","default":"./dist/js/esm/index.js"},"./css":"./dist/css/index.css"},"main":"dist/js/cjs/index.js","module":"dist/js/esm/index.js","types":"dist/js/types/index.d.ts","scripts":{"clean":"rimraf dist","build":"npm run clean && node build.js && tsc","tsc:config":"tsc --showConfig","prettier:check":"prettier --check .","prettier:format":"prettier --write .","lint":"eslint --fix .","lint:config":"eslint --print-config *.*"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"devDependencies":{"@types/react":"^18.2.20","@typescript-eslint/eslint-plugin":"^6.3.0","@typescript-eslint/parser":"^6.3.0","esbuild":"^0.19.0","eslint":"^8.46.0","eslint-plugin-react":"^7.33.1","eslint-plugin-react-hooks":"^4.6.0","prettier":"^3.0.1","rimraf":"^5.0.1","typescript":"5.1.6"},"dependencies":{"classnames":"^2.5.1"},"_id":"@2e32/react-input@1.0.0","gitHead":"10ce1349cb2b076ced8cd2d2f2efa973faeb39d7","bugs":{"url":"https://github.com/2e32/react-input/issues"},"homepage":"https://github.com/2e32/react-input#readme","_nodeVersion":"20.15.0","_npmVersion":"10.7.0","dist":{"integrity":"sha512-BVJFKFAZ+Z3OvcDBRxhYPj+5a+LDHWArO44514jUK/B9b1V5oYMz5yWDtq6nUT05CrdAqKccTqN4KDahBeJUmA==","shasum":"fbb017564742e2d3304741d4e8df6604ddd76222","tarball":"https://registry.npmjs.org/@2e32/react-input/-/react-input-1.0.0.tgz","fileCount":46,"unpackedSize":114934,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD7g/8KT+mf4VkavK2kUNQTf7RfIROPApjyY49rI2y5TwIhAI11SJc3W7r8gNjVQNs5kRI1vZdwBIzvbZFpLzUnUwpG"}]},"_npmUser":{"name":"2e32","email":"bogucharov.dev@gmail.com"},"directories":{},"maintainers":[{"name":"2e32","email":"bogucharov.dev@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-input_1.0.0_1736451155218_0.37752136591423247"},"_hasShrinkwrap":false}},"time":{"created":"2025-01-09T19:32:35.035Z","1.0.0":"2025-01-09T19:32:35.423Z","modified":"2025-01-09T19:32:35.759Z"},"maintainers":[{"name":"2e32","email":"bogucharov.dev@gmail.com"}],"description":"A React input component","homepage":"https://github.com/2e32/react-input#readme","keywords":["2e32","ui","frontend","component","input","react","react-component","react-input"],"repository":{"type":"git","url":"git+https://github.com/2e32/react-input.git"},"author":{"name":"konstantin_b"},"bugs":{"url":"https://github.com/2e32/react-input/issues"},"license":"MIT","readme":"# @2e32/react-input\n\n[English (en)](README.md)\n\nReact текстовое поле ввода.\n\n## Установка\n\nnpm\n\n```bash\nnpm i @2e32/react-input\n```\n\nyarn\n\n```bash\nyarn add @2e32/react-input\n```\n\n## Использование\n\nApp.js\n\n```javascript\n// Единожды подключить стиль на уровне приложения (точки входа)\nimport '@2e32/react-input/css';\n\nconst App = () => <Page />;\n\nexport default App;\n```\n\nPage.js\n\n```javascript\nimport { useState, useCallback } from 'react';\n// Импортировать компонент\nimport Input from '@2e32/react-input';\n\nconst Page = () => {\n  const [str, setStr] = useState('');\n\n  const handleChange = useCallback((newStr) => {\n    setStr(newStr);\n  }, []);\n\n  return <Input value={str} label=\"Label\" onChange={handleChange} />;\n};\n\nexport default Page;\n```\n\n## Свойства\n\n<table>\n  <thead>\n    <tr>\n      <th>Название</th>\n      <th>Тип</th>\n      <th>Значение по умолчанию</th>\n      <th>Описание</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>id</td>\n      <td>\n        <code>string</code>\n      </td>\n      <td></td>\n      <td>Идентификатор элемента в документе.</td>\n    </tr>\n    <tr>\n      <td>value</td>\n      <td>\n        <code>string</code>\n      </td>\n      <td></td>\n      <td>\n        Значение элемента формы.\n        <br />\n        <br />\n        ⚠️ Используйте <code>value</code> для контролируемого состояния.\n      </td>\n    </tr>\n    <tr>\n      <td>defaultValue</td>\n      <td>\n        <code>string</code>\n      </td>\n      <td></td>\n      <td>\n        Значение элемента формы.\n        <br />\n        <br />\n        ⚠️ Используйте <code>defaultValue</code> для неконтролируемого состояния.\n      </td>\n    </tr>\n    <tr>\n      <td>label</td>\n      <td>\n        <code>React.ReactNode</code>\n      </td>\n      <td></td>\n      <td>Подпись элемента формы.</td>\n    </tr>\n    <tr>\n      <td>placeholder</td>\n      <td>\n        <code>string</code>\n      </td>\n      <td></td>\n      <td>Текст-подсказка в поле ввода.</td>\n    </tr>\n    <tr>\n      <td>hint</td>\n      <td>\n        <code>React.ReactNode</code>\n      </td>\n      <td></td>\n      <td>Подсказка.</td>\n    </tr>\n    <tr>\n      <td>inputProps</td>\n      <td>\n        <code>InputControlProps</code>\n      </td>\n      <td></td>\n      <td>Props пробрасываемые непосредственно в HTML-элемент input.</td>\n    </tr>\n    <tr>\n      <td>className</td>\n      <td>\n        <code>string</code>\n      </td>\n      <td></td>\n      <td>CSS-класс.</td>\n    </tr>\n    <tr>\n      <td>style</td>\n      <td>\n        <code>React.CSSProperties</code>\n      </td>\n      <td></td>\n      <td>Стиль.</td>\n    </tr>\n    <tr>\n      <td>labelClassName</td>\n      <td>\n        <code>string</code>\n      </td>\n      <td></td>\n      <td>CSS-класс label.</td>\n    </tr>\n    <tr>\n      <td>inputClassName</td>\n      <td>\n        <code>string</code>\n      </td>\n      <td></td>\n      <td>CSS-класс элемента input.</td>\n    </tr>\n    <tr>\n      <td>hintClassName</td>\n      <td>\n        <code>string</code>\n      </td>\n      <td></td>\n      <td>CSS-класс hint.</td>\n    </tr>\n    <tr>\n      <td>disabled</td>\n      <td>\n        <code>boolean</code>\n      </td>\n      <td>\n        <code>false</code>\n      </td>\n      <td>\n        Компонент отключен (значение не может быть изменено, получение фокуса запрещено).\n      </td>\n    </tr>\n    <tr>\n      <td>readOnly</td>\n      <td>\n        <code>boolean</code>\n      </td>\n      <td>\n        <code>false</code>\n      </td>\n      <td>Компонент только на чтение (значение не может быть изменено).</td>\n    </tr>\n    <tr>\n      <td>required</td>\n      <td>\n        <code>boolean</code>\n      </td>\n      <td>\n        <code>false</code>\n      </td>\n      <td>\n        Значение должно быть обязательно заполнено (добавляет в label знак обязательности).\n      </td>\n    </tr>\n    <tr>\n      <td>allowClear</td>\n      <td>\n        <code>boolean</code>\n      </td>\n      <td>\n        <code>false</code>\n      </td>\n      <td>Отображать кнопку очистки значения.</td>\n    </tr>\n    <tr>\n      <td>block</td>\n      <td>\n        <code>boolean</code>\n      </td>\n      <td>\n        <code>false</code>\n      </td>\n      <td>Компонент занимает всю ширину контейнера.</td>\n    </tr>\n    <tr>\n      <td>loading</td>\n      <td>\n        <code>boolean</code>\n      </td>\n      <td>\n        <code>false</code>\n      </td>\n      <td>Отображать индикатор загрузки.</td>\n    </tr>\n    <tr>\n      <td>clearIcon</td>\n      <td>\n        <code>React.ReactNode</code>\n      </td>\n      <td></td>\n      <td>Иконка очистки содержимого.</td>\n    </tr>\n    <tr>\n      <td>clearClassName</td>\n      <td>\n        <code>string</code>\n      </td>\n      <td></td>\n      <td>CSS-класс кнопки очистки.</td>\n    </tr>\n    <tr>\n      <td>asteriskIcon</td>\n      <td>\n        <code>React.ReactNode</code>\n      </td>\n      <td>*</td>\n      <td>Иконка обязательности заполнения.</td>\n    </tr>\n    <tr>\n      <td>asteriskPosition</td>\n      <td>\n        <code>'left' | 'right'</code>\n      </td>\n      <td>\n        <code>'right'</code>\n      </td>\n      <td>Позиция иконки обязательности.</td>\n    </tr>\n    <tr>\n      <td>asteriskClassName</td>\n      <td>\n        <code>string</code>\n      </td>\n      <td></td>\n      <td>\n        CSS-класс контейнера, в котором располагается <code>asteriskIcon</code>.\n      </td>\n    </tr>\n    <tr>\n      <td>prependOuter</td>\n      <td>\n        <code>React.ReactNode</code>\n      </td>\n      <td></td>\n      <td>Внешний контент перед компонентом.</td>\n    </tr>\n    <tr>\n      <td>prependInner</td>\n      <td>\n        <code>React.ReactNode</code>\n      </td>\n      <td></td>\n      <td>Внутренний контент перед полем ввода.</td>\n    </tr>\n    <tr>\n      <td>appendInner</td>\n      <td>\n        <code>React.ReactNode</code>\n      </td>\n      <td></td>\n      <td>Внутренний контент после поля ввода.</td>\n    </tr>\n    <tr>\n      <td>appendOuter</td>\n      <td>\n        <code>React.ReactNode</code>\n      </td>\n      <td></td>\n      <td>Внешний контент после компонента.</td>\n    </tr>\n    <tr>\n      <td>prependOuterClassName</td>\n      <td>\n        <code>string</code>\n      </td>\n      <td></td>\n      <td>\n        CSS-класс контейнера, в котором располагается <code>prependOuter</code>.\n      </td>\n    </tr>\n    <tr>\n      <td>prependInnerClassName</td>\n      <td>\n        <code>string</code>\n      </td>\n      <td></td>\n      <td>\n        CSS-класс контейнера, в котором располагается <code>prependInner</code>.\n      </td>\n    </tr>\n    <tr>\n      <td>appendInnerClassName</td>\n      <td>\n        <code>string</code>\n      </td>\n      <td></td>\n      <td>\n        CSS-класс контейнера, в котором располагается <code>appendInner</code>.\n      </td>\n    </tr>\n    <tr>\n      <td>appendOuterClassName</td>\n      <td>\n        <code>string</code>\n      </td>\n      <td></td>\n      <td>\n        CSS-класс контейнера, в котором располагается <code>appendOuter</code>.\n      </td>\n    </tr>\n    <tr>\n      <td>onClear</td>\n      <td>\n        <code>function</code>\n      </td>\n      <td></td>\n      <td>\n        Вызывается при очистке значения (через кнопку очистки).\n        <br />\n        <br />\n        <code>(clearedValue: string) => void</code>\n      </td>\n    </tr>\n    <tr>\n      <td>onChange</td>\n      <td>\n        <code>function</code>\n      </td>\n      <td></td>\n      <td>\n        Вызывается при изменении значения (ввод, очистка).\n        <br />\n        <br />\n        <code>\n          (newValue: string, e: React.ChangeEvent&lt;HTMLInputElement&gt;) => void\n        </code>\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n## Примеры\n\nСмотри [storybook](https://github.com/2e32/react-input-storybook).\n\n## Лицензия\n\n[MIT](https://choosealicense.com/licenses/mit)\n","readmeFilename":"README.ru.md"}