Tweak those values while while your tweaks are persisted in the browser.
Undo/redo your tweaks, even after a page refresh.
Try out different assets (such as .hdr files), and once you're done, download your assets from the browser storage and put them in a static folder in your app.
useControls is Theatric's main API. It is a React hook which you can call from
anywhere in your component tree. It takes an object of controls and returns an
object of values.
import {useControls}from'theatric'
functionIntroduction() {
const { name, age } =useControls({name:'Andrew',age:28})
return (
<div>
Hey, I'm {name} and I'm {age} years old.
</div>
)
}
Optionally, you can also provide a folder option in the options argument, which
will namespace your controls to that folder in the UI. This is useful if you
have multiple instances of the same component, in which case the controls would
collide.
import {useControls}from'theatric'
functionIntroduction({ id }) {
const { name, age } =useControls({name:'Andrew',age:28}, {folder:id})
return (
<div>
Hey, I'm {name} and I'm {age} years old.
</div>
)
}
useControls also returns two special properties, $get and $set, which you
can use to get and set the values of your controls imperatively.
You can also place buttons on the control panel to trigger actions. You can
combine this with the $get and $set methods to create a more convenient UI.
Hey, I'm {person.name} and I'm {person.age} years old.
</div>
</div>
)
}
#initialize(config)
Optionally, you can call initialize() to initialize the UI with a certain
state, or to take advantage of features like
assets support. initialize() takes the same
config object as getProject().
The types export lets you provide more advanced options for your controls.
For example, to specify a range for a number, or adjust the scrubbing
sensitivity, you can use the number type.
import {useControls,types}from'theatric'
functionIntroduction() {
const { name, age } =useControls({
name:'Andrew',
age:types.number(28,{
// The range allowed in the UI (just a visual guide, not a validation rule)
range:[0,10],
// Factor influencing the mouse-sensitivity when scrubbing the input
nudgeMultiplier:0.1,
}),
})
return (
<div>
Hey, I'm {name} and I'm {age} years old.
</div>
)
}
This is simply a re-export via export {types} from '@theatre/core'. To learn more about types, check out the
types documentation.
#How does Theatric compare to Theatre.js?
You can use both Theatric and Theatre.js in the same project. That's a common use-case.
You'd use Theatre.js if you're creating complex animation, or if you have large projects with many objects and props to control.
On the other hand, if you're just looking for a quick way to tweak a few values in your app, Theatric is a good choice. It requires no setup, no configuration, and no boilerplate. All of your values end up in a single Theatre.js Object.
#License
Apache License Version 2.0. Theatric only embeds Theatre.js' studio in the development build, so studio won't be included in your production build.