Use Tweakpane in React apps
npm install tweakpane use-tweaks
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>
);
}
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
})
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!"))
})
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 },
})
This project is open source and available under the MIT License