@riqra/feature-flags v1.17.0

🚩 feature-flags 🚩

Feature flags made easy.

:package:   Components and HOCs

1.- <FlagProvider />

FlagProvider is expected to be used as the outermost component in your app's tree.

We asume all 'flags' passed down to FlagProvider are enabled

2.- <Flag />

Flag is the core component of this package, has the ability to decide what will be render

3.- withFlag(...args)

As the name may suggest, withFlag is a HoC, it's intended usage is to wrap components with flag validation.

💻   Usage

Install as project dependency:

$ yarn add @riqra/feature-flags

Now you can use feature-flags to control the rendering of your components. See below the examples to use this awesome package:

Basic use of Flag

import { FlagProvider, Flag } from '@riqra/flag-provider'

const flags = [
  { slug: 'feature-1' },
  { slug: 'feature-2' }
  // { slug: 'feature-3' }
]

class App extends Component {
  
  render () {
    <FlagProvider flags={flags}>
      <Flag slug='feature-1'>
        <div>
          This will be rendered, since 'feature-1' was passed 
          down to FlagProvider.
        <div>
      </Flag>
      <Flag slug='feature-3'>
        <div>
          This will not be rendered
        </div>
      </Flag>
    </FlagProvider>
  }
}

Render prop

import { FlagProvider, Flag } from '@riqra/flag-provider'

const flags = [
  { slug: 'feature-1' },
  { slug: 'feature-2' },
  { slug: 'permission-1' }
]

class App extends Component {
  
  render () {
    <FlagProvider flags={flags}>
      <Flag slug='feature-1'>
        {enabled => {
          if (!enabled) {
            return <div>You cannot see the content</div>
          }
          return (
            <div>
              This will be rendered, since 'feature-1'
              was passed down to FlagProvider.
            <div>
          )
        }}
      </Flag>

      <Flag
        slug='permission-1'
        render={enabled => {
          if (!enabled) {
            return <div>You do not have permission</div>
          }
          return (
            <div>
              This demonstrates another use of render prop
            </div>
          )
        }}
      />
    </FlagProvider>
  }
}

Wrap any component

import { FlagProvider, withFlag } from '@riqra/feature-flags'
import MyRegularComponent from './my-regular-component'
  
const MyFlagTogglableComponent = withFlag('feature-1')(MyRegularComponent)

const flags = [
  { slug: 'feature-1' },
  { slug: 'feature-2' }
  // { slug: 'feature-3' }
]
  
class App extends Component {
  render() {
    return (
      <FlagProvider flags={flags}>
        <MyFlagTogglableComponent />
      </FlagProvider>
    )
  }
}

Support multiple flags

import { FlagProvider, withFlag } from '@riqra/feature-flags'
import MyRegularComponent from './my-regular-component'

const slugs = ['feature-2', 'feature-1']

const flags = [
  { slug: 'feature-1' },
  { slug: 'feature-2' },
  { slug: 'feature-3' }
]

class App extends Component {
  render() {
    return (
      <FlagProvider flags={flags}>
        <Flag slugs={slugs}>
          <MyRegularComponent />
        </Flag>
      </FlagProvider>
    )
  }
}

Support wrap multiple flags

import { FlagProvider, withFlag } from '@riqra/feature-flags'
import MyRegularComponent from './my-regular-component'

const slugs = ['feature-2', 'feature-1']
const MyFlagTogglableComponent = withFlag(...slugs)(MyRegularComponent)

const flags = [
  { slug: 'feature-1' },
  { slug: 'feature-2' },
  { slug: 'feature-3' }
]

class App extends Component {
  render() {
    return (
      <FlagProvider flags={flags}>
        <MyFlagTogglableComponent />
      </FlagProvider>
    )
  }
}