Naive Puppets Marching

    @newskit-render/feature-flags
    TypeScript icon, indicating that this package has built-in type declarations

    0.23.0 • Public • Published

    @newskit-render/feature-flags

    A package for adding feature flags to projects generated by newskit-render.

    How to use:

    yarn add @newskit-render/feature-flags or
    npm install --save @newskit-render/feature-flags

    There are two ways that feature flags can be utilized.

    getFeatureFlags() in getServerSideProps

    The most performant way to use feature flags is to call getFeatureFlags() in getServersideProps and then use them throughout the page. This way the implementation will only be available for the current page and and wouldn't effect the rest of the site. To do so you will need to initialize the package by calling createFeatureFlagsInstance with the sdkKey from optimizely. Best practice is to store your sdk key in environment variables, the examples below utilize that method. For local use, you cadd the Optimizely SDK key from your project in your .env.local file like so OPTIMIZELY_SDK_KEY="123". In case you don't have project or access to the Optimizely platform please contact the Experimentation team. Optionally the config can be switched to suit your need. More on this can be found here.

    An example implementation would be as follows:

    pages/index.ts

    import {getFeatureFlags, createFeatureFlagsInstance} from '@newskit-render/feature-flags';
    
    export async function getServerSideProps(context) {
      // code
      createFeatureFlagsInstance({ optimizelyConfig: { sdkKey: process.env.OPTIMIZELY_SDK_KEY } })
      // code
    
      const [resultFromOtherQueries, featureFlagsResult] = await Promise.allSettled([
         // other queries,
         getFeatureFlags()
      ])
    
      const featureFlags = featureFlagsResult.value;
    
      return {
        props: {
          // other data
          featureFlags
        },
      }
    }
    

    samplePage/index.tsx

    import React from 'react'
    import { FeatureFlag } from '@newskit-render/feature-flags'
    
    const SectionPage: React.FC<{
      page: Page
      // pageprops...
      featureFlags?: FeatureFlag[]
    }> = ({ page, pageprops..., featureFlags }) => {
    
      return(
          <Layout>
            {featureFlags && featureFlags['test_flag'] && <p>FEATURE FLAG IS HEREEE</p>}
            <Cell>
              // ...content
            </Cell>
          </Layout>
     )}
    
    export default SamplePage
    
    

    hooks in getInitialProps

    Alternatively, feature flags can be applied on the whole app. To do so, you'll need to instantiate the package in getInitialProps of the main app, then call getFeatureFlags and pass the result to the whole app. By calling the useFeatureFlagsContext hook, the list of featureFlags can be accessed from any point of the site.

    Below we explore a solution, where we use it in the header of the app.

    pages/_app.tsx

    import { getFeatureFlags, FeatureFlagsContextProvider, FeatureFlag, createFeatureFlagsInstance } from '@newskit-render/feature-flags';
    
    function MyApp({ featureFlags }: {featureFlags: FeatureFlag[]}) {
      return (
        <FeatureFlagsContextProvider context={ featureFlags } >
          <App />
        </FeatureFlagsContextProvider>
      )
    }
    MyApp.getInitialProps = async () => {
        createFeatureFlagsInstance({ optimizelyConfig: { sdkKey: process.env.OPTIMIZELY_SDK_KEY } })
      const featureFlags = await getFeatureFlags();
      return { featureFlags }
    }
    
    export default MyApp
    

    header/index.tsx

    import { useFeatureFlagsContext } from '@newskit-render/feature-flags';
    
    const Header: React.FC<{ user: UserData }> = ({ user }) => {
      const featureFlags = useFeatureFlagsContext();
    
      return (
        <>
          <StyledHeader>
            <MainGrid>
              <Cell xs={12}>
                  // ...nav buttons
                  {featureFlags && featureFlags['test_flag'] && <p>FEATURE FLAGG</p>}
                  // ...nav buttons
                  </Stack>
                </Stack>
              </Cell>
            </MainGrid>
          </StyledHeader>
        </>
      )
    }
    
    export default Header
    

    createFeatureFlagsInstance

    createFeatureFlagsInstance takes config object as parameter. The config object consists of optimizelyConfig, userId, defaultFeatureFlags, logLevel. The only requirement for the feature flags to be instantiated is passing optimizely sdk key to optimizelyConfig. Further, the whole config can be changed to suit your needs. userId serves as optimizely user identity. defaultFeatureFlags are used in the event that optimizely doesn't load up and initial values are required. logLevel serves to configure the optimizely logger if you wish to use it. It accepts critical, error, warning, debug or info

    Keywords

    none

    Install

    npm i @newskit-render/feature-flags

    DownloadsWeekly Downloads

    253

    Version

    0.23.0

    License

    UNLICENSED

    Unpacked Size

    66.7 kB

    Total Files

    38

    Last publish

    Collaborators

    • newskit