Or-button NPM | npm.io

One React Component: button

Installation

// with npm
npm install or-button

// with yarn
yarn add or-button

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'

<Button className="hello" type="primary" onClick={handleClick}>ADD TO CART</Button>
<Button type="warning" size="small" onClick={handleClick}>DELETE</Button>

API

interface Props {
  /**
   * type for button
   * @default 'default'
   **/
  type?: 'primary' | 'warning'
  /**
   * size for button
   * @default 'default'
   **/
  size?: 'large' | 'small'
  /**
   * whether the button can be clicked
   **/
  disabled?: boolean
  /**
   * custom className
   **/
  className?: string
  /**
   * callback triggered button click
   **/
  onClick?: () => void
}

Customize Theme

Customize in webpack

The following variables in or-button can be overridden:

$or-btn-primary-color: $or-primary-color !default;
$or-btn-warning-color: $or-warning-color !default;
$or-btn-disabled-color: $or-disabled-color !default;
$or-btn-default-color: $or-gray8 !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
  ]
}