use-tweaks
TypeScript icon, indicating that this package has built-in type declarations

0.3.1 • Public • Published

A screenshot of the library in use npm npm Discord Shield

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

Readme

Keywords

none

Package Sidebar

Install

npm i use-tweaks

Weekly Downloads

157

Version

0.3.1

License

none

Unpacked Size

106 kB

Total Files

22

Last publish

Collaborators

  • cocopon
  • gsimone
  • giulioz
  • react-spring-bot