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

    Keywords

    none

    Install

    npm i use-tweaks

    DownloadsWeekly Downloads

    941

    Version

    0.3.1

    License

    none

    Unpacked Size

    106 kB

    Total Files

    22

    Last publish

    Collaborators

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