How to use @flopflip/react-broadcast - 5 common examples

const TestComponent = () => {
    const isFeatureEnabled = useFeatureToggle(FEATURE_NAME);

    return <p>Enabled: {isFeatureEnabled ? 'Yes' : 'No'}</p>;
  };
  it('should not enable features toggles by default', async () =&gt; {

export const NavBar = props => {
  const ref = React.useRef();
  const areProjectExtensionsEnabled = useFeatureToggle(PROJECT_EXTENSIONS);
  const disabledMenuItems = useApplicationContext(
    context => context.environment.disabledMenuItems
  );
  const menuVisibilities = useApplicationContext(
    context => context.menuVisibilities
  );
  const applicationsMenu = useApplicationsMenu({
    queryOptions: {
      onError: reportErrorToSentry,
    },
    skipRemoteQuery: !props.environment.servedByProxy,
    options: {
      __DEV_CONFIG__: {
        menuLoader: props.DEV_ONLY__loadNavbarMenuConfig,
        menuKey: 'navBar',
      },

INCREMENT_SYNC_BUTTON,
} from './flags';

const UntoggledFeature = () =&gt; <h6>Disabled Feature</h6>;

const IncrementAsyncButton = props =&gt; (
  <button disabled="{props.isIncrementing}" type="button">
    Increment Async
  </button>
);
const FeatureToggledIncrementAsyncButton = flowRight(
  branchOnFeatureToggle({ flag: INCREMENT_ASYNC_BUTTON }, UntoggledFeature)
)(IncrementAsyncButton);

const IncrementSyncButton = props =&gt; (
  <button disabled="{props.isIncrementing}" type="button">
    Increment
  </button>

<button disabled="{props.isIncrementing}" type="button">
    Increment
  </button>
);

const FeatureToggledIncrementSyncButton = injectFeatureToggle(
  INCREMENT_SYNC_BUTTON,
  'syncButtonStyle'
)(IncrementSyncButton);

const Counter = props =&gt; (
  <div>
    <h1>Count around</h1>
    <p>Count: {props.count}</p>

    <div>
      
      <br>
      </div></div>

}
        }}
        search={this.search}
        executeCommand={this.executeCommand}
        onClose={this.props.onClose}
        getNextCommands={this.getNextCommands}
      />
    );
  }
}

export default flowRight(
  withApollo,
  injectIntl,
  withRouter,
  injectFeatureToggles(['pimSearch', 'customApplications', 'canViewDashboard']),
  withApplicationContext(),
  connect(null, (dispatch, ownProps) => ({
    pimSearchProductIds: searchText =>
      dispatch(
        sdkActions.post({
          uri: `/${ownProps.applicationContext.project.key}/search/products`,
          mcApiProxyTarget: MC_API_PROXY_TARGETS.PIM_SEARCH,
          payload: {
            query: {
              fullText: {
                field: 'name',
                language: ownProps.applicationContext.dataLocale,
                value: searchText,
              },
            },
            sort: [