Skip to content

Instantly share code, notes, and snippets.

@gangstaJS
Last active October 16, 2019 13:16
Show Gist options
  • Save gangstaJS/8d66aa8f51b971861e6fec18ff73e551 to your computer and use it in GitHub Desktop.
Save gangstaJS/8d66aa8f51b971861e6fec18ff73e551 to your computer and use it in GitHub Desktop.

Система сокрытия фич на основе URL параметров.

К примеру чтобы скрыть компонент пишим следующий код:

import FeaturesToggle from 'containers/features-toggl.js';

class TestComponent extends Component {
  
  render() {
    return <FeaturesToggle f={{anomaly: true}}>
        <Anomaly/>
    </FeaturesToggle>
  }

}

Теперь компонент будет показываться только если в урле будет следующий параметр ?f=anomaly:true. Так же можно задавать составные условия к примеру:

class TestComponent extends Component {
  
  render() {
    return <FeaturesToggle f={{anomaly:true, cropPerformance:true}}>
        <Anomaly/>
    </FeaturesToggle>
  }

}

Будет показан только при условии ?f=anomaly:true,cropPerformance:true

Как что то скрыть вне jsx.

Для этого нужно замапить свойство из редакса и импортировать ф-цию из утилсов:

import {compareBoolProps} from '../_utils';

class TestComponent extends Component {

  testToShow = () => compareBoolProps({anomaly: true}, this.props.featuresToggle)
  
  render() {
    return this.testToShow() ? 'I am visible' : null;
  }

}
const mapStateToProps = state => ({
  featuresToggle: state.global.featuresToggle,
});
export default connect(
  mapStateToProps, null
)(TestComponent);

Свойство featuresToggle всегда хранит в себе актуальное состояние гет параметра f в котором записана строка конфигурации

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment