React Frontend Settings

Dynamic frontend settings for React applications.

This application is meant to be used together with django-frontend-settings or some other settings provider. The most important part is that the getSettings function must return a Promise which will resolve to a json object like:

{
  "settings": {
    "GOOGLE_MAPS_KEY": "abcd1234",
    "SOME_OTHER_SETTING": 123
  },
  "flags": {
    "ENABLE_FEATURE_AAA": true,
    "ENABLE_FEATURE_BBB": false
  }
}

Usage/Examples

You will need to wrap your application with the SettingsProvider component, like this:

import { SettingsProvider } from '@loadsmart/react-frontend-settings'

function getSettings() {
  return http.get('/api/frontend-settings')
}

function App() {
  return (
      <SettingsProvider getSettings={getSettings}>
        <ThemeProvider theme={myTheme}>
        <Suspense fallback={<p>Loading</p>}>
          {/* ... */}
        </Suspense>
      </SettingsProvider>
  )
}

The provider accepts options as well:

• updateIntervalMs: the interval to refetch the settings in ms, default: 10 minutes.
• onGetSettingsFail: how to handle an error when fetching the settings, accepts two values:
  • keep-last: if the request fail, keep the last known value.
  • reset: if the request fail, revert to the inital (empty) value.

After that you can use the hooks/hocs provided by the library:

useSettings

function AddressInput({ ...props }) {
  const {
    values: [gmapsKey],
    isLoading,
  } = useSettings(['settings.GOOGLE_MAPS_KEY']);

  const gMapsStaus = useScript(gmapsKey ? scriptUrl(gmapsKey) : '');

  if (isLoading) return null;

  return <GeoInput {...props} />;
}

withSettings

function AddressInput({ gmapsKey, allowedCountries, ...props }) {
  const country = allowedCountries?.split(',') || 'us';
  const gMapsStaus = useScript(gmapsKey ? scriptUrl(gmapsKey) : '');

  return <GeoInput country={country} {...props} />;
}

const options = {
  settingsMap: {
    gmapsKey: 'settings.GOOGLE_MAPS_KEY',
    allowedCountries: 'settings.ALLOWED_COUNTRIES',
  },
  loadingComponent: Loading,
};

export default withSettings(AddressInput, options);

withFeatureFlag

function ComponentV1() {
  return <span>V1</span>;
}

function ComponentV2() {
  return <span>V2</span>;
}

export default withFeatureFlag(ComponentV2, {
  flags: ['flags.ENABLE_COMPONENT_V1'],
  fallbackComponent: ComponentV1,
});