Comment on page
React Hooks
Work with Ninetailed Experiences, instances, and profiles with React Hooks.
import { useExperience } from '@ninetailed/experience.js-react';
// or import { useExperience } from '@ninetailed/experience.js-next'
// or import { useExperience } from '@ninetailed/experience.js-gatsby'
import type { Baseline, ExperienceConfiguration, Profile, Reference } from '@ninetailed/experience.js'
const YourComponent = (props: {
baseline: Baseline,
experiences: ExperienceConfiguration<Variant extends Reference>[]
}) => {
const {
audience,
baseline,
error,
experience,
hasVariants,
isPersonalized,
loading,
profile,
status,
variant,
variantIndex
}: {
audience: { id: string } | null,
baseline: Baseline,
error: Error,
experience: ExperienceConfiguration<Variant> | null,
hasVariants: boolean,
isPersonalized: boolean,
loading: boolean,
profile: Profile,
status: 'loading' | 'status' | 'success',
variant: Variant,
variantIndex: number,
} = useExperience(baseline, experiences);
// Go wild
}
Retrieves the Ninetailed instance from the nearest
<NinetailedProvider> and all of its instance methods and properties as in the Ninetailed Instance documentation.import { useNinetailed } from '@ninetailed/experience.js-react';
// or import { useNinetailed } from '@ninetailed/experience.js-next'
// or import { useNinetailed } from '@ninetailed/experience.js-gatsby'
const YourComponent = () => {
const {
debug,
identify,
observeElement,
onIsInitialized,
onProfileChange,
page,
plugins,
profileState,
reset,
track,
trackComponentView,
unobserveElement
} = useNinetailed();
// Go wild
}
Retrieves the current profile from the nearest
<NinetailedProvider>. These data are also available on the profileState property returned by the useNinetailed hook.import { useProfile } from '@ninetailed/experience.js-react';
// or import { useProfile } from '@ninetailed/experience.js-next'
// or import { useProfile } from '@ninetailed/experience.js-gatsby'
const GreetingComponent = () => {
const {
error,
from,
loading,
profile,
status
}: {
error: Error | null,
from: 'api' | 'hydrated',
loading: boolean,
profile: Profile | null,
status: "error" | "loading" | "success"
} = useProfile();
return <p>Hey {profile.traits.firstname}, nice weather in {profile.location.city}!</p>
}
Last modified 11d ago