One React Component: radio

Installation

// with npm
npm install or-radio

// with yarn
yarn add or-radio

Usage

• Config webpack sass-loader if you are using webpack.

// webpack.config.js
{
  test: /\.scss$/,
  use: [
    'style-loader',
    'css-loader',
    'sass-loader'
  ],
  include: [
    /node_modules\/or\-\w+/ //include or-components
  ]
}

Basic Example

import Button from 'or-button'
import React from 'react'

import { SvgClose } from 'or-icons'
import Modal from 'or-modal'

export class Example extends React.Component {
  state = {
    isOpenCenter: false
  }

  render() {
    return (
      <div>
        <div className="example-wrapper">
          <Button type="primary" onClick={this.handelOpen('isOpenCenter')}>
            Open default Center
          </Button>
          <Modal
            className="modal-center"
            isOpen={this.state.isOpenCenter}
            onClose={this.handleClose('isOpenCenter')}
          >
            <div>
              <div className="right-side">
                <div
                  className="close-icon"
                  onClick={this.handleClose('isOpenCenter')}
                >
                  <SvgClose
                    className="or-modal-close-icon"
                    fill="#333"
                    size="30"
                  />
                </div>
                <div className="slogan">
                  <div>LIFE IS SHORT</div>
                  <div>BUY A</div>
                  <div>LIPSTICK</div>
                </div>
                <Button
                  type="primary"
                  onClick={this.handleClose('isOpenCenter')}
                >
                  SHOP NOW
                </Button>
              </div>
              <div className="footer">@Rice here 2018</div>
            </div>
          </Modal>
        </div>
      </div>
    )
  }

  handelOpen = state => {
    return () => {
      this.setState({
        [`${state}`]: true
      })
    }
  }

  handleClose = state => {
    return () => {
      this.setState({
        [`${state}`]: false
      })
    }
  }
}

API

Radio:

interface Props {
  /**
   * type for the radio
   * @default 'normal'
   **/
  type?: 'button'

  /**
   * value of the radio
   **/
  value: string

  /**
   * whether the radio is checked or not
   **/
  checked?: boolean

  /**
   * children of the radio
   **/
  children: React.ReactNode

  /**
   * whether the radio can be clicked
   **/
  disabled?: boolean

  /**
   * callback triggered by click
   **/
  onClick?: () => void
}

RadioGroup:

interface Props {
  /**
   * type for the radio
   * @default 'normal'
   **/
  type?: string

  /**
   * radio group layouts horizontally or vertically
   * @default false
   **/
  horizontal?: boolean

  /**
   * children of the radio group
   **/
  children: React.ReactNode

  /**
   * current value of the radio group
   **/
  value?: string

  /**
   * custom className
   **/
  className?: string

  /**
   * callback triggered by click
   **/
  onChange: (value) => void
}

Customize Theme

Customize in webpack

The following variables in or-radio can be overridden:

$or-radio-primary-color: $or-primary-color !default;
$or-radio-disabled-color: $or-disabled-color !default;

Alternatively, you can override variables from or-theme to keep all or-components in a unified theme style.

First you should create a theme.scss file to declare the variables you want to override.

Then use the data option provided by sass-loader to override the default values of the variables.

We take a typical webpack.config.js file as example to customize it's sass-loader options.

// webpack.config.js
{
  test: /\.scss$/,
  use: [
    'style-loader',
    'css-loader',
    {
      loader: 'sass-loader',
      options: {
        data: fs.readFileSync(path.resolve(__dirname, 'theme.scss')) // pass theme.scss to sass-loader
      }
    }
  ],
  include: [
    /node_modules\/or\-\w+/ //include or-components
  ]
}

Demos and Docs

powered by storybook

Click Here

License

MIT © foryuki