Skip to main content
All React exports come from @ulesson-education/mind-sdk/react.

​
MindWidgetProvider

Creates the widget instance and provides it through React context. 
import {MindWidgetProvider} from '@ulesson-education/mind-sdk/react';

<MindWidgetProvider config={{authCookieKey: 'session'}}>
  {children}
</MindWidgetProvider>
​
config
MindConfig
required
Widget configuration. See Configuration.
​
children
ReactNode
Your app tree.

​
MindWidgetHost

Mounts the widget into the DOM. Place it once inside the provider. 
import {MindWidgetHost} from '@ulesson-education/mind-sdk/react';

<MindWidgetHost onMountError={(err) => console.error(err)} />
MindWidgetHost forwards a ref and accepts any standard <div> attributes such as className and style, plus:
​
widget
MindWidget
Mount a specific widget instance instead of the one from the provider.
​
onMountError
(error: Error) => void
Called if mounting fails.
The host throws if there is no widget prop and no surrounding MindWidgetProvider.

​
useMindWidget()

Returns the widget controller — the live widget instance plus a reactive snapshot of its state and context. Must be called inside a MindWidgetProvider. 
import {useMindWidget} from '@ulesson-education/mind-sdk/react';

function Controls() {
  const {widget, state, context} = useMindWidget();

  return (
    <div>
      <p>State: {state}</p>
      <p>Page: {context?.pageType ?? 'unset'}</p>
      <button onClick={() => widget.transitionTo('engage')}>Open</button>
    </div>
  );
}
The returned MindWidgetController is: 
interface MindWidgetController {
  widget: MindWidget;              // imperative widget instance
  state: WidgetState;              // re-renders when the state changes
  context?: LearningContext;       // re-renders when context changes
}

​
useOptionalMindWidget()

Same as useMindWidget() but returns null instead of throwing when used outside a provider. Useful for components that may render in either context.

​
useMindWidgetController(config)

The lower-level hook that MindWidgetProvider uses internally. Call it directly to manage the controller yourself without the context provider. It creates the widget once, subscribes to its snapshot, applies lmsContext updates, and destroys the widget on unmount. 
import {useMindWidgetController} from '@ulesson-education/mind-sdk/react';

function MyHost() {
  const {widget, state, context} = useMindWidgetController({authCookieKey: 'session'});
  // …
}