useUiConfig

A custom hook for accessing UI configuration from the UiConfigContext. Allows optional selection of specific parts of the UI config state using a selector function. For editing and updating the underlying UI config on the fly.

Import

1
import { useUiConfig } from "@account-kit/react";

Usage

import { 
function useUiConfig<T = UiConfigStore>(selector?: (state: UiConfigStore) => T): T
useUiConfig } from "@account-kit/react";

const { 
const illustrationStyle: "outline" | "linear" | "filled" | "flat" | undefined
illustrationStyle, 
const auth: {
    addPasskeyOnSignup?: boolean;
    header?: React.ReactNode;
    hideError?: boolean;
    onAuthSuccess?: () => void;
    sections: AuthType[][];
    hideSignInText?: boolean;
} | undefined
auth } = 
useUiConfig<{
    illustrationStyle: "outline" | "linear" | "filled" | "flat" | undefined;
    auth: {
        addPasskeyOnSignup?: boolean;
        header?: React.ReactNode;
        hideError?: boolean;
        onAuthSuccess?: () => void;
        sections: AuthType[][];
        hideSignInText?: boolean;
    } | undefined;
}>(selector?: ((state: UiConfigStore) => {
    illustrationStyle: "outline" | "linear" | "filled" | "flat" | undefined;
    auth: {
        addPasskeyOnSignup?: boolean;
        header?: React.ReactNode;
        hideError?: boolean;
        onAuthSuccess?: () => void;
        sections: AuthType[][];
        hideSignInText?: boolean;
    } | undefined;
}) | undefined): {
    illustrationStyle: "outline" | "linear" | "filled" | "flat" | undefined;
    auth: {
        addPasskeyOnSignup?: boolean;
        header?: React.ReactNode;
        hideError?: boolean;
        onAuthSuccess?: () => void;
        sections: AuthType[][];
        hideSignInText?: boolean;
    } | undefined;
}
useUiConfig(
  ({ 
illustrationStyle: "outline" | "linear" | "filled" | "flat" | undefined
illustrationStyle, 
auth: {
    addPasskeyOnSignup?: boolean;
    header?: React.ReactNode;
    hideError?: boolean;
    onAuthSuccess?: () => void;
    sections: AuthType[][];
    hideSignInText?: boolean;
} | undefined
auth }) => ({ 
illustrationStyle: "outline" | "linear" | "filled" | "flat" | undefined
illustrationStyle, 
auth: {
    addPasskeyOnSignup?: boolean;
    header?: React.ReactNode;
    hideError?: boolean;
    onAuthSuccess?: () => void;
    sections: AuthType[][];
    hideSignInText?: boolean;
} | undefined
auth }),
);

Parameters

selector

(state: UiConfigStore) => T

• An optional function to select specific parts of the UI config state. ref

Returns

T

• The selected state passed through the selector function or the entire state if no selector is provided