{"_id":"@2e32/react-radio","_rev":"2-8ca76295ad549d1e173208df43c86078","name":"@2e32/react-radio","dist-tags":{"latest":"1.1.0"},"versions":{"1.0.0":{"name":"@2e32/react-radio","version":"1.0.0","keywords":["2e32","ui","frontend","component","radio","react","react-component","react-radio"],"author":{"name":"konstantin_b"},"license":"MIT","_id":"@2e32/react-radio@1.0.0","maintainers":[{"name":"2e32","email":"bogucharov.dev@gmail.com"}],"homepage":"https://github.com/2e32/react-radio#readme","bugs":{"url":"https://github.com/2e32/react-radio/issues"},"dist":{"shasum":"df6f50f15ee4b08aff9dbbaf1a7903b50fd6dd87","tarball":"https://registry.npmjs.org/@2e32/react-radio/-/react-radio-1.0.0.tgz","fileCount":42,"integrity":"sha512-mOK/yRVTm+MwFTYGZDCZ8PjAeHbp+UGToY74lRoFeWcXQXMAMILyhNNa3lZeFYlP/gJGEu1SLIbSiQKGXYb4DA==","signatures":[{"sig":"MEUCIDnkvVADEm6tnR59qKY+fHIcktvCprDseo8eHWwfOWrfAiEA+nfNgD4kTdX4dcyC6ptIDzZ+PvRJsNaLlB/a8J9xvCY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":72460},"main":"dist/js/cjs/index.js","types":"dist/js/types/index.d.ts","module":"dist/js/esm/index.js","exports":{".":{"types":"./dist/js/types/index.d.ts","import":"./dist/js/esm/index.js","default":"./dist/js/esm/index.js","require":"./dist/js/cjs/index.js"},"./css":"./dist/css/index.css"},"gitHead":"e69e6fc0b48d8b971cd3b9e249ff9d6a981dd778","scripts":{"lint":"eslint --fix .","build":"npm run clean && node build.js && tsc","clean":"rimraf dist","tsc:config":"tsc --showConfig","lint:config":"eslint --print-config *.*","prettier:check":"prettier --check .","prettier:format":"prettier --write ."},"_npmUser":{"name":"2e32","email":"bogucharov.dev@gmail.com"},"repository":{"url":"git+https://github.com/2e32/react-radio.git","type":"git"},"_npmVersion":"10.7.0","description":"A React radio component","directories":{},"_nodeVersion":"20.15.0","dependencies":{"classnames":"^2.5.1"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^8.46.0","rimraf":"^5.0.1","esbuild":"^0.19.0","prettier":"^3.0.1","typescript":"5.1.6","@types/react":"^18.2.20","eslint-plugin-react":"^7.33.1","@typescript-eslint/parser":"^6.3.0","eslint-plugin-react-hooks":"^4.6.0","@typescript-eslint/eslint-plugin":"^6.3.0"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-radio_1.0.0_1741032085816_0.8553710493349547","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@2e32/react-radio","version":"1.1.0","description":"A React radio component","keywords":["2e32","ui","frontend","component","radio","radio group","react","react-component","react-radio","react-radio-group"],"author":{"name":"konstantin_b"},"repository":{"type":"git","url":"git+https://github.com/2e32/react-radio.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-radio@1.1.0","gitHead":"7b454174e280c849b6572037609434c2a1609852","bugs":{"url":"https://github.com/2e32/react-radio/issues"},"homepage":"https://github.com/2e32/react-radio#readme","_nodeVersion":"20.15.0","_npmVersion":"10.7.0","dist":{"integrity":"sha512-FvdcoinlureqMAb/ft62ptoZ5ks9vp+ZRCLLhcbL2H8S9QZV7gF9RrwZwB021HnDNKhkiWTzylXPJM6i3g9RFA==","shasum":"ed195d785edd0643875781464ada030295969403","tarball":"https://registry.npmjs.org/@2e32/react-radio/-/react-radio-1.1.0.tgz","fileCount":76,"unpackedSize":141288,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDfOCf0Eq3E9R15MUS+TBdbJWoz88ZPhbYSXaKf88bCngIhAPJIPrLR13dzcd/1d4BJh1mZKJKr1UIMAdNx4tZzCxwO"}]},"_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-radio_1.1.0_1744832840061_0.05043661983957426"},"_hasShrinkwrap":false}},"time":{"created":"2025-03-03T20:01:25.741Z","modified":"2025-04-16T19:47:20.558Z","1.0.0":"2025-03-03T20:01:26.044Z","1.1.0":"2025-04-16T19:47:20.366Z"},"bugs":{"url":"https://github.com/2e32/react-radio/issues"},"author":{"name":"konstantin_b"},"license":"MIT","homepage":"https://github.com/2e32/react-radio#readme","keywords":["2e32","ui","frontend","component","radio","radio group","react","react-component","react-radio","react-radio-group"],"repository":{"type":"git","url":"git+https://github.com/2e32/react-radio.git"},"description":"A React radio component","maintainers":[{"name":"2e32","email":"bogucharov.dev@gmail.com"}],"readme":"# @2e32/react-radio\n\n[English (en)](README.md)\n\nКомпоненты радиокнопка и группа радиокнопок для React.\n\n## Установка\n\nnpm\n\n```bash\nnpm i @2e32/react-radio\n```\n\nyarn\n\n```bash\nyarn add @2e32/react-radio\n```\n\n## Использование Radio\n\nApp.js\n\n```javascript\n// Единожды подключить стиль на уровне приложения (точки входа)\nimport '@2e32/react-radio/css';\n\nconst App = () => ;\n\nexport default App;\n```\n\nPage.js\n\n```javascript\nimport { useState, useCallback } from 'react';\n// Импортировать компонент\nimport Radio from '@2e32/react-radio';\n\nconst Page = () => {\n const [value, setValue] = useState();\n\n return (\n \n One\n \n \n Two\n \n );\n};\n\nexport default Page;\n```\n\n## Свойства Radio\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
НазваниеТипЗначение по умолчаниюОписание
ref\n React.Ref<HTMLSpanElement>\n Ссылка для доступа к DOM-узлу компонента.
id\n string\n Идентификатор элемента в документе.
name\n string\n Имя элемента.
value\n T\n Значение элемента формы.
checked\n boolean\n \n Значение, указывающее отмечен ли элемент управления меткой. При значении true метка\n установлена, в противном случае - не установлена.\n
children\n React.ReactNode\n Содержимое связанное с радиокнопкой (текстовая подпись).
hint\n React.ReactNode\n Подсказка.
className\n string\n CSS-класс.
style\n React.CSSProperties\n Стиль.
boxClassName\n string\n CSS-класс контейнера, в котором располагается метка.
inputClassName\n string\n CSS-класс элемента input.
labelClassName\n string\n CSS-класс контейнера, в котором располагается текст.
hintClassName\n string\n CSS-класс hint.
checkmarkPosition\n 'left' | 'right' | 'top' | 'bottom'\n \n 'left'\n \n Позиция отображения метки относительно контента радиокнопки.\n
checkmarkAlign\n 'start' | 'center' | 'end'\n \n 'center'\n Выравнивание метки относительно контента радиокнопки.
disabled\n boolean\n \n false\n Компонент отключен (метка не может быть выбрана, получение фокуса запрещено).
readOnly\n boolean\n \n false\n Компонент только на чтение (состояние метки не может быть изменено).
autoFocus\n boolean\n \n false\n Компонент должен находится в фокусе при монтировании.
block\n boolean\n \n false\n Компонент занимает всю ширину контейнера.
tabIndex\n number\n \n 0\n Значение для настройки фокуса элемента.
renderIcon\n function\n \n Отображает иконку радиокнопки.\n
\n
\n ⚠️ Используйте этот метод для собственной стилизации метки.\n
\n
\n (props: RenderIconProps<T>) => React.ReactNode\n
onChange\n function\n \n Вызывается при выборе значения.\n
\n
\n \n (value: NonNullable<T>, event: React.ChangeEvent<HTMLInputElement>) => void\n \n
\n\n## Использование RadioGroup\n\n```javascript\nimport { useState } from 'react';\nimport Radio from '@2e32/react-radio';\n\nconst Page = () => {\n const [value, setValue] = useState();\n\n return (\n \n );\n};\n\nexport default Page;\n```\n\n## Свойства RadioGroup\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
НазваниеТипЗначение по умолчаниюОписание
ref\n React.Ref<HTMLSpanElement>\n Ссылка для доступа к DOM-узлу компонента.
value\n V\n Значение группы.
label\n React.ReactNode\n Подпись группы.
hint\n React.ReactNode\n Подсказка.
options\n Array<O>\n Список опций.
optionKey\n string | function\n Вычисляет ключ опции (для случая, когда значения опций не уникальны).
optionContent\n string | function\n Вычисляет контент опции.
optionValue\n string | function\n Вычисляет значение опции, возвращаемое при выборе опции (change).
optionDisabled\n function\n \n Вычисляет должна ли опция быть отключена (в состоянии disabled).\n
\n
\n (option: <O>) => boolean\n
isValueEqualOption\n function\n \n Функция для определения равенства текущего значения value и опции (для\n определения признака checked у опции).\n
\n
\n ⚠️ Используйте isValueEqualOption для сравнения value и опции,\n если они в виде объектов или представлены разными типами. По умолчанию они сравниваются с\n помощью Object.is.\n
\n
\n (value: Nullable<V>, option: <O>) => boolean\n
className\n string\n CSS-класс.
style\n React.CSSProperties\n Стиль.
labelClassName\n string\n CSS-класс контейнера, в котором располагается текстовая подпись.
hintClassName\n string\n CSS-класс hint.
disabled\n boolean\n \n false\n Компонент отключен (опция не может быть выбрана, получение фокуса запрещено).
readOnly\n boolean\n \n false\n Компонент только на чтение (опция не может быть выбрана).
block\n boolean\n \n false\n Компонент занимает всю ширину контейнера.
vertical\n boolean\n \n false\n Опции располагаются по вертикали.
required\n boolean\n \n false\n \n Значение должно быть обязательно заполнено (добавляет в label знак обязательности).\n
asteriskIcon\n React.ReactNode\n *Иконка обязательности заполнения.
asteriskPosition\n 'left' | 'right'\n \n 'right'\n Позиция иконки обязательности.
asteriskClassName\n string\n \n CSS-класс контейнера, в котором располагается asteriskIcon.\n
renderIcon\n function\n \n Отображает иконку радиокнопки.\n
\n
\n ⚠️ Используйте этот метод для собственной стилизации метки.\n
\n
\n (props: RenderIconProps<O>) => React.ReactNode\n
renderOption\n function\n \n Отображает опцию (иконку, контент).\n
\n
\n ⚠️ Используйте этот метод изменения структуры и стилизации опции (её метки, контента).\n
\n
\n (props: RenderOptionProps<O>) => React.ReactNode\n
onChange\n function\n \n Вызывается при выборе значения.\n
\n
\n \n (value: <V>, event: React.ChangeEvent<HTMLInputElement>) => void\n \n
\n\n## Примеры\n\nСмотри [storybook](https://github.com/2e32/react-radio-storybook).\n\n## Лицензия\n\n[MIT](https://choosealicense.com/licenses/mit)\n","readmeFilename":"README.ru.md"}