React context provider that makes the achievement engine available to all child components via hooks.
If you’re using createAchievements(), you should use the returned Provider component instead, which has the engine already bound.
Signature
function AchievementsProvider<TId extends string>({
engine,
children,
}: {
engine: AchievementEngine<TId>;
children: ReactNode;
}): JSX.Element
Parameters
engine
AchievementEngine<TId>
required
The achievement engine instance created with createAchievements() from the core package.
React children that will have access to the achievement engine via hooks.
Example
Using the factory’s bound Provider (recommended)
import { createAchievements, localStorageAdapter } from "achievements-react";
const { Provider, useAchievements } = createAchievements({
definitions,
storage: localStorageAdapter("app"),
});
function App() {
return (
<Provider>
<Dashboard />
</Provider>
);
}
Using AchievementsProvider directly
import {
createAchievements as createEngine,
localStorageAdapter,
} from "achievements";
import { AchievementsProvider } from "achievements-react";
const engine = createEngine({
definitions,
storage: localStorageAdapter("app"),
});
function App() {
return (
<AchievementsProvider engine={engine}>
<Dashboard />
</AchievementsProvider>
);
}
Notes
- All achievement hooks must be used within an
AchievementsProvider or the factory’s Provider
- The provider uses React Context to distribute the engine instance
- If hooks are used outside a provider, they will throw an error: “useEngine must be used inside AchievementsProvider”
