Skip to content

chore: Migrate flagsmith to @flagsmith/flagsmith and @flagsmith/react-native #6924

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kyle-ssg merged 2 commits into from
Mar 11, 2026
+46 −54
Merged

chore: Migrate flagsmith to @flagsmith/flagsmith and @flagsmith/react-native #6924

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9b96806
Migrate flagsmith to @flagsmith/flagsmith and @flagsmith/react-native…
kyle-ssg Mar 11, 2026
e2247f6
Use internal
kyle-ssg Mar 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions docs/docs/integrating-with-flagsmith/sdks/client-side-sdks/javascript.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ Example applications for a variety of JavaScript frameworks such as React, Vue a
### NPM

```bash
npm i flagsmith --save
npm i @flagsmith/flagsmith --save
```

### NPM for React Native
Expand All @@ -29,7 +29,7 @@ AsyncStorage to be provided (e.g. @react-native-community/async-storage) in orde
:::

```bash
npm i react-native-flagsmith --save
npm i @flagsmith/react-native --save
```

## Basic Usage
Expand All @@ -41,7 +41,7 @@ settings page.
### Example: Initialising the SDK

```javascript
import flagsmith from 'flagsmith or react-native-flagsmith'; //Add this line if you're using flagsmith via npm
import flagsmith from '@flagsmith/flagsmith or @flagsmith/react-native'; //Add this line if you're using flagsmith via npm

flagsmith.init({
environmentID: '<YOUR_CLIENT_SIDE_ENVIRONMENT_KEY>',
Expand Down Expand Up @@ -82,7 +82,7 @@ You can define default flag values when initialising the SDK. This ensures that
the event that it [cannot receive a response from our API](/best-practices/defensive-coding).

```javascript
import flagsmith from 'flagsmith or react-native-flagsmith'; //Add this line if you're using flagsmith via npm
import flagsmith from '@flagsmith/flagsmith or @flagsmith/react-native'; //Add this line if you're using flagsmith via npm

