Remote Config

firekitRemoteConfig lets you fetch configuration values from Firebase Remote Config and use them reactively in your app. Values can be fetched once or subscribed to with real-time updates.

Basic usage

import { firekitRemoteConfig } from 'svelte-firekit';

const rc = firekitRemoteConfig({
  defaults: {
    welcomeMessage: 'Hello!',
    featureEnabled: false,
    itemsPerPage: 10,
  },
  minimumFetchIntervalMs: 3_600_000, // 1 hour (default)
});

// Fetch and activate the latest config
await rc.fetchAndActivate();

Read values

const message = rc.getString('welcomeMessage');
const enabled = rc.getBoolean('featureEnabled');
const count   = rc.getNumber('itemsPerPage');
const raw     = rc.getValue('someKey'); // returns a Value object

Defaults are returned when the key has not been fetched yet or does not exist in Remote Config.

Real-time config updates

Pass realtime: true to subscribe to live config updates as they are published in the Firebase console:

const rc = firekitRemoteConfig({
  defaults: { featureEnabled: false },
  realtime: true,
});

await rc.fetchAndActivate();

When a new config version is published, rc automatically fetches and activates it.

Options reference

Option	Type	Default	Description
defaults	Record<string, string | number | boolean>	{}	Default values used before fetch
minimumFetchIntervalMs	number	43200000 (12h)	Minimum interval between fetches
realtime	boolean	false	Subscribe to live config updates
fetchTimeoutMillis	number	60000	Fetch timeout in ms

Using in a Svelte component

<script lang="ts">
  import { firekitRemoteConfig } from 'svelte-firekit';
  import { onMount } from 'svelte';

  const rc = firekitRemoteConfig({
    defaults: {
      bannerMessage: 'Welcome!',
      showBanner: false,
    },
  });

  onMount(async () => {
    await rc.fetchAndActivate();
  });
</script>

{#if rc.getBoolean('showBanner')}
  <div class="banner">
    {rc.getString('bannerMessage')}
  </div>
{/if}

Reactive state

Property	Type	Description
loading	boolean	true while fetching config
lastFetchStatus	string	Last fetch result ('success', 'failure', 'no-fetch-yet', 'throttle')

Fetch strategies

// Fetch only (does not apply to active config)
await rc.fetch();

// Fetch and apply immediately
await rc.fetchAndActivate();

// Apply the most recently fetched config (if not yet activated)
await rc.activate();