@feizheng/react-radio-group NPM

react-radio-group

Abstract radio component for react.

installation

npm install -S @feizheng/react-radio-group

update

npm update @feizheng/react-radio-group

properties

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'));