https://github.com/tweakpane/use-tweaks

🎛️ Tweak React components with Tweakpane
https://github.com/tweakpane/use-tweaks

creative-coding gui tweakpane tweaks

Last synced: 3 months ago
JSON representation

🎛️ Tweak React components with Tweakpane

• Host: GitHub
• URL: https://github.com/tweakpane/use-tweaks
• Owner: tweakpane
• License: mit
• Created: 2020-08-19T17:43:57.000Z (almost 5 years ago)
• Default Branch: main
• Last Pushed: 2021-10-01T10:17:45.000Z (almost 4 years ago)
• Last Synced: 2024-05-02T00:19:02.466Z (about 1 year ago)
• Topics: creative-coding, gui, tweakpane, tweaks
• Language: TypeScript
• Homepage: https://codesandbox.io/s/use-tweaks-example-58e02
• Size: 2.04 MB
• Stars: 759
• Watchers: 7
• Forks: 22
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
![A screenshot of the library in use](https://i.imgur.com/A7yL1zE.jpg)

[![npm](https://img.shields.io/npm/v/use-tweaks?style=flat-square)](https://www.npmjs.com/package/use-tweaks) ![npm](https://img.shields.io/npm/dt/use-tweaks.svg?style=flat-square) [![Discord Shield](https://discordapp.com/api/guilds/740090768164651008/widget.png?style=shield)](https://discord.gg/ZZjjNvJ)

Use [Tweakpane](http://cocopon.github.io/tweakpane/) in React apps

## Try it here on [Codesandbox](https://codesandbox.io/s/use-tweaks-example-ekqv2)

```

npm install tweakpane use-tweaks

```

## Basic example

```jsx

import { useTweaks } from "use-tweaks"

function MyComponent() {

  const { speed, factor } = useTweaks({

    speed: 1,

    factor: { value: 1, min: 10, max: 100 },

  });

  return (

    


      {speed} * {factor}

    

  );

}

```


## Misc

#### Folders

You can add a top-level folder by passing the name as first argument of the hook:

```jsx

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:

```jsx

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

```jsx

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

```jsx

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](LICENSE)