Package Exports

leva

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (leva) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

useControls

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.

Features

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.
Supports copy paste.

Inputs

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

Usage

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
}

Contributors ✨

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!