npm package: @riqra/feature-flags
Description: Feature flags made easy.
Author: Kenneth Luján Rosas
Latest version: 1.17.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# 🚩 feature-flags 🚩

Feature flags made easy. 

## :package: &nbsp; 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.

## 💻 &nbsp; Usage

Install as project dependency:

```bash
$ 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

```js
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

```js
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


```js
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

```js
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

```js
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>
    )
  }
}
```