diff --git a/packages/theatric/README.md b/packages/theatric/README.md index 0289eff..4f912ca 100644 --- a/packages/theatric/README.md +++ b/packages/theatric/README.md @@ -16,11 +16,7 @@ $ npm install theatric ```tsx // index.jsx -import {initialize} from 'theatric' - -initialize().then(() => { - ReactDOM.render(, document.getElementById('root')) -}) +ReactDOM.render(, document.getElementById('root')) // App.jsx import {useControls} from 'theatric' @@ -41,6 +37,48 @@ export default function App() { 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). +## Using assets + +Here is an example of using image assets in your controls. Learn more about assets [here](https://www.theatrejs.com/docs/latest/manual/assets). + +```tsx +import {initialize, useControls, types, getAssetUrl} from 'theatric' +import theatricState from './theatricState.json' + +initialize({ + // if you're using assets in your controls, you can specify the base URL here. + + 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')) +}) + +function App() { + const {img} = useControls({ + // this will accept jpegs/pngs/hdrs/etc + // its default value is '' (empty string) + // learn more about assets here: https://www.theatrejs.com/docs/latest/manual/assets + img: types.image('') + }) + + const src = getAssetUrl(img) + + return ( +
+ +
+ ) +} +``` + ## API [`useControls(controls, options?)`](#usecontrolscontrols-options) @@ -175,27 +213,35 @@ state, or to take advantage of features like [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' +import {initialize, useControls, types, getAssetUrl} from 'theatric' import theatricState from './theatricState.json' initialize({ + // use the state of the state.json file you exported from the UI 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')) -}) + // theatric is ready (although we don't have to wait for it unless we want to use assets) }) + +ReactDOM.render(, document.getElementById('root')) + +function App() { + const {img} = useControls({ + name: 'Andrew', + age: types.number(28, { + range: [0, 150], + }), + }) + + + return ( +
+ Hey, I'm {name} and I'm {age} years old. +
+ ) +} ``` ### `types` @@ -232,6 +278,10 @@ This is simply a re-export via `export {types} from '@theatre/core'`. To learn m ## How does Theatric compare to Theatre.js? -First of all, you can use both Theatric and Theatre.js in the same project. +* 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](https://www.theatrejs.com/docs/latest/manual/objects). -Theatric's usage is similar to [Leva] +## 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. \ No newline at end of file