0.3.1 • Published 3 years ago
use-tweaks v0.3.1
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
0.3.2-alpha.0
3 years ago
0.3.1
3 years ago
0.3.0
3 years ago
0.2.0
4 years ago
0.1.0
4 years ago
0.0.4
4 years ago
0.0.3
4 years ago
0.0.1
4 years ago
0.0.1-alpha.10
4 years ago
0.0.1-alpha.9
4 years ago
0.0.1-alpha.7
4 years ago
0.0.1-alpha.6
4 years ago
0.0.1-alpha.5
4 years ago
0.0.1-alpha.4
4 years ago
0.0.1-alpha.3
4 years ago
0.0.1-alpha.2
4 years ago
0.0.1-alpha.1
4 years ago