Class LDProvider

The LDProvider is a component which accepts a config object which is used to initialize launchdarkly-js-client-sdk.

This Provider does three things:

  • 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

Because the launchdarkly-js-client-sdk in only initialized on componentDidMount, 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.

This component can be used as a standalone provider. However, be mindful to only include the component once within your application. This provider is used inside the withLDProviderHOC and can be used instead to initialize the launchdarkly-js-client-sdk. For async initialization, check out the asyncWithLDProvider function

Hierarchy

Implements

  • EnhancedComponent

Constructors

constructor

Properties

context props refs state contextType?

Methods

componentDidCatch? componentDidMount componentDidUpdate componentWillMount? componentWillReceiveProps? componentWillUnmount? componentWillUpdate? forceUpdate getReactOptions getSnapshotBeforeUpdate? onFailed onReady prepareLDClient render setState shouldComponentUpdate? subscribeToChanges UNSAFE_componentWillMount? UNSAFE_componentWillReceiveProps? UNSAFE_componentWillUpdate?

Constructors

constructor

Properties

context

context: unknown

If using the new style context, re-declare this in your class to be the React.ContextType of your static contextType. Should be used with type annotation or static contextType.

Example

static contextType = MyContext
// For TS pre-3.7:
context!: React.ContextType<typeof MyContext>
// For TS 3.7 and above:
declare context: React.ContextType<typeof MyContext>

See

React Docs

Readonlyprops

props: Readonly<PropsWithChildren<ProviderConfig>>

refs

refs: {
    [key: string]: ReactInstance;
}

Deprecated

See

Legacy React Docs

Readonlystate

state: Readonly<ProviderState>

Static OptionalcontextType

contextType?: Context<any>

If set, this.context will be set at runtime to the current value of the given Context.

Example

type MyContext = number
const Ctx = React.createContext<MyContext>(0)

class Foo extends React.Component {
  static contextType = Ctx
  context!: React.ContextType<typeof Ctx>
  render () {
    return <>My context's value: {this.context}</>;
  }
}

See

https://react.dev/reference/react/Component#static-contexttype

Methods

OptionalcomponentDidCatch

  • componentDidCatch(error, errorInfo): void

  • Catches exceptions generated in descendant components. Unhandled exceptions will cause the entire component tree to unmount.

    Parameters

    • error: Error
    • errorInfo: ErrorInfo

    Returns void

componentDidMount

  • componentDidMount(): Promise<void>

  • Called immediately after a component is mounted. Setting state here will trigger re-rendering.

    Returns Promise<void>

componentDidUpdate

  • componentDidUpdate(prevProps): Promise<void>

  • Called immediately after updating occurs. Not called for the initial render.

    The snapshot is only present if getSnapshotBeforeUpdate is present and returns non-null.

    Parameters

    Returns Promise<void>

OptionalcomponentWillMount

OptionalcomponentWillReceiveProps

  • componentWillReceiveProps(nextProps, nextContext): void

  • Called when the component may be receiving new props. React may call this even if props have not changed, so be sure to compare new and existing props if you only want to handle changes.

    Calling Component.setState generally does not trigger this method.

    Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents this from being invoked.

    Parameters

    • nextProps: Readonly<PropsWithChildren<ProviderConfig>>
    • nextContext: any

    Returns void

    Deprecated

    16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead; will stop working in React 17

    See

OptionalcomponentWillUnmount

  • componentWillUnmount(): void

  • Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as cancelled network requests, or cleaning up any DOM elements created in componentDidMount.

    Returns void

OptionalcomponentWillUpdate

forceUpdate

  • forceUpdate(callback?): void

  • Parameters

    • Optionalcallback: (() => void)
        • (): void

        • Returns void

    Returns void

getReactOptions

  • getReactOptions(): {
        reactContext: Context<ReactSdkContext>;
        sendEventsOnFlagRead: boolean;
        useCamelCaseFlagKeys: boolean;
    }

  • Returns {
        reactContext: Context<ReactSdkContext>;
        sendEventsOnFlagRead: boolean;
        useCamelCaseFlagKeys: boolean;
    }

    • reactContext: Context<ReactSdkContext>

      The react context to use within the provider objects.

    • sendEventsOnFlagRead: boolean

      Whether to send flag evaluation events when a flag is read from the flags object returned by the useFlags hook. This is true by default, meaning flag evaluation events will be sent by default.

    • useCamelCaseFlagKeys: boolean

      Whether the React SDK should transform flag keys into camel-cased format. Using camel-cased flag keys allow for easier use as prop values, however, these keys won't directly match the flag keys as known to LaunchDarkly. Consequently, flag key collisions may be possible and the Code References feature will not function properly.

      This is true by default, meaning that keys will automatically be converted to camel-case.

      For more information, see the React SDK Reference Guide on flag keys.

      See

      https://docs.launchdarkly.com/sdk/client-side/react/react-web#flag-keys

OptionalgetSnapshotBeforeUpdate

  • getSnapshotBeforeUpdate(prevProps, prevState): any

  • Runs before React applies the result of Component.render render to the document, and returns an object to be given to componentDidUpdate. Useful for saving things such as scroll position before Component.render render causes changes to it.

    Note: the presence of this method prevents any of the deprecated lifecycle events from running.

    Parameters

    • prevProps: Readonly<PropsWithChildren<ProviderConfig>>
    • prevState: Readonly<ProviderState>

    Returns any

onFailed

onReady

prepareLDClient

render

  • render(): Element

  • Returns Element

setState

  • setState<K>(state, callback?): void

  • Type Parameters

    • K extends keyof ProviderState

    Parameters

    • state:
          | null
          | ProviderState
          | ((prevState: Readonly<ProviderState>, props: Readonly<PropsWithChildren<ProviderConfig>>) => null | ProviderState | Pick<ProviderState, K>)
          | Pick<ProviderState, K>
    • Optionalcallback: (() => void)
        • (): void

        • Returns void

    Returns void

OptionalshouldComponentUpdate

  • shouldComponentUpdate(nextProps, nextState, nextContext): boolean

  • Called to determine whether the change in props and state should trigger a re-render.

    Component always returns true. PureComponent implements a shallow comparison on props and state and returns true if any props or states have changed.

    If false is returned, Component.render, componentWillUpdate and componentDidUpdate will not be called.

    Parameters

    • nextProps: Readonly<PropsWithChildren<ProviderConfig>>
    • nextState: Readonly<ProviderState>
    • nextContext: any

    Returns boolean

subscribeToChanges

  • subscribeToChanges(ldClient): void

  • Parameters

    Returns void

OptionalUNSAFE_componentWillMount

OptionalUNSAFE_componentWillReceiveProps

  • UNSAFE_componentWillReceiveProps(nextProps, nextContext): void

  • Called when the component may be receiving new props. React may call this even if props have not changed, so be sure to compare new and existing props if you only want to handle changes.

    Calling Component.setState generally does not trigger this method.

    This method will not stop working in React 17.

    Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents this from being invoked.

    Parameters

    • nextProps: Readonly<PropsWithChildren<ProviderConfig>>
    • nextContext: any

    Returns void

    Deprecated

    16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead

    See

OptionalUNSAFE_componentWillUpdate

Settings

Member Visibility

On This Page

Constructors
Properties
Methods