‚̧Nested Parenthetical Madness
    Wondering what‚Äôs next for npm?Check out our public roadmap! ¬Ľ

    This package has been deprecated

    Author message:

    This package has been deprecated. Please find this package under its new name @cloudflare/component-radio.

    cf-component-radio

    7.0.0¬†‚Äʬ†Public¬†‚Äʬ†Published

    cf-component-radio

    Cloudflare Radio Component

    Installation

    Installation with yarn is recommended

     
    $ yarn add cf-component-radio
     

    Usage

    import React from 'react';
    import { Radio, RadioUnstyled, RadioTheme, RadioGroup } from '../../src/index';
    import { applyTheme } from 'cf-style-container';
     
    const RadioGroupItem = applyTheme(RadioUnstyled, RadioTheme, () => ({
      cursor: 'initial'
    }));
     
    class RadioComponent extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          radioValue: 'option1'
        };
        this.onRadioChange = this.onRadioChange.bind(this);
      }
     
      onRadioChange(val) {
        this.setState({
          radioValue: val
        });
      }
     
      render() {
        return (
          <div>
            <p>
              You can create them individually with <code>Radio</code>
            </p>
     
            <Radio
              label="Radio 1"
              name="radio-1"
              value="radio1"
              checked={this.state.radioValue === 'radio1'}
              onChange={this.onRadioChange}
            />
     
            <Radio
              label="Radio 2"
              name="radio-2"
              value="radio2"
              checked={this.state.radioValue === 'radio2'}
              onChange={this.onRadioChange}
            />
     
            <p>
              Or as a group with <code>RadioGroup</code>
            </p>
     
            <RadioGroup value={this.state.radioValue} onChange={this.onRadioChange}>
              <RadioGroupItem
                label="Radio 3 (Disabled)"
                name="radio-3"
                value="radio3"
                disabled
              />
              <RadioGroupItem label="Radio 4" name="radio-4" value="radio4" />
            </RadioGroup>
     
            <p>
              You can also disable a label by passing <code>false</code> explicitly
            </p>
     
            <Radio
              label={false}
              name="radio-5-no-label"
              value="radio5"
              checked={this.state.radioValue === 'radio5'}
              onChange={this.onRadioChange}
            />
          </div>
        );
      }
    }
     
    export default RadioComponent;
     

    Keywords

    none

    Install

    npm i cf-component-radio

    DownloadsWeekly Downloads

    187

    Version

    7.0.0

    License

    BSD-3-Clause

    Unpacked Size

    29.3 kB

    Total Files

    13

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar