feat(onboarding): sdk snippets in files (#8233)

Makes it easier to edit code snippets. Additionally, adds lazy loading
to reduce bundle size.

frontend/src/component/onboarding/ConnectSdkDialog.tsx

@@ -7,13 +7,15 @@ import {
     useTheme,
 } from '@mui/material';
 import { GenerateApiKey } from './GenerateApiKey';
-import { useEffect, useState } from 'react';
+import { lazy, Suspense, useEffect, useState } from 'react';
 import { SelectSdk } from './SelectSdk';
 import { GenerateApiKeyConcepts, SelectSdkConcepts } from './UnleashConcepts';
-import { TestSdkConnection } from './TestSdkConnection';
+
+const TestSdkConnection = lazy(() => import('./TestSdkConnection'));
 
 import type { Sdk } from './sharedTypes';
 import { ConnectionInformation } from './ConnectionInformation';
+import Loader from 'component/common/Loader/Loader';
 
 interface IConnectSDKDialogProps {
     open: boolean;
@@ -111,14 +113,16 @@ export const ConnectSdkDialog = ({
                         />
                     ) : null}
                     {isTestConnectionStage ? (
-                        <TestSdkConnection
+                        <Suspense fallback={<Loader />}>
-                            sdk={sdk}
+                            <TestSdkConnection
-                            apiKey={apiKey}
+                                sdk={sdk}
-                            feature={feature}
+                                apiKey={apiKey}
-                            onSdkChange={() => {
+                                feature={feature}
-                                setStage('select-sdk');
+                                onSdkChange={() => {
-                            }}
+                                    setStage('select-sdk');
-                        />
+                                }}
+                            />
+                        </Suspense>
                     ) : null}
 
                     {stage === 'generate-api-key' ? (

frontend/src/component/onboarding/TestSdkConnection.tsx

@@ -10,18 +10,33 @@ import {
 } from '@mui/material';
 import { SectionHeader, StepperBox } from './SharedComponents';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
-import { allSdks, type Sdk } from './sharedTypes';
+import { allSdks, type SdkName, type Sdk } from './sharedTypes';
-import {
-    checkFlagCodeSnippets,
-    initializeCodeSnippets,
-    installCommands,
-} from './sdkSnippets';
 import copy from 'copy-to-clipboard';
 import useToast from 'hooks/useToast';
 import CopyIcon from '@mui/icons-material/FileCopy';
 import { formatAssetPath } from '../../utils/formatPath';
 import { Stepper } from './Stepper';
 import { Badge } from '../common/Badge/Badge';
+import { Markdown } from 'component/common/Markdown/Markdown';
+import type { CodeComponent } from 'react-markdown/lib/ast-to-react';
+
+const snippets: Record<SdkName, string> = {
+    Android: (await import(`./snippets/android.md?raw`)).default,
+    Go: (await import(`./snippets/go.md?raw`)).default,
+    JavaScript: (await import(`./snippets/javascript.md?raw`)).default,
+    'Node.js': (await import(`./snippets/nodejs.md?raw`)).default,
+    Python: (await import(`./snippets/python.md?raw`)).default,
+    Ruby: (await import(`./snippets/ruby.md?raw`)).default,
+    Svelte: (await import(`./snippets/svelte.md?raw`)).default,
+    Vue: (await import(`./snippets/vue.md?raw`)).default,
+    Flutter: (await import(`./snippets/flutter.md?raw`)).default,
+    Java: (await import(`./snippets/java.md?raw`)).default,
+    '.NET': (await import(`./snippets/dotnet.md?raw`)).default,
+    PHP: (await import(`./snippets/php.md?raw`)).default,
+    React: (await import(`./snippets/react.md?raw`)).default,
+    Rust: (await import(`./snippets/rust.md?raw`)).default,
+    Swift: (await import(`./snippets/swift.md?raw`)).default,
+};
 
 const SpacedContainer = styled('div')(({ theme }) => ({
     padding: theme.spacing(5, 8, 2, 8),
@@ -79,12 +94,21 @@ const ChangeSdk = styled('div')(({ theme }) => ({
     marginBottom: theme.spacing(3),
 }));
 
+const CodeRenderer: CodeComponent = ({ inline = false, children }) => {
+    if (!inline && typeof children?.[0] === 'string') {
+        return <CopyBlock code={children[0]} title='Copy code' />;
+    }
+
+    return <code>{children}</code>;
+};
+
 interface ITestSdkConnectionProps {
     sdk: Sdk;
     apiKey: string;
     feature: string;
     onSdkChange: () => void;
 }
+
 export const TestSdkConnection: FC<ITestSdkConnectionProps> = ({
     sdk,
     apiKey,
@@ -93,26 +117,15 @@ export const TestSdkConnection: FC<ITestSdkConnectionProps> = ({
 }) => {
     const { uiConfig } = useUiConfig();
 
+    const sdkIcon = allSdks.find((item) => item.name === sdk.name)?.icon;
     const clientApiUrl = `${uiConfig.unleashUrl}/api/`;
     const frontendApiUrl = `${uiConfig.unleashUrl}/api/frontend/`;
     const apiUrl = sdk.type === 'client' ? clientApiUrl : frontendApiUrl;
-    const initializeCodeSnippet =
+
-        initializeCodeSnippets[sdk.name] ||
+    const snippet = (snippets[sdk.name] || '')
-        `No snippet found for the ${sdk.name} SDK`;
-    const installCommand =
-        installCommands[sdk.name] ||
-        `No install command found for the ${sdk.name} SDK`;
-    const filledInitializeCodeSnippet = initializeCodeSnippet
         .replace('<YOUR_API_TOKEN>', apiKey)
-        .replace('<YOUR_API_URL>', apiUrl);
+        .replace('<YOUR_API_URL>', apiUrl)
-    const checkFlagCodeSnippet =
+        .replaceAll('<YOUR_FLAG>', feature);
-        checkFlagCodeSnippets[sdk.name] ||
-        `No snippet found for the ${sdk.name} SDK`;
-    const filledCheckFlagCodeSnippet = checkFlagCodeSnippet.replace(
-        '<YOUR_FLAG>',
-        feature,
-    );
-    const sdkIcon = allSdks.find((item) => item.name === sdk.name)?.icon;
 
     return (
         <SpacedContainer>
@@ -135,19 +148,13 @@ export const TestSdkConnection: FC<ITestSdkConnectionProps> = ({
                     </Link>
                 </ChangeSdk>
                 <SectionHeader>Setup the SDK</SectionHeader>
-                <p>1. Install the SDK</p>
+                <Markdown components={{ code: CodeRenderer }}>
-                <CopyBlock title='Copy command' code={installCommand} />
+                    {snippet}
-                <p>2. Initialize the SDK</p>
+                </Markdown>
-                <CopyBlock
-                    title='Copy snippet'
-                    code={filledInitializeCodeSnippet}
-                />
-                <p>3. Check feature flag status</p>
-                <CopyBlock
-                    title='Copy snippet'
-                    code={filledCheckFlagCodeSnippet}
-                />
             </Box>
         </SpacedContainer>
     );
 };
+
+// Use a default export for lazy-loading
+export default TestSdkConnection;

frontend/src/component/onboarding/sdkSnippets.ts

@@ -1,247 +0,0 @@
-import type { SdkName } from './sharedTypes';
-
-export const installCommands: Record<SdkName, string> = {
-    'Node.js': ' npm install unleash-client',
-    Go: 'go get github.com/Unleash/unleash-client-go/v3',
-    Ruby: 'gem install unleash',
-    PHP: 'composer require unleash/client',
-    Rust: 'cargo add unleash-client',
-    '.NET': `dotnet add package unleash.client
-// If you do not have a json library in your project:
-dotnet add package Newtonsoft.Json`,
-    Java: `<dependency>
-    <groupId>io.getunleash</groupId>
-    <artifactId>unleash-client-java</artifactId>
-    <version>LATEST</version>
-</dependency>`,
-    Python: 'pip install UnleashClient',
-    JavaScript: 'npm install unleash-proxy-client',
-    React: 'npm install @unleash/proxy-client-react unleash-proxy-client',
-    Vue: 'npm install @unleash/proxy-client-vue',
-    Svelte: 'npm install @unleash/proxy-client-svelte',
-    Swift: 'https://github.com/Unleash/unleash-proxy-client-swift.git',
-    Android: `implementation("io.getunleash:unleash-android:\${unleash.sdk.version}")
-
-// enabled required permissions
-<uses-permission android:name="android.permission.INTERNET" />
-<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />`,
-    Flutter: 'flutter pub add unleash_proxy_client_flutter',
-};
-
-export const initializeCodeSnippets: Record<SdkName, string> = {
-    'Node.js': `const { initialize } = require('unleash-client');
-
-const unleash = initialize({
-  url: '<YOUR_API_URL>',
-  appName: 'unleash-onboarding-node',
-  customHeaders: { Authorization: '<YOUR_API_TOKEN>' },
-  metricsInterval: 5000,
-});
-`,
-    Go: `import (
-    "github.com/Unleash/unleash-client-go/v3"
-    "net/http"
-    "time"
-)
-
-func init() {
-    unleash.Initialize(
-        unleash.WithListener(&unleash.DebugListener{}),
-        unleash.WithAppName("unleash-onboarding-golang"),
-        unleash.WithUrl("<YOUR_API_URL>"),
-        unleash.WithCustomHeaders(http.Header{"Authorization": {"<YOUR_API_TOKEN>"}}),
-        unleash.WithMetricsInterval(5*time.Second),
-    )
-}`,
-    Ruby: `Unleash.configure do |config|
-  config.app_name            = 'unleash-onboarding-ruby'
-  config.url                 = '<YOUR_API_URL>'
-  config.custom_http_headers = {'Authorization': '<YOUR_API_TOKEN>'}
-end`,
-    PHP: `<?php
-
-use Unleash\\Client\\UnleashBuilder;
-
-require 'vendor/autoload.php';
-
-$unleash = UnleashBuilder::create()
-    ->withAppName('unleash-onboarding-php')
-    ->withAppUrl('<YOUR_API_URL>')
-    ->withHeader('Authorization', '<YOUR_API_TOKEN>')
-    ->withInstanceId('unleash-onboarding-instance')
-    ->withMetricsInterval(5000)
-    ->build();`,
-    Rust: `let client = client::ClientBuilder::default()
-    .interval(500)
-    .into_client::<UserFeatures, reqwest::Client>(
-        "<YOUR_API_URL>",
-        "unleash-onboarding-rust",
-        "unleash-onboarding-instance",
-        "<YOUR_API_TOKEN>",
-    )?;
-client.register().await?;`,
-    '.NET': `using Unleash;
-var settings = new UnleashSettings()
-{
-    AppName = "unleash-onboarding-dotnet",
-    UnleashApi = new Uri("<YOUR_API_URL>"),
-    CustomHttpHeaders = new Dictionary<string, string>()
-    {
-      {"Authorization","<YOUR_API_TOKEN>" }
-    }
-};`,
-    Java: `UnleashConfig config = UnleashConfig.builder()
-        .appName("unleash-onboarding-java")
-        .instanceId("unleash-onboarding-instance")
-        .unleashAPI("<YOUR_API_URL>")
-        .apiKey("<YOUR_API_TOKEN>")
-        .sendMetricsInterval(5)
-        .build();
-
-Unleash unleash = new DefaultUnleash(config);`,
-    Python: `from UnleashClient import UnleashClient
-import asyncio
-
-client = UnleashClient(
-    url="<YOUR_API_URL>",
-    app_name="unleash-onboarding-python",
-    refresh_interval=5,
-    custom_headers={'Authorization': '<YOUR_API_TOKEN>'})
-
-client.initialize_client()`,
-    JavaScript: `const { UnleashClient } = require('unleash-proxy-client');
-
-const unleash = new UnleashClient({
-    url: '<YOUR_API_URL>',
-    clientKey: '<YOUR_API_TOKEN>',
-    appName: 'unleash-onboarding-javascript',
-    refreshInterval: 5000,
-});
-
-// Start the background polling
-unleash.start();`,
-    React: `import { createRoot } from 'react-dom/client';
-import { FlagProvider } from '@unleash/proxy-client-react';
-
-const config = {
-  url: '<YOUR_API_URL>',
-  clientKey: '<YOUR_API_TOKEN>',
-  refreshInterval: 15,
-  appName: 'unleash-onboarding-react',
-};
-
-const root = createRoot(document.getElementById('root'));
-
-root.render(
-  <React.StrictMode>
-    <FlagProvider config={config}>
-      <App />
-    </FlagProvider>
-  </React.StrictMode>
-);`,
-    Vue: `import { createApp } from 'vue'
-import { plugin as unleashPlugin } from '@unleash/proxy-client-vue'
-// import the root component App from a single-file component.
-import App from './App.vue'
-
-const config = {
-  url: '<YOUR_API_URL>'',
-  clientKey: '<YOUR_API_TOKEN>',
-  refreshInterval: 15,
-  appName: 'unleash-onboarding-vue',
-}
-
-const app = createApp(App)
-app.use(unleashPlugin, { config })
-app.mount('#app')`,
-    Svelte: `<script lang="ts">
-    import { FlagProvider } from '@unleash/proxy-client-svelte';
-
-    const config = {
-        url: '<YOUR_API_URL>',
-        clientKey: '<YOUR_API_TOKEN>',
-        refreshInterval: 15,
-        appName: 'unleash-onboarding-svelte'
-    };
-</script>
-
-<FlagProvider {config}>
-    <App />
-</FlagProvider>`,
-    Swift: `import Foundation
-import UnleashProxyClientSwift
-
-var unleash = UnleashProxyClientSwift.UnleashClient(
-   unleashUrl: "<YOUR_API_URL>",
-   clientKey: "<YOUR_API_TOKEN>",
-   refreshInterval: 15,
-   appName: "unleash-onboarding-swift",
-   context: [:])
-
-unleash.start()`,
-    Android: `val unleash = DefaultUnleash(
-    androidContext = applicationContext, // likely a reference to your Android application context
-    unleashConfig =  UnleashConfig.newBuilder(appName = "unleash-onboarding-android")
-        .proxyUrl("<YOUR_API_URL>")
-        .clientKey("<YOUR_API_TOKEN>")
-        .pollingStrategy.interval(3000)
-        .metricsStrategy.interval(3000)
-        .build()
-)`,
-    Flutter: `import 'package:unleash_proxy_client_flutter/unleash_proxy_client_flutter.dart';
-import 'dart:async';
-
-final unleash = UnleashClient(
-    url: Uri.parse('<YOUR_API_URL>'),
-    clientKey: '<YOUR_API_TOKEN>',
-    appName: 'unleash-onboarding-flutter');
-
-unleash.start();`,
-};
-
-// TODO: add idiomatic way of checking flag status that will populate metrics
-export const checkFlagCodeSnippets: Record<SdkName, string> = {
-    'Node.js': `setInterval(() => {
-  console.log('Is enabled', unleash.isEnabled('<YOUR_FLAG>'));
-}, 1000);
-`,
-    Go: `func main() {
-    for {
-        unleash.IsEnabled("<YOUR_FLAG>")
-        time.Sleep(time.Second)
-    }
-}, 1000);
-`,
-    Ruby: ``,
-    PHP: `while (true) {
-    echo 'Feature flag is:  ' . $unleash->isEnabled('<YOUR_FLAG>') . PHP_EOL;
-    sleep(1);
-}
-`,
-    Rust: ``,
-    '.NET': ``,
-    Java: `while (true) {
-    boolean featureEnabled = unleash.isEnabled("<YOUR_FLAG>");
-    System.out.println("Feature enabled: " + featureEnabled);
-    Thread.sleep(1000);
-}`,
-    Python: `while True:
-    print(client.is_enabled("<YOUR_FLAG>"))
-    asyncio.run(asyncio.sleep(1))`,
-    JavaScript: `setInterval(() => {
-    console.log('Is enabled', unleash.isEnabled('<YOUR_FLAG>'));
-}, 1000);`,
-    React: ``,
-    Vue: ``,
-    Svelte: ``,
-    Swift: `Timer.scheduledTimer(withTimeInterval: 1.0, repeats: true) { _ in
-    print("Is enabled", unleashClient.isEnabled(name: "<YOUR_FLAG>"))
-}
-
-RunLoop.main.run()`,
-    Android: ``,
-    Flutter: `Timer.periodic(Duration(seconds: 1), (Timer timer) {
-   final flagStatus = unleash.isEnabled('counter');
-   print('Flag is \${unleash.isEnabled("<YOUR_FLAG>") ? "enabled" : "disabled"}');
-});`,
-};

frontend/src/component/onboarding/snippets/android.md

@@ -0,0 +1,21 @@
+1\. Install the SDK
+```gradle
+implementation("io.getunleash:unleash-android:\${unleash.sdk.version}")
+
+// Enable required permissions
+<uses-permission android:name="android.permission.INTERNET" />
+<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
+```
+
+2\. Initialize Unleash
+```kotlin
+val unleash = DefaultUnleash(
+    androidContext = applicationContext, // Reference to your Android application context
+    unleashConfig = UnleashConfig.newBuilder(appName = "unleash-onboarding-android")
+        .proxyUrl("<YOUR_API_URL>")
+        .clientKey("<YOUR_API_TOKEN>")
+        .pollingStrategy.interval(3000)
+        .metricsStrategy.interval(3000)
+        .build()
+)
+```

frontend/src/component/onboarding/snippets/dotnet.md

@@ -0,0 +1,20 @@
+1\. Install the SDK
+```sh
+dotnet add package unleash.client
+// If you do not have a json library in your project:
+dotnet add package Newtonsoft.Json
+```
+
+2\. Initialize Unleash
+```csharp
+using Unleash;
+var settings = new UnleashSettings()
+{
+    AppName = "unleash-onboarding-dotnet",
+    UnleashApi = new Uri("<YOUR_API_URL>"),
+    CustomHttpHeaders = new Dictionary<string, string>()
+    {
+      {"Authorization","<YOUR_API_TOKEN>" }
+    }
+};
+```

frontend/src/component/onboarding/snippets/flutter.md

@@ -0,0 +1,25 @@
+1\. Install the SDK
+```sh
+flutter pub add unleash_proxy_client_flutter
+```
+
+2\. Initialize Unleash
+```dart
+import 'package:unleash_proxy_client_flutter/unleash_proxy_client_flutter.dart';
+import 'dart:async';
+
+final unleash = UnleashClient(
+    url: Uri.parse('<YOUR_API_URL>'),
+    clientKey: '<YOUR_API_TOKEN>',
+    appName: 'unleash-onboarding-flutter');
+
+unleash.start();
+```
+
+3\. Check feature flag status
+```dart
+Timer.periodic(Duration(seconds: 1), (Timer timer) {
+   final flagStatus = unleash.isEnabled('<YOUR_FLAG>');
+   print('Flag is ${unleash.isEnabled("<YOUR_FLAG>") ? "enabled" : "disabled"}');
+});
+```

frontend/src/component/onboarding/snippets/go.md

@@ -0,0 +1,33 @@
+1\. Install the SDK
+```sh
+go get github.com/Unleash/unleash-client-go/v3
+```
+
+2\. Initialize Unleash
+```go
+import (
+    "github.com/Unleash/unleash-client-go/v3"
+    "net/http"
+    "time"
+)
+
+func init() {
+    unleash.Initialize(
+        unleash.WithListener(&unleash.DebugListener{}),
+        unleash.WithAppName("unleash-onboarding-golang"),
+        unleash.WithUrl("<YOUR_API_URL>"),
+        unleash.WithCustomHeaders(http.Header{"Authorization": {"<YOUR_API_TOKEN>"}}),
+        unleash.WithMetricsInterval(5*time.Second),
+    )
+}
+```
+
+3\. Check feature flag status
+```go
+func main() {
+    for {
+        unleash.IsEnabled("<YOUR_FLAG>")
+        time.Sleep(time.Second)
+    }
+}
+```

frontend/src/component/onboarding/snippets/java.md

@@ -0,0 +1,30 @@
+1\. Install the SDK
+```xml
+<dependency>
+    <groupId>io.getunleash</groupId>
+    <artifactId>unleash-client-java</artifactId>
+    <version>LATEST</version>
+</dependency>
+```
+
+2\. Initialize Unleash
+```java
+UnleashConfig config = UnleashConfig.builder()
+    .appName("unleash-onboarding-java")
+    .instanceId("unleash-onboarding-instance")
+    .unleashAPI("<YOUR_API_URL>")
+    .apiKey("<YOUR_API_TOKEN>")
+    .sendMetricsInterval(5)
+    .build();
+
+Unleash unleash = new DefaultUnleash(config);
+```
+
+3\. Check feature flag status
+```java
+while (true) {
+    boolean featureEnabled = unleash.isEnabled("<YOUR_FLAG>");
+    System.out.println("Feature enabled: " + featureEnabled);
+    Thread.sleep(1000);
+}
+```

frontend/src/component/onboarding/snippets/javascript.md

@@ -0,0 +1,25 @@
+1\. Install the SDK
+```sh
+npm install unleash-proxy-client
+```
+
+2\. Initialize Unleash
+```js
+const { UnleashClient } = require('unleash-proxy-client');
+
+const unleash = new UnleashClient({
+    url: '<YOUR_API_URL>',
+    clientKey: '<YOUR_API_TOKEN>',
+    appName: 'unleash-onboarding-javascript',
+    refreshInterval: 5000,
+});
+
+unleash.start();
+```
+
+3\. Check feature flag status
+```js
+setInterval(() => {
+    console.log('Is enabled', unleash.isEnabled('<YOUR_FLAG>'));
+}, 1000);
+```

frontend/src/component/onboarding/snippets/nodejs.md

@@ -0,0 +1,23 @@
+1\. Install the SDK
+```sh
+npm install unleash-client
+```
+
+2\. Initialize Unleash
+```js
+const { initialize } = require('unleash-client');
+
+const unleash = initialize({
+  url: '<YOUR_API_URL>',
+  appName: 'unleash-onboarding-node',
+  customHeaders: { Authorization: '<YOUR_API_TOKEN>' },
+  metricsInterval: 5000,
+});
+```
+
+3\. Check feature flag status
+```js
+setInterval(() => {
+  console.log('Is enabled', unleash.isEnabled('<YOUR_FLAG>'));
+}, 1000);
+```

frontend/src/component/onboarding/snippets/php.md

@@ -0,0 +1,29 @@
+1\. Install the SDK
+```sh
+composer require unleash/client
+```
+
+2\. Initialize Unleash
+```php
+<?php
+
+use Unleash\\Client\\UnleashBuilder;
+
+require 'vendor/autoload.php';
+
+$unleash = UnleashBuilder::create()
+    ->withAppName('unleash-onboarding-php')
+    ->withAppUrl('<YOUR_API_URL>')
+    ->withHeader('Authorization', '<YOUR_API_TOKEN>')
+    ->withInstanceId('unleash-onboarding-instance')
+    ->withMetricsInterval(5000)
+    ->build();
+```
+
+3\. Check feature flag status
+```php
+while (true) {
+    echo 'Feature flag is:  ' . $unleash->isEnabled('<YOUR_FLAG>') . PHP_EOL;
+    sleep(1);
+}
+```

frontend/src/component/onboarding/snippets/python.md

@@ -0,0 +1,25 @@
+1\. Install the SDK
+```sh
+pip install UnleashClient
+```
+
+2\. Initialize Unleash
+```python
+from UnleashClient import UnleashClient
+import asyncio
+
+client = UnleashClient(
+    url="<YOUR_API_URL>",
+    app_name="unleash-onboarding-python",
+    refresh_interval=5,
+    custom_headers={'Authorization': '<YOUR_API_TOKEN>'})
+
+client.initialize_client()
+```
+
+3\. Check feature flag status
+```python
+while True:
+    print(client.is_enabled("<YOUR_FLAG>"))
+    asyncio.run(asyncio.sleep(1))
+```

frontend/src/component/onboarding/snippets/react.md

@@ -0,0 +1,38 @@
+1\. Install the SDK
+```sh
+npm install @unleash/proxy-client-react unleash-proxy-client
+```
+
+2\. Initialize Unleash
+```jsx
+import { createRoot } from 'react-dom/client';
+import { FlagProvider } from '@unleash/proxy-client-react';
+
+const config = {
+  url: '<YOUR_API_URL>',
+  clientKey: '<YOUR_API_TOKEN>',
+  refreshInterval: 5, // In production use interval of >15s
+  appName: 'unleash-onboarding-react',
+};
+
+const root = createRoot(document.getElementById('root'));
+
+root.render(
+  <React.StrictMode>
+    <FlagProvider config={config}>
+      <App />
+    </FlagProvider>
+  </React.StrictMode>
+);
+```
+
+3\. Check feature flag status
+```jsx
+import { useFlag } from '@unleash/proxy-client-react';
+
+const TestComponent = () => {
+  const enabled = useFlag('<YOUR_FLAG>');
+
+  return enabled ? 'Flag is enabled' : 'Flag is disabled'
+};
+```

frontend/src/component/onboarding/snippets/ruby.md

@@ -0,0 +1,31 @@
+1\. Install the SDK
+```sh
+gem install unleash
+```
+
+2\. Initialize Unleash
+```rb
+require 'unleash'
+
+@unleash = Unleash::Client.new(
+  url: "<YOUR_API_URL>",
+  custom_http_headers: { 'Authorization': "<YOUR_API_TOKEN>" },
+  app_name: 'unleash-onboarding-ruby',
+  instance_id: 'unleash-onboarding-ruby',
+  refresh_interval: 3, # In production use interval of >15s
+  metrics_interval: 3, # In production use interval of >15s
+)
+```
+
+3\. Check feature flag status
+```rb
+while true
+  if @unleash.is_enabled?("<YOUR_FLAG>")
+    puts "Flag is enabled"
+  else
+    puts "Flag is not enabled"
+  end
+  sleep 3
+end
+
+```

frontend/src/component/onboarding/snippets/rust.md

@@ -0,0 +1,17 @@
+1\. Install the SDK
+```sh
+cargo add unleash-client
+```
+
+2\. Initialize Unleash
+```rust
+let client = client::ClientBuilder::default()
+    .interval(500)
+    .into_client::<UserFeatures, reqwest::Client>(
+        "<YOUR_API_URL>",
+        "unleash-onboarding-rust",
+        "unleash-onboarding-instance",
+        "<YOUR_API_TOKEN>",
+    )?;
+client.register().await?;
+```

frontend/src/component/onboarding/snippets/svelte.md

@@ -0,0 +1,22 @@
+1\. Install the SDK
+```sh
+npm install @unleash/proxy-client-svelte
+```
+
+2\. Initialize Unleash
+```svelte
+<script lang="ts">
+    import { FlagProvider } from '@unleash/proxy-client-svelte';
+
+    const config = {
+        url: '<YOUR_API_URL>',
+        clientKey: '<YOUR_API_TOKEN>',
+        refreshInterval: 15,
+        appName: 'unleash-onboarding-svelte'
+    };
+</script>
+
+<FlagProvider {config}>
+    <App />
+</FlagProvider>
+```

frontend/src/component/onboarding/snippets/swift.md

@@ -0,0 +1,27 @@
+1\. Install the SDK
+```sh
+// Instructions to add the Swift SDK can be found at the provided URL:
+https://github.com/Unleash/unleash-proxy-client-swift.git
+```
+
+2\. Initialize Unleash
+```swift
+import Foundation
+import UnleashProxyClientSwift
+
+var unleash = UnleashProxyClientSwift.UnleashClient(
+   unleashUrl: "<YOUR_API_URL>",
+   clientKey: "<YOUR_API_TOKEN>",
+   refreshInterval: 15,
+   appName: "unleash-onboarding-swift",
+   context: [:])
+
+unleash.start()
+```
+
+3\. Check feature flag status
+```swift
+Timer.scheduledTimer(withTimeInterval: 1.0, repeats: true) { _ in
+    print("Is enabled", unleash.isEnabled(name: "<YOUR_FLAG>"))
+}
+```

frontend/src/component/onboarding/snippets/vue.md

@@ -0,0 +1,23 @@
+1\. Install the SDK
+```sh
+npm install @unleash/proxy-client-vue
+```
+
+2\. Initialize Unleash
+```js
+import { createApp } from 'vue'
+import { plugin as unleashPlugin } from '@unleash/proxy-client-vue'
+// import the root component App from a single-file component.
+import App from './App.vue'
+
+const config = {
+  url: '<YOUR_API_URL>',
+  clientKey: '<YOUR_API_TOKEN>',
+  refreshInterval: 15,
+  appName: 'unleash-onboarding-vue',
+}
+
+const app = createApp(App)
+app.use(unleashPlugin, { config })
+app.mount('#app')
+```