How to use feature-toggle-jsx - 5 common examples

const MyFeatureComponentWithConfig: React.FC = ({ myFeatureWithConfig: { items }, text, number }) => (
  <>
    <p>
      <strong>My Component</strong>
      <br>
      <span>
        You should see this {text} and {number}
      </span>
      <br>
      <span>{`with this configuration "${items.join(', ')}"`}</span>
    </p>
  
)

const WrappedComponentWithConfig = withFeature(MyFeatureComponentWithConfig, 'myFeatureWithConfig')

export { WrappedComponentWithConfig }

export default MyFeatureComponentWithConfig

interface Props {
  text: string
}

const MyFeatureComponent: React.FC = ({ text }) => (
  <>
    <p>
      <strong>My Component</strong>
      <br>
      <span>You should see this {text}</span>
    </p>
  
)

const WrappedComponent = withFeature(MyFeatureComponent, 'myFeature')

export { WrappedComponent }

export default MyFeatureComponent

import * as React from 'react'
import { withFeature } from 'feature-toggle-jsx'
import { Features } from '../types'

const MyOtherFeatureComponent: React.FC<{}> = () => (
  <>
    <p>
      <strong>My Hidden Component</strong>
      <br>
      <span>You should not see this</span>
    </p>
  
)

const WrappedComponent = withFeature(MyOtherFeatureComponent, 'myOtherFeature')

export { WrappedComponent }

export default MyOtherFeatureComponent

const FeatureToggleExamples: React.FC = () => {
  return (
    <>
      <h2>withFeature</h2>
      
      
      

      <h2>withoutFeature</h2>
      
    
  )
}

export default withFeaturesProvider(FeatureToggleExamples, features)

import * as React from 'react'
import { withoutFeature } from 'feature-toggle-jsx'
import { Features } from '../types'

const MyOtherFeatureComponent: React.FC<{}> = () => (
  <>
    <p>
      <strong>My Special Component</strong>
      <br>
      <span>You should see this when it's disabled !?</span>
    </p>
  
)

const WrappedComponent = withoutFeature(MyOtherFeatureComponent, 'myOtherFeature')

export { WrappedComponent }

export default MyOtherFeatureComponent