@rolloutly/react 0.1.1 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -15,12 +15,12 @@ yarn add @rolloutly/react
15
15
  ## Quick Start
16
16
 
17
17
  ```tsx
18
- import { RolloutlyProvider, useFlag, useFlagEnabled } from '@rolloutly/react';
18
+ import { RolloutlyProvider, useFlags, useFlagEnabled } from '@rolloutly/react';
19
19
 
20
20
  // 1. Wrap your app with the provider
21
21
  function App() {
22
22
  return (
23
- <RolloutlyProvider token="rly_your_project_production_xxx">
23
+ <RolloutlyProvider token="rly_projectId_production_xxx">
24
24
  <MyApp />
25
25
  </RolloutlyProvider>
26
26
  );
@@ -28,15 +28,27 @@ function App() {
28
28
 
29
29
  // 2. Use hooks in your components
30
30
  function MyFeature() {
31
- const isNewCheckout = useFlagEnabled('new-checkout');
32
- const rateLimit = useFlag<number>('api-rate-limit');
33
-
34
- if (isNewCheckout) {
35
- return <NewCheckout rateLimit={rateLimit} />;
31
+ // Get all flags as an object (recommended)
32
+ const flags = useFlags();
33
+
34
+ // Access flags by key
35
+ if (flags['new-checkout']) {
36
+ return <NewCheckout rateLimit={flags['rate-limit']} />;
36
37
  }
37
38
 
38
39
  return <OldCheckout />;
39
40
  }
41
+
42
+ // Or check boolean flags with useFlagEnabled
43
+ function Banner() {
44
+ const showBanner = useFlagEnabled('show-banner');
45
+
46
+ if (showBanner) {
47
+ return <PromoBanner />;
48
+ }
49
+
50
+ return null;
51
+ }
40
52
  ```
41
53
 
42
54
  ## Provider Configuration
@@ -91,13 +103,21 @@ if (showBanner) {
91
103
  }
92
104
  ```
93
105
 
94
- ### `useFlags(): Record<string, FlagValue>`
106
+ ### `useFlags(): Record<string, FlagValue | undefined>`
95
107
 
96
- Get all flags as a key-value object.
108
+ Get all flag values as a key-value object. This is the recommended way to access multiple flags.
97
109
 
98
110
  ```tsx
99
111
  const flags = useFlags();
