diff --git a/packages/theatric/README.md b/packages/theatric/README.md index 0089b1b..a5bf729 100644 --- a/packages/theatric/README.md +++ b/packages/theatric/README.md @@ -44,48 +44,6 @@ 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) @@ -283,6 +241,48 @@ function Introduction() { 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). +## 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 ( +
+ +
+ ) +} +``` + ## 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.