๐ฆ Demo: Donut | Silver | White | HighContrast | Basic
Mouse/touch/keyboard-friendly, accessible, knob component for the web.
Based on pure HTML/SVG elements without dependencies.
Implemented in TypeScript. Treeshakable with minimal footprint (core around 2kb).
~10% scripting time while interacting, 90% Idle
npm install --save-dev react-dial-knob
UMD module
https://unpkg.com/react-dial-knob/dist/react-dial-knob.umd.js
The package comes with five configurable skins - Donut | Silver | White | HighContrast | Basic
A short tutorial on how to "Create skin component" can be found in the storybook and CodePen. Essentially drop an SVG with few lines of code.
You have to store value
and update the component (controlled component).
import React, { useState } from 'react'
import { Donut } from 'react-dial-knob'
export default function MyPage() {
const [value, setValue] = useState(0)
return <Donut
diameter={200}
min={0}
max={100}
step={1}
value={value}
theme={{
donutColor: 'blue'
}}
onValueChange={setValue}
ariaLabelledBy={'my-label'}
>
<label id={'my-label'}>Some label</label>
</Donut>
}
- value: number
- min: number
- max: number
- step: number
- ariaLabelledBy?: string
- onValueChange?: (value: number) => void
- and few more...
sideEffects is set to false - tree shaking will remove all unused parts and will further reduce the size of your final bundle.
Skins are independent of each other. The final bundle size is a sum of common dependencies plus skin size (typically around ~2.5kb with a single skin). Indicative stats on sizes can be found in "stats.html"
** Core-only UMD build is available **
https://unpkg.com/react-dial-knob/dist/react-dial-knob.umd.core-only.min.js
- NPM - https://www.npmjs.com/package/react-dial-knob
- GitHub - https://github.com/pavelkukov/react-dial-knob
- Storybook - https://pavelkukov.github.io/react-dial-knob/?path=/story/knob-read-me--readme
Pavel Kukov [email protected]
See LICENSE.txt in the root directory
- Repo structure and tooling are inspired by: https://github.com/danilowoz/react-content-loader
- Silver theme is based on https://codepen.io/simurai/pen/DwJdq
- Donut theme is based on https://codepen.io/Hyungsub08/pen/yLBPJKW