Use Tweakpane in React apps
Try it here on Codesandbox
npm install tweakpane use-tweaks
Basic example
import { useTweaks } from "use-tweaks"
function MyComponent() {
const { speed, factor } = useTweaks({
speed: 1,
factor: { value: 1, min: 10, max: 100 },
});
return (
<div>
{speed} * {factor}
</div>
);
}Misc
Folders
You can add a top-level folder by passing the name as first argument of the hook:
import { useTweaks } from "use-tweaks"
const { speed, factor } = useTweaks("My title!", { speed: 1, factor: 1 })You can also nest folders by using the makeFolder helper:
import { useTweaks, makeFolder } from "use-tweaks"
const { speed, factor } = useTweaks("My Title!", {
speed: 1,
...makeFolder(
"Advanced",
{
factor: 1,
},
false
), // pass false to make the folder collapsed by default
})Buttons
Use the makeButton helper to create and add a button
import { useTweaks, makeButton } from "use-tweaks"
const { speed, factor } = useTweaks({
speed: 1,
factor: { value: 1, min: 10, max: 100 },
...makeButton("Log!", () => console.log("Hello World!"))
})Separator
Use the makeSeparator helper to add a separator
import { useTweaks, makeSeparator } from "use-tweaks"
const { speed, factor } = useTweaks({
speed: 1,
...makeSeparator(),
factor: { value: 1, min: 10, max: 100 },
})License
This project is open source and available under the MIT License