Options
All
  • Public
  • Public/Protected
  • All
Menu

LaunchDarkly React SDK (3.1.0)

Index

Namespaces

Classes

Interfaces

Type aliases

Variables

Functions

Type aliases

AsyncProviderConfig

AsyncProviderConfig: Omit<ProviderConfig, "deferInitialization"> & { deferInitialization?: boolean }

Configuration object used to initialize LaunchDarkly's JS client asynchronously.

Variables

camelCaseKeys

camelCaseKeys: { camelCaseKeys: { (rawFlags: LDFlagSet): LDFlagSet; camelCaseKeys: ...; } } = ...

Type declaration

    • (rawFlags: LDFlagSet): LDFlagSet

    • Transforms a set of flags so that their keys are camelCased. This function ignores flag keys which start with $.

      Parameters

      • rawFlags: LDFlagSet

        A mapping of flag keys and their values

      Returns LDFlagSet

      A transformed LDFlagSet with camelCased flag keys

  • camelCaseKeys: { (rawFlags: LDFlagSet): LDFlagSet; camelCaseKeys: ...; }

defaultReactOptions

defaultReactOptions: { sendEventsOnFlagRead: boolean; useCamelCaseFlagKeys: boolean } = ...

Contains default values for the reactOptions object.

Type declaration

  • sendEventsOnFlagRead: boolean
  • useCamelCaseFlagKeys: boolean

Functions

asyncWithLDProvider

  • asyncWithLDProvider(config: AsyncProviderConfig): Promise<(__namedParameters: { children: ReactNode }) => Element>

  • This is an async function which initializes LaunchDarkly's JS SDK (launchdarkly-js-client-sdk) and awaits it so all flags and the ldClient are ready before the consumer app is rendered.

    The difference between withLDProvider and asyncWithLDProvider is that withLDProvider initializes launchdarkly-js-client-sdk at componentDidMount. This means your flags and the ldClient are only available after your app has mounted. This can result in a flicker due to flag changes at startup time.

    asyncWithLDProvider initializes launchdarkly-js-client-sdk at the entry point of your app prior to render. This means that your flags and the ldClient are ready at the beginning of your app. This ensures your app does not flicker due to flag changes at startup time.

    asyncWithLDProvider accepts a config object which is used to initialize launchdarkly-js-client-sdk.

    asyncWithLDProvider does not support the deferInitialization config option because asyncWithLDProvider needs to be initialized at the entry point prior to render to ensure your flags and the ldClient are ready at the beginning of your app.

    It returns a provider which is a React FunctionComponent which:

    • saves all flags and the ldClient instance in the context API
    • subscribes to flag changes and propagate them through the context API

    Parameters

    Returns Promise<(__namedParameters: { children: ReactNode }) => Element>

Const useFlags

  • useFlags<T>(): T

  • useFlags is a custom hook which returns all feature flags. It uses the useContext primitive to access the LaunchDarkly context set up by withLDProvider. As such you will still need to use the withLDProvider HOC at the root of your app to initialize the React SDK and populate the context with ldClient and your flags.

    Type parameters

    • T: LDFlagSet = LDFlagSet

    Returns T

    All the feature flags configured in your LaunchDarkly project

Const useLDClient

  • useLDClient(): undefined | LDClient

  • useLDClient is a custom hook which returns the underlying LaunchDarkly JavaScript SDK client object. Like the useFlags custom hook, useLDClient also uses the useContext primitive to access the LaunchDarkly context set up by withLDProvider. You will still need to use the withLDProvider HOC to initialise the react sdk to use this custom hook.

    Returns undefined | LDClient

    The launchdarkly-js-client-sdk LDClient object

useLDClientError

  • useLDClientError(): undefined | Error

  • Provides the LaunchDarkly client initialization error, if there was one.

    Returns undefined | Error

    The launchdarkly-js-client-sdk LDClient initialization error

withLDConsumer

  • withLDConsumer(options?: ConsumerOptions): <P>(WrappedComponent: ComponentType<P & LDProps>) => (props: P) => Element

  • withLDConsumer is a function which accepts an optional options object and returns a function which accepts your React component. This function returns a HOC with flags and the ldClient instance injected via props.

    Parameters

    • options: ConsumerOptions = ...

      If you need only the ldClient instance and not flags, then set { clientOnly: true } to only pass the ldClient prop to your component. Defaults to { clientOnly: false }.

    Returns <P>(WrappedComponent: ComponentType<P & LDProps>) => (props: P) => Element

    A HOC with flags and the ldClient instance injected via props

      • <P>(WrappedComponent: ComponentType<P & LDProps>): (props: P) => Element

      • Type parameters

        • P

        Parameters

        • WrappedComponent: ComponentType<P & LDProps>

        Returns (props: P) => Element

          • (props: P): Element

          • Parameters

            • props: P

            Returns Element

withLDProvider

  • withLDProvider<T>(config: ProviderConfig): (WrappedComponent: React.ComponentType<T>) => React.ComponentType<T>

  • withLDProvider is a function which accepts a config object which is used to initialize launchdarkly-js-client-sdk.

    This HOC handles passing configuration to the LDProvider, which does the following:

    • It initializes the ldClient instance by calling launchdarkly-js-client-sdk initialize on componentDidMount
    • It saves all flags and the ldClient instance in the context API
    • It subscribes to flag changes and propagate them through the context API

    The difference between withLDProvider and asyncWithLDProvider is that withLDProvider initializes launchdarkly-js-client-sdk at componentDidMount. This means your flags and the ldClient are only available after your app has mounted. This can result in a flicker due to flag changes at startup time.

    asyncWithLDProvider initializes launchdarkly-js-client-sdk at the entry point of your app prior to render. This means that your flags and the ldClient are ready at the beginning of your app. This ensures your app does not flicker due to flag changes at startup time.

    Type parameters

    • T: IntrinsicAttributes = {}

    Parameters

    • config: ProviderConfig

      The configuration used to initialize LaunchDarkly's JS SDK

    Returns (WrappedComponent: React.ComponentType<T>) => React.ComponentType<T>

    A function which accepts your root React component and returns a HOC

      • (WrappedComponent: React.ComponentType<T>): React.ComponentType<T>

      • withLDProvider is a function which accepts a config object which is used to initialize launchdarkly-js-client-sdk.

        This HOC handles passing configuration to the LDProvider, which does the following:

        • It initializes the ldClient instance by calling launchdarkly-js-client-sdk initialize on componentDidMount
        • It saves all flags and the ldClient instance in the context API
        • It subscribes to flag changes and propagate them through the context API

        The difference between withLDProvider and asyncWithLDProvider is that withLDProvider initializes launchdarkly-js-client-sdk at componentDidMount. This means your flags and the ldClient are only available after your app has mounted. This can result in a flicker due to flag changes at startup time.

        asyncWithLDProvider initializes launchdarkly-js-client-sdk at the entry point of your app prior to render. This means that your flags and the ldClient are ready at the beginning of your app. This ensures your app does not flicker due to flag changes at startup time.

        Parameters

        • WrappedComponent: React.ComponentType<T>

        Returns React.ComponentType<T>

        A function which accepts your root React component and returns a HOC

Generated using TypeDoc