satelllte
commented
1 month ago Hi, and thanks for the feedback!
The KnobBase component isn't a part of the library, but just a component I use as a styled base for every other knob example. The idea of the library is to provide you with the KnobHeadless component, which you can style as you want. And as you can see, KnobBase does exactly that too.
I know that currently it's not that obvious, and I actually have some plans to simplify the examples in the docs someday. But at this point, I suggest you to simply install the library, and start designing your knob(s) from scratch. Here's the API: https://react-knob-headless.pages.dev/ (at the bottom of the page).
After you'll create the first styled version of your knob, you should come up with your own KnobBase (or just Knob) version of it, which you can parametrize like you want and develop your own variations of it with your own props (similarly, how you'd use Radix UI Primitives, if you've familiar with it).
The core part of the library is a simple KnobHeadless primitive, which handles the interaction and accessibility for you. See its source code here: packages/react-knob-headless/src/KnobHeadless.tsx
Also, I highly recommend you to use TypeScript, so it'll make sure you pass every mandatory prop to it.
I hope that my answer will help you, and I hope I can simplify the examples in the future, so it'll be easier for everyone to work with it. Thank you!
l-irizarry
Hey there,
Thank you for writing this really cool library!
I'm trying to use it, but I can't get the examples you have here nor here to work, as they use
KnobBase, which doesn't seem to be exported.Do you have any other CodePens or examples that live outside of the repo that show how to integrate it into a React project?
Thanks!