One React Component: checkbox

Installation

// with npm
npm install or-checkbox

// with yarn
yarn add or-checkbox

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 React, { PureComponent } from 'react'

import Button from 'or-button'
import { Checkbox } from 'or-checkbox'

export default class CheckboxExample extends PureComponent {
  state = {
    isChecked: false
  }

  render() {
    return (
      <div className="checkbox-example">
        <Checkbox
          className="hello"
          value="agree"
          isChecked={this.state.isChecked}
          onChange={this.handleOnChange}
        >
          Yes, I'd like to receive the latest news and event invites from
          OneReact!
        </Checkbox>
        <Button type="primary" onClick={this.handleSubmit}>
          Submit
        </Button>
      </div>
    )
  }

  handleOnChange = isChecked => {
    this.setState({
      isChecked
    })
  }

  handleSubmit = () => {
    if (!this.state.isChecked) {
      window.alert('请确保您仔细看了用户协议并勾选')
    }
  }
}

API

Checkbox:

interface Props {
  /**
   * custom className
   **/
  className?: string

  /**
   * checkbox type
   * @default 'normal'
   **/
  type?: 'button'

  /**
   * value of the checkbox
   **/
  value: string

  /**
   * whether the checkbox is checked or not
   **/
  isChecked?: boolean

  /**
   * children of the checkbox
   **/
  children: any

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

CheckboxGroup:

interface Props {
  /**
   * custom className
   **/
  className?: string

  /**
   * checkbox type
   * @default 'normal'
   **/
  type?: 'button'

  /**
   * checkbox group checked values
   **/
  values: string[]

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

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

Customize Theme

Customize in webpack

The following variables in or-button can be overridden:

$or-checkbox-primary-color: $or-primary-color !default;

$or-checkbox-button-padding: $or-gap $or-gap * 3 !default;

$or-checkbox-border-radius: $or-border-radius-sm !default;
$or-checkbox-border-width: $or-border-width !default;
...

For more variables, see here.

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