@codetiles/fturex

Feature toggle client for React, Vue, Angular, and Svelte applications.

Fetches your full feature manifest in the background and evaluates flags locally — no per-call network round-trips. Supports context-based targeting (user, role, tenant, etc.), automatic background refresh, localStorage persistence, and usage statistics.

Installation

npm install @codetiles/fturex

Quick start

import { FtureXClient } from "@codetiles/fturex";

const client = new FtureXClient(
  { baseUrl: "url-to-fturex-platform", appKey: "your-app-key" },
  { refreshIntervalSeconds: 30 },
);

await client.initialize();

if (await client.isEnabled("my-feature")) {
  // feature is on
}

// With context
if (
  await client.isEnabledWithContext("beta-feature", {
    role: "admin",
    userId: "user-123",
  })
) {
  // feature is on for this user
}

client.dispose();

React

import {
  FeatureToggleProvider,
  useFeatureToggle,
  FeatureToggle,
} from "@codetiles/fturex/react";

// Wrap your app
export function App() {
  return (
    <FeatureToggleProvider config={{ baseUrl: "...", appKey: "..." }}>
      <MyApp />
    </FeatureToggleProvider>
  );
}

// Hook
function MyComponent() {
  const { isEnabled, loading } = useFeatureToggle("my-feature");
  if (loading) return <Spinner />;
  return isEnabled ? <NewUI /> : <OldUI />;
}

// Component
function MyOtherComponent() {
  return (
    <FeatureToggle featureName="my-feature">
      <NewUI />
    </FeatureToggle>
  );
}

Vue

// main.ts
import { createApp } from "vue";
import { FtureXClient } from "@codetiles/fturex";
import { FeatureToggleClientKey } from "@codetiles/fturex/vue";

const client = new FtureXClient({ baseUrl: "...", appKey: "..." });
await client.initialize();

const app = createApp(App);
app.provide(FeatureToggleClientKey, client);
app.mount("#app");

<!-- MyComponent.vue -->
<script setup lang="ts">
import { useFeatureToggle } from "@codetiles/fturex/vue";

const { isEnabled, loading } = useFeatureToggle("my-feature");
</script>

<template>
  <NewUI v-if="!loading && isEnabled" />
  <OldUI v-else-if="!loading" />
</template>

SFC component (requires Vue SFC compiler):

import FeatureToggle from "@codetiles/fturex/vue/FeatureToggle.vue";

Angular

// app.module.ts
import { FtureXModule } from "@codetiles/fturex/angular";

@NgModule({
  imports: [FtureXModule.forRoot({ baseUrl: "...", appKey: "..." })],
})
export class AppModule {}

// my.component.ts
import { FtureXService } from '@codetiles/fturex/angular';

@Component({ ... })
export class MyComponent {
  isEnabled = false;

  constructor(private fturex: FtureXService) {}

  async ngOnInit() {
    this.isEnabled = await this.fturex.isEnabled('my-feature');
  }
}

<!-- Template directive -->
<div *featureToggle="'my-feature'">Only shown when feature is enabled</div>

<!-- Pipe -->
<div *ngIf="'my-feature' | featureToggle | async">...</div>

Svelte

// fturex.ts
import { FtureXClient } from "@codetiles/fturex";

export const client = new FtureXClient({ baseUrl: "...", appKey: "..." });
await client.initialize();

<!-- MyComponent.svelte -->
<script>
  import { useFeatureToggle } from '@codetiles/fturex/svelte';
  import { client } from './fturex';

  const feature = useFeatureToggle(client, 'my-feature');
</script>

{#if $feature.loading}
  <Spinner />
{:else if $feature.isEnabled}
  <NewUI />
{:else}
  <OldUI />
{/if}

OpenTelemetry

import { FtureXClient } from "@codetiles/fturex";
import { FtureXOtelHook } from "@codetiles/fturex/opentelemetry";

const client = new FtureXClient({ baseUrl: "...", appKey: "..." });
client.addHook(new FtureXOtelHook());
await client.initialize();

Configuration

FtureXConfiguration

| Property | Type | Required | Description | | ---------------- | --------- | -------- | ----------------------------------------- | | baseUrl | string | yes | API base URL | | appKey | string | yes | API authentication key | | sendStatistics | boolean | no | Report usage statistics (default: true) |

FeatureCacheOptions

| Property | Type | Default | Description | | ------------------------------- | --------- | ---------------------- | ----------------------------------- | | refreshIntervalSeconds | number | 30 | How often the manifest is refreshed | | enableLocalStoragePersistence | boolean | true | Persist manifest to localStorage | | localStorageKey | string | feature-toggle-cache | localStorage key |

Events

client.on("ready", () => console.log("Manifest loaded"));
client.on("update", () => console.log("Manifest refreshed"));

client.off("update", handler);

License

MIT — Anterprize