Project: Flagsmith (Observability and Analysis / Feature Flagging)
File: react.md

title: Flagsmith React SDK sidebar_label: React and React Native description: Manage your Feature Flags and Remote Config with React and React Native Hooks. slug: /clients/react This library includes React/React Native Hooks allowing you to query individual features and flags that limit re-renders. Example applications for a variety of React, React Native and Next.js can be found here: :::tip We also have flagsmith-es if you'd prefer to use modules. ::: ```bash npm i flagsmith --save ``` :::tip The React Native SDK shares the exact same implementation of Flagsmith, however, requires an implementation of AsyncStorage to be provided (e.g. @react-native-community/async-storage) in order to utilise analytics and caching. See . ::: ```bash npm i react-native-flagsmith --save ``` ```html <script src="https://cdn.jsdelivr.net/npm/flagsmith/index.js"></script> ``` The SDK is initialised against a single environment. You can find your Client-side Environment Key in the Environment settings page. Wrapping your application with our FlagsmithProvider component provides a React Context throughout your application so that you can use the hooks `useFlagsmith` and `useFlags`. ```javascript import flagsmith from 'flagsmith' import {FlagsmithProvider} from 'flagsmith/react' export function AppRoot() { <FlagsmithProvider options={{ environmentID: "<YOURENVIRONMENTKEY>", }} flagsmith={flagsmith}> {...} </FlagsmithProvider> }; ``` Providing options to the Flagsmith provider will initialise the client, the API reference for these options can be found . :::tip Initialising before rendering the FlagsmithProvider If you wish to initialise the Flagsmith client before React rendering (e.g. in redux, or SSR) you can do so by calling and provide no options property to the FlagsmithProvider component. ::: Components that have been wrapped in a FlagsmithProvider will be able to evaluate feature values and enabled state as well as user traits via the `useFlags` hook. ```javascript import { useFlags } from 'flagsmith/react'; export function MyComponent() { const flags = useFlags(['fontsize'], ['exampletrait']); // only causes re-render if specified flag values / traits change return ( <div className="App"> fontsize: {flags.fontsize.value} exampletrait: {flags.exampletrait} </div> ); } ``` ```javascript useFlags(requiredFlags:string[], requiredTraits?:string[])=> {[key:string]: IFlagsmithTrait or IFlagsmithFeature} ``` You can find the exact definitions of these types . | Property | Description | Required | Default Value | | | :: | -: | : | | `flagsmith: IFlagsmith` | Defines the flagsmith instance that the provider will use. | YES | null | | `options?: ` IInitConfig | Initialisation options to use. If you don't provide this you will have to call flagsmith.init elsewhere. | | null | | `serverState?: IState` | Used to pass an initial state, in most cases as a result of SSR flagsmith.getState(). See | | null | Components that have been wrapped in a FlagsmithProvider will be able to access the instance of Flagsmith via the `useFlagsmith` hook. ```javascript import React from 'react'; import { useFlags, useFlagsmith } from 'flagsmith/react'; export function MyComponent() { const flags = useFlags(['fontsize'], ['exampletrait']); // only causes re-render if specified flag values / traits change const flagsmith = useFlagsmith(); const identify = () => { // This will re-render the component if the user has the trait exampletrait or they have a different feature value for fontsize flagsmith.identify('flagsmithsampleuser'); }; const logout = () => { // This will re-render the component if the user has the trait exampletrait or they have a different feature value for fontsize flagsmith.logout(); }; return ( <div className="App"> fontsize: {flags.fontsize?.value} exampletrait: {flags.exampletrait} {flagsmith.identity ? <button onClick={logout}>Logout</button> : <button onClick={identify}>Identify</button>} </div> ); } ``` This allows you to access the SDK instance that is used within the FlagsmithProvider. ```javascript useFlagsmith()=> IFlagsmith ``` This hook allows you to access the . ```javascript useFlagsmithLoading()=> LoadingState ```