---
title: Framework examples | Featurebase
description: Drop-in examples for React, Vue, Svelte, Angular, and plain HTML.
---

`featurebase-js` is a framework-agnostic core. Every example below uses the same package — there is no `featurebase-js/vue` or `/svelte`. Just import the core and call methods inside your framework’s lifecycle hook.

## React

There’s a dedicated [`featurebase-js/react`](/guides/featurebase-js/react/index.md) helper with `<FeaturebaseProvider>` and `useFeaturebase()`. If you’d rather drop the Provider, you can call the core directly from a `useEffect`:

```
import { useEffect } from 'react';
import Featurebase, { shutdown } from 'featurebase-js';


export function Bootstrap({ user }: { user: { id: string; email: string } }) {
  useEffect(() => {
    Featurebase({
      appId: 'org_abc',
      userId: user.id,
      email: user.email,
    });
    return () => shutdown();
  }, [user.id, user.email]);


  return null;
}
```

## Next.js (App Router)

Mark the component as `'use client'` and boot inside an effect. The SSR no-op safety means you can also import the package in a server file without errors — calls just become no-ops.

```
'use client';


import { useEffect } from 'react';
import Featurebase from 'featurebase-js';


export function FeaturebaseBoot({ user }: { user: { id: string; email: string } }) {
  useEffect(() => {
    Featurebase({ appId: 'org_abc', userId: user.id, email: user.email });
  }, [user.id, user.email]);
  return null;
}
```

## Vue 3

```
<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue';
import Featurebase, { shutdown } from 'featurebase-js';


const props = defineProps<{ userId: string; email: string }>();


onMounted(() => {
  Featurebase({
    appId: 'org_abc',
    userId: props.userId,
    email: props.email,
  });
});


onUnmounted(() => {
  shutdown();
});
</script>
```

## Svelte

```
<script lang="ts">
  import { onMount, onDestroy } from 'svelte';
  import Featurebase, { shutdown } from 'featurebase-js';


  export let userId: string;
  export let email: string;


  onMount(() => {
    Featurebase({ appId: 'org_abc', userId, email });
  });


  onDestroy(() => shutdown());
</script>
```

## Angular

```
import { Injectable, OnDestroy } from '@angular/core';
import Featurebase, { shutdown, update } from 'featurebase-js';


@Injectable({ providedIn: 'root' })
export class FeaturebaseService implements OnDestroy {
  boot(user: { id: string; email: string }): void {
    Featurebase({
      appId: 'org_abc',
      userId: user.id,
      email: user.email,
    });
  }


  identify(user: { id: string; email: string }): void {
    update({ userId: user.id, email: user.email });
  }


  ngOnDestroy(): void {
    shutdown();
  }
}
```

## Plain HTML / no bundler

Load the package from any ESM CDN.

```
<script type="module">
  import Featurebase from 'https://esm.sh/featurebase-js@latest';


  Featurebase({
    appId: 'org_abc',
    userId: 'user_42',
    email: 'jane@example.com',
  });
</script>
```

For the older `<script>` tag pattern (no ESM), the runtime itself ships a global. You can either:

```
<script>
  // Manual queue snippet — equivalent to what `featurebase-js` injects.
  window.Featurebase = window.Featurebase || function () {
    (window.Featurebase.q = window.Featurebase.q || []).push(arguments);
  };
  window.Featurebase('boot', { appId: 'org_abc' });
</script>
<script src="https://do.featurebase.app/js/sdk.js" defer></script>
```

…but using `featurebase-js` from a CDN is the simpler path on modern browsers.