react-radio-group
Abstract radio component for react.
installation
npm install -S @feizheng/react-radio-groupupdate
npm update @feizheng/react-radio-groupproperties
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| className | string | false | - | The extended className for component. |
| disabled | bool | false | - | The input is disabled. |
| readOnly | bool | false | - | The input is readOnly. |
| name | string | true | - | The input name. |
| defaultValue | string | false | - | Default value. |
| value | string | false | - | Runtime chnaged value. |
| items | array | false | [] | The radio group options. |
| template | func | false | - | The radio option template. |
| onChange | func | false | noop | The handler when value changed. |
usage
- import css
@import "~@feizheng/react-radio-group/dist/style.scss";
// customize your styles:
$react-radio-group-options: ()- import js
import React from 'react';
import ReactDOM from 'react-dom';
import ReactRadioGroup from '@feizheng/react-radio-group';
import './assets/style.scss';
class App extends React.Component {
state = {
items: [
{
label: 'optino1',
value: 'v1'
},
{
label: 'optino2',
value: 'v2'
},
{
label: 'optino3',
value: 'v3'
}
]
};
render() {
const { items } = this.state;
return (
<div className="app-container">
<h3>normal</h3>
<ReactRadioGroup
name="abc"
items={items}
onChange={(e) => {
console.log('events:', e.target.value);
}}
/>
<hr />
<h3>disabled</h3>
<ReactRadioGroup
name="abcd"
disabled
items={items}
onChange={(e) => {
console.log('events:', e.target.value);
}}
/>
<hr />
<h3>readonly</h3>
<ReactRadioGroup
name="abcde"
readOnly
value={'v1'}
items={items}
onChange={(e) => {
console.log('events:', e.target.value);
}}
/>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));documentation
license
Code released under the MIT license.