yarn add leva
useControls
brings is a smart GUI for your React apps and your creative coding endeavors:
- ๐ง Smart defaults, your GUI will always pick the best input type for your data
- ๐คณ Mobile-ready, all inputs work perfectly on mobile
- ๐ช Type safety,
useControls
is built from the ground up with typescript, all types are inferred from your code.
useControls
isn't a component library.
- As-you-type filtering of inputs.
- You can modify number inputs by either dragging over the input label or inner label.
- The lib automatically calculates the number input step based on the initial value magnitude and significant digits.
- Increase / decrease numbers with arrow keys, with alt (
ยฑ0.1
) and shift (ยฑ10
) modifiers support. - Draggable pane.
- String
- Boolean
- Number
- Range
- Interval
[min,max]
- Point2d
[x,y]
or{x,y}
- Point3d
[x,y,z]
or{x,y,z}
- Color
#hex
and{r,g,b,a}
- Select
- Spring
{tension,friction,mass}
- Image
Simply call the useControls
hook from anywhere in your app.
Your component will update whenever the values defined in the hook are changed!
import { useControls } from 'leva'
function MyComponent() {
const { myValue } = useControls({ myValue: 10 })
return myValue
}
Thanks goes to these wonderful people (emoji key):
Gianmarco ๐ค ๐ป |
David Bismut ๐ค ๐ป |
Han ๐จ |
Andrew Prifer ๐ค |
Aria ๐ค |
Marco Ludovico Perego ๐ค |
Marco Fugaro ๐ค |
Ivan Rossi ๐ |
thephoenixofthevoid ๐ |
This project follows the all-contributors specification. Contributions of any kind welcome!