Remote Config API

[davideast]

ReactFire Remote Config API

This PR introduces:

• Remote Config Hooks

  • useRemoteConfigValue()
  • useRemoteConfigString()
  • useRemoteConfigNumber()
  • useRemoteConfigBoolean()
  • useRemoteConfigAll()

• Optionally Type Safe useObservable<T>()

Remote Config Hooks

useRemoteConfigValue()

Takes in a key: string, optionally a RemoteConfig instance. Returns a remoteConfig.Value.

const PromotionalBanner = props => {
  const parameter = useRemoteConfigValue('banner', /* remoteConfig? */);
  const promotionalMessage = parameter.asString();
  return <div class="promo-banner">{promotionalMessage}</div>;
};

useRemoteConfigString()

Takes in a key: string, optionally a RemoteConfig instance. Returns a string.

const PromotionalBanner = props => {
  const promotionalMessage = useRemoteConfigString('banner', /* remoteConfig? */);
  return <div class="promo-banner">{promotionalMessage}</div>;
};

useRemoteConfigNumber()

Takes in a key: string, optionally a RemoteConfig instance. Returns a number.

const SalesCalculatorDisplay = props => {
  const discount = useRemoteConfigNumber('discount', /* remoteConfig? */);
  const newTotal = props.cartTotal - discount;
  return (
      <div class="sales-display">
         <p>You saved ${discount}!</p>
         <p>Total: ${newTotal}</p>
      </div>
   );
};

useRemoteConfigBoolean()

Takes in a key: string, optionally a RemoteConfig instance. Returns a boolean.

const ConfiguredAd = props => {
  // turn off ads dynamically, could set condition for paid users
  const isAdEnabled = useRemoteConfigNumber('show_ads', /* remoteConfig? */);
  // if isAdEnabled === true set display to block, else none
  const display = isAdEnabled ? 'block' : 'none';
  const styles = { display };
  return (
      <div class="display_ad" styles={styles}>
         <p>Check out the all new...</p>
      </div>
   );
};

useRemoteConfigAll()

Takes in a key: string, optionally a RemoteConfig instance. Returns a [key: string]: RemoteConfigValue;.

const App = props => {
  const configurations = useRemoteConfigAll(/*  remotConfig? */);
  const keys = Object.keys(configurations); // [ /* array of keys from RC */ ]
  const discount = configurations.discount;
  return <SalesCalculatorDisplay discount={discount} />
};

Optionally Type Safe useObservable<T>()

useObservbable() now can optionally return a generic. This provides type safety when developing with useObservable() and it allows the library user to infer the type returned from a function that returns a useObservable() value.

const value$ = getSomeObservable();
const value = useObservable<string>($value, `some-request-id`, 'start with me');
// value is typed to string

closes #176