One React Component: color-selecter


Installation

// with yarn
yarn add or-color-selecter
`

Usage

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

Basic Example

`jsx
import Button from 'or-button'
import React, { PureComponent } from 'react'

import ColorSelecter from 'or-color-selecter'

const colorMap1 = {
'#F3AA02': 'Cassia',
'#DAA78D': 'Devon Sand',
'#000': 'Black',
'#DCD2C8': 'New Ivory',
'#C2D3DD': 'Seltzer'
}

const colorMap2 = {
'#a3433a': 'CHILI',
'#c76b68': 'SEE SHEER',
'#9c1234': 'RUBY WOO',
'#b23532': 'LADY BUG',
'#cd2834': 'LADY DANGER',
'#972e2e': 'COCKNEY'
}

const colors1 = Object.keys(colorMap1)
const colors2 = Object.keys(colorMap2)

export default class Example extends PureComponent {
state = {
color1: colors1[1],
color2: colors2[0]
}

render() {
return (


handleChange = stateKey => {
return color => {
this.setState({
[${stateKey}]: color
})
}
}

handleSubmit = colorKey => {
return () => {
colorKey === 1
? alert('Add:\t' + colorMap1[this.state.color1])
: alert('Add:\t' + colorMap2[this.state.color2])
}
}
}

`

API

`ts
interface Props {
/**
* custom className for color selecter
*/
className?: string

/**
* size for color selecter
* @default 'normal'
**/
size?: 'small'

/**
* selected value of color selecter
**/
value: string

/**
* selected value of color selecter
**/
colors: string[]

/**
* callback triggered button click
**/
onChange?: (color) => void
}
`

Customize Theme

`scss
$or-color-selecter-default-border: $or-gray3 !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.

`js
// 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

Click Here

License

MIT © foryuki