\n\nA tool for embedding OneSchema into your application with React. This library contains a React component which will allow you to add an iframe to your application which can open OneSchema and import data into your application.\n\n## Getting Started\n\n### Installation\n\nYou can install this package with npm:\n\n```bash\nnpm i --save @oneschema/react\n```\n\nWith pnpm, install `eventemitter3` alongside it:\n\n```bash\npnpm add @oneschema/react eventemitter3@^4.0.7\n```\n\nThe importer class this component wraps extends `EventEmitter` from `eventemitter3`, so that type is part of the published declarations. pnpm keeps each package's dependencies isolated instead of hoisting them, so your build cannot resolve `eventemitter3` unless it is declared in your project too. npm and yarn hoist it for you.\n\n### Sample usage\n\n```javascript\nimport React, { useState } from \"react\"\nimport OneSchemaImporter from \"@oneschema/react\"\n\nfunction OneSchemaExample() {\n const [isOpen, setIsOpen] = useState(false)\n\n const handleData = (data) => {\n console.log(data)\n }\n\n return (\n
\n )\n}\n```\n\n## API reference\n\nThe tables below are generated from the TypeScript types by `yarn docs:api` —\nedit the JSDoc in `src/OneSchemaImporter.tsx` and the importer's `src/config.ts`,\nnot the tables.\n\n### Props\n\nEvery option of [`@oneschema/importer`](https://www.npmjs.com/package/@oneschema/importer)\ncan also be passed as a prop; they are forwarded to the importer as launch\nparams.\n\n\n\n| Prop | Type | Required | Default | Description |\n| ---------------- | ----------------------------------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `isOpen` | `boolean` | yes | | Whether to show the iframe or not |\n| `inline` | `boolean` | | `true` | Whether the iframe should be rendered in the component tree. When false, the iframe is appended to document.body |\n| `clientId` | `string` | yes | | The client id from your OneSchema developer dashboard |\n| `className` | `string` | | | CSS class for the iframe |\n| `devMode` | `boolean` | | | Whether to launch the importer in dev mode, which shows the iframe even when launching fails |\n| `languageCode` | `string` | | | Language code (like 'en' or 'zh') to force the importer language. By default, uses the user's set language. Requires enterprise licensing |\n| `saveSession` | `boolean` | | | Whether to save session information to local storage and enable resuming |\n| `baseUrl` | `string` | | | The base URL for the iframe. By default uses OneSchema's production instance |\n| `style` | `React.CSSProperties` | | | CSS styles that should be applied to the iframe |\n| `onRequestClose` | `() => void` | | | Handler for when the importer wants to close should set isOpen prop to false |\n| `onSuccess` | `(data: OneSchemaImportResult) => void` | | | Handler for when the importing flow completes successfully |\n| `onCancel` | `() => void` | | | Handler for when the importing flow is cancelled by user |\n| `onError` | `(error: OneSchemaError) => void` | | | Handler for when an error occurs during the import |\n| `onPageLoad` | `() => void` | | | Handler for when the embedded Importer page is loaded behind the scenes. |\n| `onLaunched` | `(result: OneSchemaLaunchStatus) => void` | | | Handler for when the importer is launched (aka is ready to be shown) Or when launching fails, based on result |\n| `onUserActivity` | `() => void` | | | Handler for when user activity is detected inside the importer iframe. Useful for resetting session idle timers in the host application. This event is throttled (fired at most once every 30 seconds). |\n\n\n\n### Launch props\n\nThese are forwarded to the importer when `isOpen` becomes true.\n\n\n\nLaunch with a user JWT and a template key:\n\n| Option | Type | Required | Default | Description |\n| ------------------------ | ---------------------------- | -------- | ------- | -------------------------------------------------------------------------------------------- |\n| `userJwt` | `string` | yes | | The JSON web token for the user importing data |\n| `templateKey` | `string` | yes | | The key for the template that data will be imported for. Setup inside OneSchema before using |\n| `templateOverrides` | `OneSchemaTemplateOverrides` | | | Template overrides to modify the behavior of the base template |\n| `importConfig` | `ImportConfig` | | | The configuration for how data should be imported from OneSchema |\n| `customizationKey` | `string` | | | Key for a customization setup in OneSchema |\n| `customizationOverrides` | `ImporterCustomization` | | | Customization options for how OneSchema will behave |\n| `eventWebhookKeys` | `string[]` | | | Event webhooks that should be used during an import session |\n\nOr, instead of those, with a session token created through the API:\n\n| Option | Type | Required | Default | Description |\n| -------------- | -------- | -------- | ------- | ------------------------------------------------------------------------ |\n| `sessionToken` | `string` | yes | | A token for a session created through the API for initializing OneSchema |\n\n\n\n### Events\n\nEach event below is exposed as the matching `on*` prop.\n\n\n\n| Event | Listener arguments | Description |\n| --------------- | ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |\n| `page-loaded` | `Record` | The embedded importer page finished loading behind the scenes |\n| `launched` | `OneSchemaLaunchStatus` | The import session was launched, or launching it failed |\n| `success` | `OneSchemaImportResult` | The user finished importing. For `local` imports the data is the payload, for `webhook` imports it summarizes the delivery |\n| `cancel` | none | The user cancelled the import |\n| `error` | `OneSchemaError` | Something went wrong. `severity` is `fatal` when the session cannot continue |\n| `user-activity` | none | The user interacted with the importer. Throttled to once every 30 seconds, and useful for resetting idle timers in the host application |\n\n\n\n## Documentation\n\nPlease see [📚 OneSchema's documentation](https://docs.oneschema.co/) for [📒 API reference](https://docs.oneschema.co/docs/react#api-reference) and other helpful guides.\n","readmeFilename":"README.md"}
![](\"https://uploads-ssl.webflow.com/62902d243ad8aef519be0d3e/62902d243ad8ae4014be0e97_oneschema-256.png\")
\n