try {
flagsmith.init({
Expand Down Expand Up @@ -136,7 +136,7 @@ When you initialise the client without an identity, it will fetch the flags for
`preventFetch:true`).

```javascript
import flagsmith from 'flagsmith';
import flagsmith from '@flagsmith/flagsmith';

flagsmith.init({
environmentID: '<YOUR_CLIENT_SIDE_ENVIRONMENT_KEY>',
Expand Down Expand Up @@ -170,7 +170,7 @@ flagsmith.init({
});

/*
Can be called either after you're done initialising the project or in flagsmith.init with its identity and trait properties
Can be called either after you're done initialising the project or in flagsmith.init with its identity and trait properties
to prevent flags being fetched twice.
*/
flagsmith.identify('flagsmith_sample_user'); //This will create a user in the dashboard if they don't already exist
Expand All @@ -182,7 +182,7 @@ Initialising the client with an identity property will retrieve the user's flags
You can also specify traits at this point which could determine the flags that come back based on segment overrides.

```javascript
import flagsmith from 'flagsmith';
import flagsmith from '@flagsmith/flagsmith';

flagsmith.init({
environmentID: '<YOUR_CLIENT_SIDE_ENVIRONMENT_KEY>',
Expand Down Expand Up @@ -279,7 +279,7 @@ export function createFlagsmithInstance (): IFlagsmith
Usage:

```javascript
import { createFlagsmithInstance } from 'flagsmith';
import { createFlagsmithInstance } from '@flagsmith/flagsmith';
const flagsmith = createFlagsmithInstance();
const flagsmithB = createFlagsmithInstance();

Expand Down Expand Up @@ -340,7 +340,7 @@ We can now enforce these types:

```typescript
// enforces you passing the correct key to flagsmith.getValue(flag:FlagOptions), flagsmith.getTrait(trait:TraitOptions)
import flagsmith from 'flagsmith';
import flagsmith from '@flagsmith/flagsmith';
const typedFlagsmith = flagsmith as IFlagsmith<FlagOptions, TraitOptions>;

// Similarly for the useFlagsmith hook is typed with useFlagsmith(flags:FlagOptions[],traits:TraitOptions[])
Expand Down
22 changes: 11 additions & 11 deletions docs/docs/integrating-with-flagsmith/sdks/client-side-sdks/nextjs-and-ssr.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ An example application for Next.js middleware can be found
### NPM

```bash
npm i flagsmith --save
npm i @flagsmith/flagsmith --save
```

## Basic Usage
Expand All @@ -34,7 +34,7 @@ settings page.
## Comparing SSR and client-side Flagsmith usage

The SDK is initialised and used in the same way as the [JavaScript](/integrating-with-flagsmith/sdks/client-side-sdks/javascript) and [React](/integrating-with-flagsmith/sdks/client-side-sdks/react)
SDK. The main difference is that Flagsmith should be imported from `flagsmith/isomorphic`.
SDK. The main difference is that Flagsmith should be imported from `@flagsmith/flagsmith/isomorphic`.

The main flow with Next.js and any JavaScript-based SSR can be as follows:

Expand All @@ -56,9 +56,9 @@ state. Below is an example for the **app** router as well as the **pages** route

import { ReactNode, useRef } from "react";

import { FlagsmithProvider } from "flagsmith/react";
import { IState } from "flagsmith/types";
import { createFlagsmithInstance } from "flagsmith/isomorphic";
import { FlagsmithProvider } from "@flagsmith/flagsmith/react";
import { IState } from "@flagsmith/flagsmith/types";
import { createFlagsmithInstance } from "@flagsmith/flagsmith/isomorphic";

export const FeatureFlagProvider = ({
serverState,
Expand All @@ -79,7 +79,7 @@ export const FeatureFlagProvider = ({
// src/app/layout.jsx
import { ReactNode } from "react";
import { FeatureFlagProvider } from './components/FeatureFlagProvider';
import flagsmith from "flagsmith/isomorphic";
import flagsmith from "@flagsmith/flagsmith/isomorphic";

export default async function RootLayout({
children,
Expand Down Expand Up @@ -111,8 +111,8 @@ export default async function RootLayout({

```javascript
// src/pages/_app.jsx
import { FlagsmithProvider } from 'flagsmith/react';
import { createFlagsmithInstance } from 'flagsmith/isomorphic';
import { FlagsmithProvider } from '@flagsmith/flagsmith/react';
import { createFlagsmithInstance } from '@flagsmith/flagsmith/isomorphic';
function MyApp({ Component, pageProps, flagsmithState }) {
const flagsmithRef = useRef(createFlagsmithInstance());
return (
Expand Down Expand Up @@ -140,7 +140,7 @@ export default MyApp;
```javascript
'use client'; // Only required by the app router version.

import { useFlags } from 'flagsmith/react';
import { useFlags } from '@flagsmith/flagsmith/react';

export function MyComponent() {
const flags = useFlags(['font_size'], ['example_trait']); // only causes re-render if specified flag values / traits change
Expand All @@ -157,14 +157,14 @@ From this point on, the SDK usage is the same as the [React SDK Guide](/integrat

### Example: Flagsmith with Next.js middleware

The Flagsmith JS client includes `flagsmith/next-middleware`, it can be used just like the regular library within
The Flagsmith JS client includes `@flagsmith/flagsmith/next-middleware`, it can be used just like the regular library within
Next.js middleware.

```javascript
// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
import flagsmith from 'flagsmith/next-middleware';
import flagsmith from '@flagsmith/flagsmith/next-middleware';

export async function middleware(request: NextRequest) {
const identity = request.cookies.get('user');
Expand Down
12 changes: 6 additions & 6 deletions docs/docs/integrating-with-flagsmith/sdks/client-side-sdks/react.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ Example applications for a variety of React, React Native and Next.js can be fou
### NPM

```bash
npm i flagsmith --save
npm i @flagsmith/flagsmith --save
```

### NPM for React Native
Expand All @@ -32,7 +32,7 @@ AsyncStorage to be provided (e.g. @react-native-community/async-storage) in orde
:::

```bash
npm i react-native-flagsmith --save
npm i @flagsmith/react-native --save
```

## Basic Usage
Expand All @@ -46,8 +46,8 @@ Wrapping your application with our FlagsmithProvider component provides a React
that you can use the hooks `useFlagsmith` and `useFlags`.

```javascript
import flagsmith from 'flagsmith'
import {FlagsmithProvider} from 'flagsmith/react'
import flagsmith from '@flagsmith/flagsmith'
import {FlagsmithProvider} from '@flagsmith/flagsmith/react'

export function AppRoot() {
<FlagsmithProvider options={{
Expand Down Expand Up @@ -75,7 +75,7 @@ Components that have been wrapped in a FlagsmithProvider will be able to evaluat
well as user traits via the `useFlags` hook.

```javascript
import { useFlags } from 'flagsmith/react';
import { useFlags } from '@flagsmith/flagsmith/react';

export function MyComponent() {
const flags = useFlags(['font_size'], ['example_trait']); // only causes re-render if specified flag values / traits change
Expand Down Expand Up @@ -112,7 +112,7 @@ Components that have been wrapped in a FlagsmithProvider will be able to access

```javascript
import React from 'react';
import { useFlags, useFlagsmith } from 'flagsmith/react';
import { useFlags, useFlagsmith } from '@flagsmith/flagsmith/react';

export function MyComponent() {
const flags = useFlags(['font_size'], ['example_trait']); // only causes re-render if specified flag values / traits change
Expand Down
2 changes: 1 addition & 1 deletion frontend/.claude/context/feature-flags/feature-flags.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ class MyClassComponent extends Component {
For reference, the project also supports direct `useFlags` hook, but **Utils.getFlagsmithHasFeature is preferred**:

```typescript
import { useFlags } from 'flagsmith/react'
import { useFlags } from '@flagsmith/flagsmith/react'

const MyComponent = () => {
const flags = useFlags(['feature_name'])
Expand Down
2 changes: 1 addition & 1 deletion frontend/.claude/context/ui-patterns.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ const MyPage = () => {
When specifically requested, this pattern shows tabs only when feature flag is enabled:

```typescript
import { useFlags } from 'flagsmith/react'
import { useFlags } from '@flagsmith/flagsmith/react'
import { Tabs } from 'components/base/forms/Tabs'
import Utils from 'common/utils/utils'
const MyPage = () => {
Expand Down
2 changes: 1 addition & 1 deletion frontend/common/code-help/create-user/create-user-next.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ module.exports = (
// Option 1: Identify clientside
//Home Page
import flagsmith from '${LIB_NAME}/isomorphic';
import { useFlags, useFlagsmith } from 'flagsmith/react';
import { useFlags, useFlagsmith } from '@flagsmith/flagsmith/react';

export default function HomePage() {
const flags = useFlags(['${FEATURE_NAME}','${FEATURE_NAME_ALT}']); // only causes re-render if specified flag values / traits change
Expand Down
8 changes: 4 additions & 4 deletions frontend/common/code-help/init/init-next-app-router.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,9 +38,9 @@ export default async function RootLayout({
"use client";

import { ReactNode, useRef } from "react";
import { FlagsmithProvider } from "flagsmith/react";
import { IState } from "flagsmith/types";
import { createFlagsmithInstance } from "flagsmith/isomorphic";
import { FlagsmithProvider } from "@flagsmith/flagsmith/react";
import { IState } from "@flagsmith/flagsmith/types";
import { createFlagsmithInstance } from "@flagsmith/flagsmith/isomorphic";

export const FeatureFlagProvider = ({
serverState,
Expand All @@ -61,7 +61,7 @@ export const FeatureFlagProvider = ({
// app/page.tsx
"use client";

import { useFlags } from 'flagsmith/react';
import { useFlags } from '@flagsmith/flagsmith/react';

export default function HomePage() {
const flags = useFlags(['${FEATURE_NAME}','${FEATURE_NAME_ALT}']); // only causes re-render if specified flag values / traits change
Expand Down
6 changes: 3 additions & 3 deletions frontend/common/code-help/init/init-next-pages-router.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ module.exports = (
{ FEATURE_NAME, FEATURE_NAME_ALT, LIB_NAME, NPM_CLIENT },
) => `// pages/_app.js
import ${LIB_NAME} from "${NPM_CLIENT}/isomorphic";
import { FlagsmithProvider } from 'flagsmith/react';
import { FlagsmithProvider } from '@flagsmith/flagsmith/react';

export default function App({ Component, pageProps, flagsmithState } {
return (
Expand Down Expand Up @@ -35,8 +35,8 @@ App.getInitialProps = async () => {
}

// pages/index.js
import flagsmith from 'flagsmith/isomorphic';
import { useFlags, useFlagsmith } from 'flagsmith/react';
import flagsmith from '@flagsmith/flagsmith/isomorphic';
import { useFlags, useFlagsmith } from '@flagsmith/flagsmith/react';

export default function HomePage() {
const flags = useFlags(['${FEATURE_NAME}','${FEATURE_NAME_ALT}']); // only causes re-render if specified flag values / traits change
Expand Down
2 changes: 1 addition & 1 deletion frontend/common/code-help/init/init-react.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ module.exports = (
{ FEATURE_NAME, FEATURE_NAME_ALT, LIB_NAME, NPM_CLIENT },
) => `// App root
import ${LIB_NAME} from "${NPM_CLIENT}";
import { FlagsmithProvider } from 'flagsmith/react';
import { FlagsmithProvider } from '@flagsmith/flagsmith/react';

export default function App() {
return (
Expand Down
2 changes: 1 addition & 1 deletion frontend/common/code-help/traits/traits-next.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ module.exports = (
// Option 1: Identify clientside
//Home Page
import flagsmith from '${LIB_NAME}/isomorphic';
import { useFlags, useFlagsmith } from 'flagsmith/react';
import { useFlags, useFlagsmith } from '@flagsmith/flagsmith/react';

export default function HomePage() {
const flags = useFlags(['${FEATURE_NAME}','${FEATURE_NAME_ALT}']); // only causes re-render if specified flag values / traits change
Expand Down
4 changes: 2 additions & 2 deletions frontend/common/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const keywords = {
FEATURE_NAME_ALT_VALUE: 'big',
LIB_NAME: 'flagsmith',
LIB_NAME_JAVA: 'FlagsmithClient',
NPM_CLIENT: 'flagsmith',
NPM_CLIENT: '@flagsmith/flagsmith',
NPM_NODE_CLIENT: 'flagsmith-nodejs',
SEGMENT_NAME: 'superUsers',
TRAIT_NAME: 'age',
Expand All @@ -21,7 +21,7 @@ const keywords = {
}
const keywordsReactNative = {
...keywords,
NPM_CLIENT: 'react-native-flagsmith',
NPM_CLIENT: '@flagsmith/react-native',
}
const Constants = {
archivedTag: { color: '#8f8f8f', label: 'Archived' },
Expand Down
2 changes: 1 addition & 1 deletion frontend/e2e/global-setup.playwright.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { FullConfig } from '@playwright/test';
import fetch from 'node-fetch';
import flagsmith from 'flagsmith/isomorphic';
import flagsmith from '@flagsmith/flagsmith/isomorphic';
import Project from '../common/project';
import * as fs from 'fs';
import * as path from 'path';
Expand Down
4 changes: 2 additions & 2 deletions frontend/e2e/helpers/utils.playwright.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import fetch from 'node-fetch';
import flagsmith from 'flagsmith/isomorphic';
import { IFlagsmith } from 'flagsmith/types';
import flagsmith from '@flagsmith/flagsmith/isomorphic';
import { IFlagsmith } from '@flagsmith/flagsmith/types';
import Project from '../../common/project';

export const LONG_TIMEOUT = 20000;
Expand Down
13 changes: 3 additions & 10 deletions frontend/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 0 additions & 1 deletion frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,6 @@
"fbjs": "^3.0.4",
"fetchify": "0.0.2",
"file-loader": "6.2.0",
"flagsmith": "^10.0.0",
"flux-react-dispatcher": "1.2.5",
"free-email-domains": "^1.2.14",
"fs-extra": "2.0.0",
Expand Down
Loading