pmndrs / Use Tweaks

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