@jswork/react-ant-radio-group

1.0.5 • Public • Published

react-ant-radio-group

React ant radio group.

version license size download

installation

npm install -S @jswork/react-ant-radio-group

properties

Name Type Required Default Description
className string false - The extended className for component.
value any false - Default value.
onChange func false noop The change handler.
onSearch func false noop The handle when search confirm.
items array false [] Value/label pairs.
template func false RctplAntRadio The template.

usage

  1. import css
@import "~@jswork/react-ant-radio-group/dist/style.css";

// or use sass
@import "~@jswork/react-ant-radio-group/dist/style.scss";

// customize your styles:
$react-ant-radio-group-options: ()
  1. import js
import ReactDemokit from '@jswork/react-demokit';
import React from 'react';
import ReactDOM from 'react-dom';
import RctplAntRadioButton from '@jswork/rctpl-ant-radio-button';
import ReactAntRadioGroup from '@jswork/react-ant-radio-group';
import { Radio } from 'antd';
import './assets/style.scss';

class App extends React.Component {
  state = {
    items2: [
      {
        value: 'k2-1',
        label: 'k2111'
      },
      {
        value: 'k2-2',
        label: 'k2222'
      }
    ],
    items: [
      {
        value: 'k1',
        label: 'k111'
      },
      {
        value: 'k2',
        label: 'k222'
      }
    ]
  };

  render() {
    return (
      <ReactDemokit
        className="p-3 app-container"
        url="https://github.com/afeiship/react-ant-radio-group">
        <div className="is-item">
          <div className="py-2">
            <ReactAntRadioGroup
              buttonStyle="solid"
              defaultValue={'k1'}
              onChange={(e) => {
                console.log('radio button tmpl:', e.target.value);
              }}
              onSearch={(e) => {
                console.log('search event:', e.target.value);
              }}
              items={this.state.items}
              template={RctplAntRadioButton}
            />
          </div>

          <div className="py-2">
            <ReactAntRadioGroup
              buttonStyle="solid"
              defaultValue={'k2'}
              onChange={(e) => {
                console.log('radio tmpl:', e.target.value);
              }}
              items={this.state.items}
            />
          </div>

          <ReactAntRadioGroup
            items={this.state.items2}
            template={({ item }) => {
              return (
                <Radio.Button value={item.value} key={item.value}>
                  {item.label}
                </Radio.Button>
              );
            }}
          />
        </div>
      </ReactDemokit>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

documentation

license

Code released under the MIT license.

Package Sidebar

Install

npm i @jswork/react-ant-radio-group

Weekly Downloads

1

Version

1.0.5

License

MIT

Unpacked Size

22.4 kB

Total Files

7

Last publish

Collaborators

  • afeiship