diff --git a/packages/theatric/README.md b/packages/theatric/README.md index 82210d3..0289eff 100644 --- a/packages/theatric/README.md +++ b/packages/theatric/README.md @@ -1,20 +1,45 @@ -An easy to use Tweakpane/Leva-like library for React, built on top of -Theatre.js. +An easy to use [Tweakpane](https://cocopon.github.io/tweakpane/)/[Leva](https://github.com/pmndrs/leva)-like library for React, built on top of +[Theatre.js](github.com/theatre-js/theatre). -You can use Theatric to quickly tweak values in your React components, or create -quick prototypes without worrying about setting up a UI. +With Theatric you can: -Unlike Leva or Tweakpane, Theatric can save or export the state of your controls -and load it back in later. You can even share the state with other people, so -they can see the same values you're seeing, or leave Theatric's `useControls` -hooks in production, and let Theatric set the values from the provided state -without displaying the UI. +* Create controls for your React components. +* 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. -Since Theatric is built on top of Theatre.js, you can also animate all the -values. +## Quick start -It comes with no peer-dependencies, all you need to do to set it up is run -`yarn add theatric` or `npm install theatric`. +```bash +$ npm install theatric +``` + +```tsx +// index.jsx +import {initialize} from 'theatric' + +initialize().then(() => { + ReactDOM.render(, document.getElementById('root')) +}) + +// App.jsx +import {useControls} from 'theatric' +import React from 'react' + +export default function App() { + const {name, age} = useControls({name: 'Andrew', age: 28}) + + return ( +
+ Hey, I'm {name} and I'm {age} years old. +
+ ) +} +``` + +## Supported prop types + +Theatric supports all the prop types that Theatre.js supports. You can find a list of supported prop types [here](https://www.theatrejs.com/docs/latest/manual/prop-types). ## API @@ -112,12 +137,43 @@ function Introduction() { } ``` +`$get()` and `$set()` use pointers to specify which prop to get/set. Learn more about pointers [here](https://www.theatrejs.com/docs/latest/api/core#pointers). + +Example of setting a nested prop: + +```tsx +import {useControls, button} from 'theatric' + +function Introduction() { + const {person, $get, $set} = useControls({ + // note how name and age are sub-props of person + person: { + name: 'Andrew', + age: 28, + }, + + IncrementAge: button(() => { + // values.person.age is a pointer to the age prop of the person object + $set((values) => values.person.age, $get((values) => values.person.age) + 1) + }), + }) + + return ( +
+
+ Hey, I'm {person.name} and I'm {person.age} years old. +
+
+ ) +} +``` + ### `initialize(config)` Optionally, you can call `initialize()` to initialize the UI with a certain state, or to take advantage of features like -[assets](/docs/latest/manual/assets) support. `initialize()` takes the same -config object as [`getProject`](/docs/latest/api/core#getproject_id-config_). +[assets](https://www.theatrejs.com/docs/latest/manual/assets) support. `initialize()` takes the same +config object as [`getProject()`](https://www.theatrejs.com/docs/latest/api/core#getproject_id-config_). ```tsx import {initialize, useControls} from 'theatric' @@ -125,10 +181,20 @@ import theatricState from './theatricState.json' initialize({ state: theatricState, + // if you're using assets in your controls, you can specify the base URL here. + // Learn more about assets here: https://www.theatrejs.com/docs/latest/manual/assets assets: { // Defaults to '/' + // If you host your assets on a different domain, you can specify it here. + // For example if you're hosting your assets on https://cdn.example.com/theatric-assets + // you can set this to 'https://cdn.example.com/theatric-assets' (no trailing slash) baseUrl: '/theatric-assets', }, +}).then(() => { + // this is only necessary if you're using assets such as .hdr images in your prop values. + // awaiting the initialization ensures that the assets are loaded before rendering the app. + ReactDOM.render(, document.getElementById('root')) +}) }) ``` @@ -161,5 +227,11 @@ function Introduction() { } ``` -To learn more about types, check out the -[types documentation](/docs/latest/api/core#prop-types). +This is simply a re-export via `export {types} from '@theatre/core'`. To learn more about types, check out the +[types documentation](https://www.theatrejs.com/docs/latest/manual/prop-types). + +## How does Theatric compare to Theatre.js? + +First of all, you can use both Theatric and Theatre.js in the same project. + +Theatric's usage is similar to [Leva]