CSS Value

CssValue

The CSS Value component consists of 2 button elements, one that increases the value and one that decreases the value. This component also gives you the option to choose the unit you want to work in... just pass in the desired unit as a prop. An example of this component in good use would be if you had were building out an editor app, you could use the cssValue to increment and decrement things like height, width, border width etc etc.

Props

The props needed for this component are listed and explained below:

• unit - This prop must be a string. Pass in your desired unit here, here a few you could use pt, px, vh or vw.
• value - This prop must be a number.
• onChange - This prop must be a function.
• onIncrease - This prop must be a function.
• onDecrease - This prop must be a function.
• isSmall - This prop must be a boolean. Use this to have a smaller version of the component

Example

<CssValue
    unit={this.state.unit}
    value={this.state.width}
    onChange={this.onWidthChanged}
    onIncrease={this.onWidthIncrease}
    onDecrease={this.onWidthDecrease}
/>

// ...React Component
getInitialState: function() {
    return {
        unit: "px",
        width: "100"
    }
},

onWidthChanged: function(value) {
    this.setState({
        width: value
    })
}

onWidthIncrease: function(increaseBy) {
    this.setState({
        width: this.state.width + (1 * increaseBy)
    })
},

onWidthDecrease: function(decreaseBy) {
    this.setState({
        width: this.state.width - (1 * decreaseBy)
    })
},

Related

• Button
• CssBorderSelector
• CssBorderRadiusSelector