@baldwinbarry/react-knob v0.0.11

@baldwinbarry/react-knob

Knob component built with React. Inspired by a codepen by Ed Hicks.

Installation

npm

npm install @baldwinbarry/react-knob --save

yarn

yarn add @baldwinbarry/react-knob 

Properties

Example

import React, { useState } from 'react'
import ReactKnob from '@baldwinbarry/react-knob'

const Example = () => {
    const [volume, setVolume] = useState(0)
    return (
        <ReactKnob value={volume} onChange={setVolume} />
    )
}

export default Example

Styling: Size

By default, the knob component renders inside a 200px square container. Control the size of the knob by overriding width and height rules on the knob-container class:

.my-knob {
  .knob-container {
    width: 150px;
    height: 150px;
  }
}

<ReactKnob className="my-knob" />

###Styling: Color Change knob colors by overriding CSS custom properties. Color values must be provided as comma-separated RGB values.

.my-knob {
  __color-knob-light: 255, 0, 0;
}

<ReactKnob className="my-knob" />