React SDKs

Work with Ninetailed Experiences, instances, and profiles with React Hooks.

Hooks

useExperience

Returns the loading state of an experience and once loaded, the all relevant metadata of the experience including the assigned variant and variant index. This hook powers the React <Experience> component exported by the SDKs.

This hook is useful when you need imperative access to the metadata an assigned experience, often in circumstances where you are not intending to render out CMS-sourced content variations. For example, you might be using a feature-flag style experiment where you have no need for the <Experience> component, but your application still needs to change behavior and/or send tracking calls based on the assigned variantIndex.

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 | null,
        experience: ExperienceConfiguration<Variant> | null,
        hasVariants: boolean,
        isPersonalized: boolean,
        loading: boolean,
        profile: Profile,
        status: 'loading' | 'success' | 'error',
        variant: Variant,
        variantIndex: number,
    } = useExperience(baseline, experiences);
    
    // Go wild
}

useNinetailed

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
}

useProfile

Retrieves the current profile state from the nearest <NinetailedProvider>.

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>
}