Current locale is {locale}
;\n}\n```\n\n## Composable app\n\nCreate small React apps that can be composed with other apps.\n\n### `createApp`\n\nArguments:\n\n- `App: ReactElement` - required\n- `options: { appName?: string }` - optional. By default, the name of your composable app is the name of your `App` component. You can change it using the optional argument `appName`.\n\nCreate a file called `index.ts|js` in the `src` directory where your composable app is. For example:\n\n```\nmy-monorepo/\n├─ apps/\n│ ├─ react-host/\n├─ composable-apps/\n│ ├─ react-app-1/\n│ │ ├─ package.json\n│ │ ├─ src/\n│ │ │ ├─ ReactApp1.tsx\n│ │ │ ├─ index.ts 👈\n├─ package.json\n```\n\n:::tip\n\nRead the recommended setup in our [getting started page](../../docs/getting-started/#recommended-setup) if you want to create a similar monorepo structure\n\n:::\n\nCall `createApp` with the root component of your app, for example:\n\n```ts\n// my-monorepo/composable-apps/react-app-1/src/index.ts\n\n// for either React 16 or React 17 import from \"@leanjs/react/17\"\nimport { createApp } from \"@leanjs/react/18\";\n\nimport { ReactApp1 } from \"./ReactApp1\";\n\n// 👇 you have to `export default`\nexport default createApp(ReactApp1);\n\n// The name of the composable app is the name of your component,\n// \"ReactApp1 in this case.\n// you can name it differently using the second argument, e.g.\n// export default createApp(ReactApp1, { appName: \"SomeName\" });\n```\n\nHello world example of the `ReactApp1` imported above\n\n```tsx\n// my-monorepo/composable-apps/react-app-1/src/ReactApp1.tsx\n\nimport React from \"react\";\n\nexport const ReactApp1 = () =>Locale is {locale}
;\n}\n```\n\n### `useSetter`\n\nHook to update the value of a given state property. You have to **call [createRuntimeBindings](#createruntimebindings) to create a `useSetter` hook** before you use it.\n\nArguments:\n\n1. State property, required.\n\nThe output is a function to update the value of the given state property.\n\nExample:\n\n```jsx\n// where does shared-runtime come from? Read the \"Usage\" section at the top\nimport { useSetter } from \"./shared-runtime\";\n\nexport function ThemeSelector() {\n const setTheme = useSetter(\"theme\");\n\n return (\n <>\n \nLoading...
;\n } else {\n return null;\n }\n}\n```\n\n### `useError`\n\nHook to get the error state if a given state property failed to load. You have to **call [createRuntimeBindings](#createruntimebindings) to create a `useError` hook** before you use it.\n\nArguments:\n\n1. State property, required.\n\nThe output is undefined or a string with the error message.\n\nExample:\n\n```tsx\n// where does shared-runtime come from? Read the \"Usage\" section at the top\nimport { useError } from \"./shared-runtime\";\n\nexport function LocaleErrorMessage() {\n const error = useError(\"locale\");\n\n if (error) {\n returnOops, locale error: {error}
;\n } else {\n return null;\n }\n}\n```\n\n### `useRuntime`\n\nIt returns the shared `runtime` from the context. You have to **call [createRuntimeBindings](#createruntimebindings) to create a `useRuntime` hook** before you use it.\n\nExample:\n\n```jsx\n// where does shared-runtime come from? Read the \"Usage\" section at the top\nimport { useRuntime } from \"./shared-runtime\";\n\n// HostProvider must be an ancestor of the following component\nexport function Component() {\n const runtime = useRuntime(); // do something with runtime\n\n return