access props outside component hoc - launch darkly implementation

Question

I'm trying to access the props outside of a HOC. I'm trying to set up launch darkly and I need the clientSideID to be dynamic based on settings. I can't seem to figure out what I'm doing wrong. The withLDProvider is a function that needs to wrap the entire app. Can someone help me out? Thank you so much!

import React from 'react';
import PropTypes from 'prop-types';
import { withLDProvider } from 'launchdarkly-react-client-sdk';
import { get } from 'lodash';
import { getEnv } from '../helpers/env';
import { LAUNCH_DARKLY } from '../constants/launchdarkly';

const LaunchDarklyProvider = ({ clientSideID }) => {
  console.log('clientSideID provider', clientSideID);
  const LDComponent = withLDProvider({
    clientSideID,
  });

  return <LDComponent />;
};

LaunchDarklyProvider.propTypes = {
  clientSideID: PropTypes.string,
};

const LDProvider = WrappedComponent => {
  const environment = getEnv();
  const { LOCAL, TEST } = LAUNCH_DARKLY;

  const LDProviderHOC = props => {
    const { local } = props;
    const { settings } = local;
    let clientId;

    switch (environment) {
      case 'test':
        clientId = TEST;
        break;
      case 'local':
        clientId = LOCAL;
        break;
      case 'production':
        clientId = get(settings, 'launchDarkly.clientSideId', '');
        break;
      default:
        break;
    }

    return <WrappedComponent {...props} clientSideID={clientId} />;
  };

  LDProviderHOC.propTypes = {
    local: PropTypes.object,
  };

  return LDProviderHOC;
};

export const ToggleProvider = () => LDProvider(LaunchDarklyProvider);

score 2 · Answer 1 · answered Mar 23 '20 at 17:03

First, why not configure your clientSideId as an env var and have your build (i.e., webpack, etc.) inject it in rather than using a switch statement?

If you're bound to reading in the config like you're doing above, why not use the basic implementation:

import { withLDProvider } from 'launchdarkly-react-client-sdk';
import { get } from 'lodash';
import { getEnv } from '../helpers/env';
import { LAUNCH_DARKLY } from '../constants/launchdarkly';

const environment = getEnv();
const { LOCAL, TEST } = LAUNCH_DARKLY;
let clientId;
switch (environment) {
  case 'test':
    clientId = TEST;
    break;
  case 'local':
    clientId = LOCAL;
    break;
  case 'production':
    clientId = get(settings, 'launchDarkly.clientSideId', '');
    break;
  default:
    break;
}

export default withLDProvider({ 
  clientSideID: clientId,
  user: {
    "key": "aa0ceb",
    "name": "Grace Hopper",
    "email": "gracehopper@example.com"
  },
  options: { /* ... */ }
})(YourApp);

access props outside component hoc - launch darkly implementation

1 Answers1