@loadsmart/react-frontend-settings
TypeScript icon, indicating that this package has built-in type declarations

2.1.0 • Public • Published

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,
});

Readme

Keywords

none

Package Sidebar

Install

npm i @loadsmart/react-frontend-settings

Weekly Downloads

0

Version

2.1.0

License

MIT

Unpacked Size

23.6 kB

Total Files

18

Last publish

Collaborators

  • bruno.manzo
  • felipe.asantos
  • giovannitoledo
  • douglasklein2
  • luiz.loadsmart
  • mwconceicao
  • yidi0912
  • lenoir.zamboni
  • diogomafra
  • oliver.tso
  • loadsmart-frontend
  • brennervaz
  • raittes
  • welingtonms-loadsmart
  • gutofoletto