100
- console.log(flags['my-feature']); // true
112
+
113
+ // Access by key
114
+ const myFeature = flags['my-feature'];
115
+
116
+ // Or destructure (use bracket notation for keys with dashes)
117
+ const { 'new-checkout': newCheckout, 'show-banner': showBanner } = useFlags();
118
+
119
+ // For keys without dashes, simple destructuring works
120
+ const { myFeature, anotherFlag } = useFlags();
101
121
  ```
102
122
 
103
123
  ### `useRolloutly(): RolloutlyContextValue`
package/dist/index.cjs CHANGED
@@ -125,14 +125,7 @@ function useFlagEnabled(key) {
125
125
  function useFlags() {
126
126
  const client = useRolloutlyClient();
127
127
  const getSnapshot = react.useCallback(() => {
128
- const flags = client.getFlags();
129
- return Object.entries(flags).reduce(
130
- (acc, [key, flag]) => {
131
- acc[key] = flag.value;
132
- return acc;
133
- },
134
- {}
135
- );
128
+ return client.getFlagValues();
136
129
  }, [client]);
137
130
  const subscribe = react.useCallback(
138
131
  (onStoreChange) => {
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/provider.tsx"],"names":["createContext","useState","useMemo","RolloutlyClient","useEffect","useContext","useCallback","useSyncExternalStore"],"mappings":"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","file":"index.cjs","sourcesContent":["'use client';\n\nimport { RolloutlyClient, type FlagValue } from '@rolloutly/core';\nimport {\n createContext,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useState,\n useSyncExternalStore,\n} from 'react';\n\nimport type { RolloutlyContextValue, RolloutlyProviderProps } from './types';\n\nconst RolloutlyContext = createContext<{\n client: RolloutlyClient | null;\n isLoading: boolean;\n isError: boolean;\n error: Error | null;\n}>({\n client: null,\n isLoading: true,\n isError: false,\n error: null,\n});\n\n/**\n * Provider component that initializes Rolloutly and provides context\n */\nexport function RolloutlyProvider({\n token,\n children,\n baseUrl,\n realtimeEnabled = true,\n defaultFlags,\n debug = false,\n loadingComponent,\n}: RolloutlyProviderProps): JSX.Element {\n const [isLoading, setIsLoading] = useState(true);\n const [isError, setIsError] = useState(false);\n const [error, setError] = useState<Error | null>(null);\n\n const client = useMemo(() => {\n return new RolloutlyClient({\n token,\n baseUrl,\n realtimeEnabled,\n defaultFlags,\n debug,\n });\n }, [token, baseUrl, realtimeEnabled, defaultFlags, debug]);\n\n useEffect(() => {\n let mounted = true;\n\n client\n .waitForInit()\n .then(() => {\n if (mounted) {\n setIsLoading(false);\n }\n })\n .catch((err) => {\n if (mounted) {\n setIsError(true);\n setError(err instanceof Error ? err : new Error(String(err)));\n setIsLoading(false);\n }\n });\n\n return () => {\n mounted = false;\n client.close();\n };\n }, [client]);\n\n const contextValue = useMemo(\n () => ({\n client,\n isLoading,\n isError,\n error,\n }),\n [client, isLoading, isError, error],\n );\n\n if (isLoading && loadingComponent) {\n return <>{loadingComponent}</>;\n }\n\n return (\n <RolloutlyContext.Provider value={contextValue}>\n {children}\n </RolloutlyContext.Provider>\n );\n}\n\n/**\n * Hook to access the Rolloutly client directly\n */\nexport function useRolloutlyClient(): RolloutlyClient {\n const { client } = useContext(RolloutlyContext);\n\n if (!client) {\n throw new Error('useRolloutlyClient must be used within RolloutlyProvider');\n }\n\n return client;\n}\n\n/**\n * Hook to get Rolloutly status\n */\nexport function useRolloutly(): RolloutlyContextValue {\n const { client, isLoading, isError, error } = useContext(RolloutlyContext);\n\n if (!client) {\n throw new Error('useRolloutly must be used within RolloutlyProvider');\n }\n\n const getFlag = useCallback(\n <T extends FlagValue = FlagValue>(key: string): T | undefined => {\n return client.getFlag<T>(key);\n },\n [client],\n );\n\n const isEnabled = useCallback(\n (key: string): boolean => {\n return client.isEnabled(key);\n },\n [client],\n );\n\n return {\n isLoading,\n isError,\n error,\n getFlag,\n isEnabled,\n };\n}\n\n/**\n * Hook to get a single flag value with real-time updates\n */\nexport function useFlag<T extends FlagValue = FlagValue>(\n key: string,\n): T | undefined {\n const client = useRolloutlyClient();\n\n const getSnapshot = useCallback((): T | undefined => {\n return client.getFlag<T>(key);\n }, [client, key]);\n\n const subscribe = useCallback(\n (onStoreChange: () => void): (() => void) => {\n return client.subscribe(onStoreChange);\n },\n [client],\n );\n\n return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n}\n\n/**\n * Hook to check if a boolean flag is enabled with real-time updates\n */\nexport function useFlagEnabled(key: string): boolean {\n const client = useRolloutlyClient();\n\n const getSnapshot = useCallback((): boolean => {\n return client.isEnabled(key);\n }, [client, key]);\n\n const subscribe = useCallback(\n (onStoreChange: () => void): (() => void) => {\n return client.subscribe(onStoreChange);\n },\n [client],\n );\n\n return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n}\n\n/**\n * Hook to get all flag values with real-time updates\n * Returns an object keyed by flag key with the flag values\n *\n * @example\n * const flags = useFlags();\n * const value = flags['my-flag'];\n *\n * // Or with destructuring:\n * const { 'my-flag': myFlag } = useFlags();\n */\nexport function useFlags(): Record<string, FlagValue | undefined> {\n const client = useRolloutlyClient();\n\n const getSnapshot = useCallback((): Record<string, FlagValue | undefined> => {\n const flags = client.getFlags();\n\n return Object.entries(flags).reduce<Record<string, FlagValue | undefined>>(\n (acc, [key, flag]) => {\n acc[key] = flag.value;\n\n return acc;\n },\n {},\n );\n }, [client]);\n\n const subscribe = useCallback(\n (onStoreChange: () => void): (() => void) => {\n return client.subscribe(onStoreChange);\n },\n [client],\n );\n\n return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n}\n"]}
1
+ {"version":3,"sources":["../src/provider.tsx"],"names":["createContext","useState","useMemo","RolloutlyClient","useEffect","useContext","useCallback","useSyncExternalStore"],"mappings":"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","file":"index.cjs","sourcesContent":["'use client';\n\nimport { RolloutlyClient, type FlagValue } from '@rolloutly/core';\nimport {\n createContext,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useState,\n useSyncExternalStore,\n} from 'react';\n\nimport type { RolloutlyContextValue, RolloutlyProviderProps } from './types';\n\nconst RolloutlyContext = createContext<{\n client: RolloutlyClient | null;\n isLoading: boolean;\n isError: boolean;\n error: Error | null;\n}>({\n client: null,\n isLoading: true,\n isError: false,\n error: null,\n});\n\n/**\n * Provider component that initializes Rolloutly and provides context\n */\nexport function RolloutlyProvider({\n token,\n children,\n baseUrl,\n realtimeEnabled = true,\n defaultFlags,\n debug = false,\n loadingComponent,\n}: RolloutlyProviderProps): JSX.Element {\n const [isLoading, setIsLoading] = useState(true);\n const [isError, setIsError] = useState(false);\n const [error, setError] = useState<Error | null>(null);\n\n const client = useMemo(() => {\n return new RolloutlyClient({\n token,\n baseUrl,\n realtimeEnabled,\n defaultFlags,\n debug,\n });\n }, [token, baseUrl, realtimeEnabled, defaultFlags, debug]);\n\n useEffect(() => {\n let mounted = true;\n\n client\n .waitForInit()\n .then(() => {\n if (mounted) {\n setIsLoading(false);\n }\n })\n .catch((err) => {\n if (mounted) {\n setIsError(true);\n setError(err instanceof Error ? err : new Error(String(err)));\n setIsLoading(false);\n }\n });\n\n return () => {\n mounted = false;\n client.close();\n };\n }, [client]);\n\n const contextValue = useMemo(\n () => ({\n client,\n isLoading,\n isError,\n error,\n }),\n [client, isLoading, isError, error],\n );\n\n if (isLoading && loadingComponent) {\n return <>{loadingComponent}</>;\n }\n\n return (\n <RolloutlyContext.Provider value={contextValue}>\n {children}\n </RolloutlyContext.Provider>\n );\n}\n\n/**\n * Hook to access the Rolloutly client directly\n */\nexport function useRolloutlyClient(): RolloutlyClient {\n const { client } = useContext(RolloutlyContext);\n\n if (!client) {\n throw new Error('useRolloutlyClient must be used within RolloutlyProvider');\n }\n\n return client;\n}\n\n/**\n * Hook to get Rolloutly status\n */\nexport function useRolloutly(): RolloutlyContextValue {\n const { client, isLoading, isError, error } = useContext(RolloutlyContext);\n\n if (!client) {\n throw new Error('useRolloutly must be used within RolloutlyProvider');\n }\n\n const getFlag = useCallback(\n <T extends FlagValue = FlagValue>(key: string): T | undefined => {\n return client.getFlag<T>(key);\n },\n [client],\n );\n\n const isEnabled = useCallback(\n (key: string): boolean => {\n return client.isEnabled(key);\n },\n [client],\n );\n\n return {\n isLoading,\n isError,\n error,\n getFlag,\n isEnabled,\n };\n}\n\n/**\n * Hook to get a single flag value with real-time updates\n */\nexport function useFlag<T extends FlagValue = FlagValue>(\n key: string,\n): T | undefined {\n const client = useRolloutlyClient();\n\n const getSnapshot = useCallback((): T | undefined => {\n return client.getFlag<T>(key);\n }, [client, key]);\n\n const subscribe = useCallback(\n (onStoreChange: () => void): (() => void) => {\n return client.subscribe(onStoreChange);\n },\n [client],\n );\n\n return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n}\n\n/**\n * Hook to check if a boolean flag is enabled with real-time updates\n */\nexport function useFlagEnabled(key: string): boolean {\n const client = useRolloutlyClient();\n\n const getSnapshot = useCallback((): boolean => {\n return client.isEnabled(key);\n }, [client, key]);\n\n const subscribe = useCallback(\n (onStoreChange: () => void): (() => void) => {\n return client.subscribe(onStoreChange);\n },\n [client],\n );\n\n return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n}\n\n/**\n * Hook to get all flag values with real-time updates\n * Returns an object keyed by flag key with the flag values\n *\n * @example\n * const flags = useFlags();\n * const value = flags['my-flag'];\n *\n * // Or with destructuring:\n * const { 'my-flag': myFlag } = useFlags();\n */\nexport function useFlags(): Record<string, FlagValue | undefined> {\n const client = useRolloutlyClient();\n\n // Use the client's cached flag values to avoid creating new objects\n const getSnapshot = useCallback((): Record<string, FlagValue | undefined> => {\n return client.getFlagValues();\n }, [client]);\n\n const subscribe = useCallback(\n (onStoreChange: () => void): (() => void) => {\n return client.subscribe(onStoreChange);\n },\n [client],\n );\n\n return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n}\n"]}
package/dist/index.js CHANGED
@@ -123,14 +123,7 @@ function useFlagEnabled(key) {
123
123
  function useFlags() {
124
124
  const client = useRolloutlyClient();
125
125
  const getSnapshot = useCallback(() => {
126
- const flags = client.getFlags();
127
- return Object.entries(flags).reduce(
128
- (acc, [key, flag]) => {
129
- acc[key] = flag.value;
130
- return acc;
131
- },
132
- {}
133
- );
126
+ return client.getFlagValues();
134
127
  }, [client]);
135
128
  const subscribe = useCallback(
136
129
  (onStoreChange) => {
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/provider.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["'use client';\n\nimport { RolloutlyClient, type FlagValue } from '@rolloutly/core';\nimport {\n createContext,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useState,\n useSyncExternalStore,\n} from 'react';\n\nimport type { RolloutlyContextValue, RolloutlyProviderProps } from './types';\n\nconst RolloutlyContext = createContext<{\n client: RolloutlyClient | null;\n isLoading: boolean;\n isError: boolean;\n error: Error | null;\n}>({\n client: null,\n isLoading: true,\n isError: false,\n error: null,\n});\n\n/**\n * Provider component that initializes Rolloutly and provides context\n */\nexport function RolloutlyProvider({\n token,\n children,\n baseUrl,\n realtimeEnabled = true,\n defaultFlags,\n debug = false,\n loadingComponent,\n}: RolloutlyProviderProps): JSX.Element {\n const [isLoading, setIsLoading] = useState(true);\n const [isError, setIsError] = useState(false);\n const [error, setError] = useState<Error | null>(null);\n\n const client = useMemo(() => {\n return new RolloutlyClient({\n token,\n baseUrl,\n realtimeEnabled,\n defaultFlags,\n debug,\n });\n }, [token, baseUrl, realtimeEnabled, defaultFlags, debug]);\n\n useEffect(() => {\n let mounted = true;\n\n client\n .waitForInit()\n .then(() => {\n if (mounted) {\n setIsLoading(false);\n }\n })\n .catch((err) => {\n if (mounted) {\n setIsError(true);\n setError(err instanceof Error ? err : new Error(String(err)));\n setIsLoading(false);\n }\n });\n\n return () => {\n mounted = false;\n client.close();\n };\n }, [client]);\n\n const contextValue = useMemo(\n () => ({\n client,\n isLoading,\n isError,\n error,\n }),\n [client, isLoading, isError, error],\n );\n\n if (isLoading && loadingComponent) {\n return <>{loadingComponent}</>;\n }\n\n return (\n <RolloutlyContext.Provider value={contextValue}>\n {children}\n </RolloutlyContext.Provider>\n );\n}\n\n/**\n * Hook to access the Rolloutly client directly\n */\nexport function useRolloutlyClient(): RolloutlyClient {\n const { client } = useContext(RolloutlyContext);\n\n if (!client) {\n throw new Error('useRolloutlyClient must be used within RolloutlyProvider');\n }\n\n return client;\n}\n\n/**\n * Hook to get Rolloutly status\n */\nexport function useRolloutly(): RolloutlyContextValue {\n const { client, isLoading, isError, error } = useContext(RolloutlyContext);\n\n if (!client) {\n throw new Error('useRolloutly must be used within RolloutlyProvider');\n }\n\n const getFlag = useCallback(\n <T extends FlagValue = FlagValue>(key: string): T | undefined => {\n return client.getFlag<T>(key);\n },\n [client],\n );\n\n const isEnabled = useCallback(\n (key: string): boolean => {\n return client.isEnabled(key);\n },\n [client],\n );\n\n return {\n isLoading,\n isError,\n error,\n getFlag,\n isEnabled,\n };\n}\n\n/**\n * Hook to get a single flag value with real-time updates\n */\nexport function useFlag<T extends FlagValue = FlagValue>(\n key: string,\n): T | undefined {\n const client = useRolloutlyClient();\n\n const getSnapshot = useCallback((): T | undefined => {\n return client.getFlag<T>(key);\n }, [client, key]);\n\n const subscribe = useCallback(\n (onStoreChange: () => void): (() => void) => {\n return client.subscribe(onStoreChange);\n },\n [client],\n );\n\n return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n}\n\n/**\n * Hook to check if a boolean flag is enabled with real-time updates\n */\nexport function useFlagEnabled(key: string): boolean {\n const client = useRolloutlyClient();\n\n const getSnapshot = useCallback((): boolean => {\n return client.isEnabled(key);\n }, [client, key]);\n\n const subscribe = useCallback(\n (onStoreChange: () => void): (() => void) => {\n return client.subscribe(onStoreChange);\n },\n [client],\n );\n\n return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n}\n\n/**\n * Hook to get all flag values with real-time updates\n * Returns an object keyed by flag key with the flag values\n *\n * @example\n * const flags = useFlags();\n * const value = flags['my-flag'];\n *\n * // Or with destructuring:\n * const { 'my-flag': myFlag } = useFlags();\n */\nexport function useFlags(): Record<string, FlagValue | undefined> {\n const client = useRolloutlyClient();\n\n const getSnapshot = useCallback((): Record<string, FlagValue | undefined> => {\n const flags = client.getFlags();\n\n return Object.entries(flags).reduce<Record<string, FlagValue | undefined>>(\n (acc, [key, flag]) => {\n acc[key] = flag.value;\n\n return acc;\n },\n {},\n );\n }, [client]);\n\n const subscribe = useCallback(\n (onStoreChange: () => void): (() => void) => {\n return client.subscribe(onStoreChange);\n },\n [client],\n );\n\n return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n}\n"]}
1
+ {"version":3,"sources":["../src/provider.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["'use client';\n\nimport { RolloutlyClient, type FlagValue } from '@rolloutly/core';\nimport {\n createContext,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useState,\n useSyncExternalStore,\n} from 'react';\n\nimport type { RolloutlyContextValue, RolloutlyProviderProps } from './types';\n\nconst RolloutlyContext = createContext<{\n client: RolloutlyClient | null;\n isLoading: boolean;\n isError: boolean;\n error: Error | null;\n}>({\n client: null,\n isLoading: true,\n isError: false,\n error: null,\n});\n\n/**\n * Provider component that initializes Rolloutly and provides context\n */\nexport function RolloutlyProvider({\n token,\n children,\n baseUrl,\n realtimeEnabled = true,\n defaultFlags,\n debug = false,\n loadingComponent,\n}: RolloutlyProviderProps): JSX.Element {\n const [isLoading, setIsLoading] = useState(true);\n const [isError, setIsError] = useState(false);\n const [error, setError] = useState<Error | null>(null);\n\n const client = useMemo(() => {\n return new RolloutlyClient({\n token,\n baseUrl,\n realtimeEnabled,\n defaultFlags,\n debug,\n });\n }, [token, baseUrl, realtimeEnabled, defaultFlags, debug]);\n\n useEffect(() => {\n let mounted = true;\n\n client\n .waitForInit()\n .then(() => {\n if (mounted) {\n setIsLoading(false);\n }\n })\n .catch((err) => {\n if (mounted) {\n setIsError(true);\n setError(err instanceof Error ? err : new Error(String(err)));\n setIsLoading(false);\n }\n });\n\n return () => {\n mounted = false;\n client.close();\n };\n }, [client]);\n\n const contextValue = useMemo(\n () => ({\n client,\n isLoading,\n isError,\n error,\n }),\n [client, isLoading, isError, error],\n );\n\n if (isLoading && loadingComponent) {\n return <>{loadingComponent}</>;\n }\n\n return (\n <RolloutlyContext.Provider value={contextValue}>\n {children}\n </RolloutlyContext.Provider>\n );\n}\n\n/**\n * Hook to access the Rolloutly client directly\n */\nexport function useRolloutlyClient(): RolloutlyClient {\n const { client } = useContext(RolloutlyContext);\n\n if (!client) {\n throw new Error('useRolloutlyClient must be used within RolloutlyProvider');\n }\n\n return client;\n}\n\n/**\n * Hook to get Rolloutly status\n */\nexport function useRolloutly(): RolloutlyContextValue {\n const { client, isLoading, isError, error } = useContext(RolloutlyContext);\n\n if (!client) {\n throw new Error('useRolloutly must be used within RolloutlyProvider');\n }\n\n const getFlag = useCallback(\n <T extends FlagValue = FlagValue>(key: string): T | undefined => {\n return client.getFlag<T>(key);\n },\n [client],\n );\n\n const isEnabled = useCallback(\n (key: string): boolean => {\n return client.isEnabled(key);\n },\n [client],\n );\n\n return {\n isLoading,\n isError,\n error,\n getFlag,\n isEnabled,\n };\n}\n\n/**\n * Hook to get a single flag value with real-time updates\n */\nexport function useFlag<T extends FlagValue = FlagValue>(\n key: string,\n): T | undefined {\n const client = useRolloutlyClient();\n\n const getSnapshot = useCallback((): T | undefined => {\n return client.getFlag<T>(key);\n }, [client, key]);\n\n const subscribe = useCallback(\n (onStoreChange: () => void): (() => void) => {\n return client.subscribe(onStoreChange);\n },\n [client],\n );\n\n return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n}\n\n/**\n * Hook to check if a boolean flag is enabled with real-time updates\n */\nexport function useFlagEnabled(key: string): boolean {\n const client = useRolloutlyClient();\n\n const getSnapshot = useCallback((): boolean => {\n return client.isEnabled(key);\n }, [client, key]);\n\n const subscribe = useCallback(\n (onStoreChange: () => void): (() => void) => {\n return client.subscribe(onStoreChange);\n },\n [client],\n );\n\n return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n}\n\n/**\n * Hook to get all flag values with real-time updates\n * Returns an object keyed by flag key with the flag values\n *\n * @example\n * const flags = useFlags();\n * const value = flags['my-flag'];\n *\n * // Or with destructuring:\n * const { 'my-flag': myFlag } = useFlags();\n */\nexport function useFlags(): Record<string, FlagValue | undefined> {\n const client = useRolloutlyClient();\n\n // Use the client's cached flag values to avoid creating new objects\n const getSnapshot = useCallback((): Record<string, FlagValue | undefined> => {\n return client.getFlagValues();\n }, [client]);\n\n const subscribe = useCallback(\n (onStoreChange: () => void): (() => void) => {\n return client.subscribe(onStoreChange);\n },\n [client],\n );\n\n return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n}\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rolloutly/react",
3
- "version": "0.1.1",
3
+ "version": "0.1.2",
4
4
  "description": "Rolloutly feature flags SDK - React hooks and provider",
5
5
  "author": "Kevin Beltrão",
6
6
  "license": "MIT",
@@ -44,7 +44,7 @@
44
44
  "clean": "rm -rf dist"
45
45
  },
46
46
  "dependencies": {
47
- "@rolloutly/core": "^0.1.1"
47
+ "@rolloutly/core": "^0.1.2"
48
48
  },
49
49
  "peerDependencies": {
50
50
  "react": ">=18.0.0"