How to use recompose - 10 common examples

);

const enhacer: HOC<*, EnhancedCompProps> = compose(
  onlyUpdateForKeys(["eA"]),
  withProps(props => ({
    eA: (props.eA: number),
    // $ExpectError eA nor any nor string
    eAErr: (props.eA: string)
  })),
  withProps(props => ({
    // $ExpectError property not found
    err: props.iMNotExists
  }))
);

const enhacerErr: HOC<*, EnhancedCompProps> = compose(
  // $ExpectError property not found
  onlyUpdateForKeys(["eB"])
);

const EnhancedComponent = enhacer(Comp);

(eA: string)
    }
  ;

const enhacer: HOC<*, EnhancedCompProps> = compose(
  withContext({}, props => {
    // $ExpectError eA nor any nor string
    (props.eA: string);
    return {};
  }),
  withProps(props => ({
    eA: (props.eA: number),
    // $ExpectError eA nor any nor string
    eAErr: (props.eA: string)
  })),
  withProps(props => ({
    // $ExpectError property not found
    err: props.iMNotExists
  }))
);

const EnhancedComponent = enhacer(Comp);

const Comp = ({ hello, eA }) =>
  <div>
    {(hello: string)}
    {(eA: number)}
    {
      // $ExpectError eA nor any nor string
      (eA: string)
    }
    {
      // $ExpectError hello nor any nor number
      (hello: number)
    }
  </div>;

const enhacer: HOC&lt;*, EnhancedCompProps&gt; = compose(
  defaultProps({
    hello: "world"
  }),
  withProps(props =&gt; ({
    hello: (props.hello: string),
    eA: (props.eA: number),
    // $ExpectError hello nor any nor number
    helloErr: (props.hello: number),
    // $ExpectError eA nor any nor string
    eAErr: (props.eA: string)
  })),
  withProps(props =&gt; ({
    // $ExpectError property not found
    err: props.iMNotExists
  }))
);

// conditional functions here:
const nullConditionFn = (props) => !props
const showDocPreviewConditionFn = (props) => props.preview || props.previewOnly

export default compose(
  withRouter,
  withMaybe(nullConditionFn),
  withState('numPages', 'setNumPages', null),
  withState('pageNumber', 'setPageNumber', 1),
  withState('preview', 'setPreview', false),
  withPropsOnChange([ 'value' ], ({ value, setPreview }) => {
    if (value) {
      setPreview(true)
    }
  }),
  withHandlers({
    togglePreview: ({ preview, setPreview }) => (e) => {
      e.preventDefault()
      e.stopPropagation()

      setPreview(!preview)
    },
    customTextRenderer: (props) => (item) => {
      console.log('customTextRenderer', item)
    },
    handleTextLoaded: ({ onTextLoaded }) => () => {
      if (typeof onTextLoaded === 'function') {
        onTextLoaded()
      }
    },
    handlePage: ({ setPageNumber, numPages }) => (page) => {
      if (page > 0 && page <= numPages) {

>
        {first}
        {second}
      
    );
  }
}

CheckBox.defaultProps = {};
Object.setPrototypeOf(CheckBox.defaultProps, defaultProps);

let CheckBoxDoc;
if (process.env.NODE_ENV !== 'production') {
  CheckBoxDoc = require('./doc').doc(CheckBox); // eslint-disable-line global-require
}
const CheckBoxWrapper = compose(
  withFocus(),
  withTheme,
  withForwardRef,
)(CheckBoxDoc || CheckBox);

export { CheckBoxWrapper as CheckBox };

fontStyle: 'italic',
    color: '#525252',
  },
};

// Highlighting is frustratingly slow with > 100 items
const ConditionalHighlight = ({ condition, search, children }) =>
  condition ? (
    {children}
  ) : (
    <span>{children}</span>
  );

export default compose(
  withState('facetMapping', 'setFacetMapping', {}),
  withState('query', 'setQuery', ''),
  withState('focusedFacet', 'setFocusedFacet', null),
  withState('isLoadingFacetMapping', 'setIsLoadingFacetMapping', false),
  withState(
    'isLoadingAdditionalFacetData',
    'setIsLoadingAdditionalFacetData',
    false,
  ),
  withPropsOnChange(
    ['isLoadingFacetMapping', 'isLoadingAdditionalFacetData'],
    ({ isLoadingFacetMapping, isLoadingAdditionalFacetData }) =&gt; ({
      isLoading: _.some([isLoadingFacetMapping, isLoadingAdditionalFacetData]),
    }),
  ),
  withState('shouldHideUselessFacets', 'setShouldHideUselessFacets', false),
  withProps(
    ({

orderBy: ['createdAt', 'desc'],
      limit: 3,
      storeAs: `recentActions-${projectId}`
    }
  ]),
  // Map redux state to props
  connect(({ firebase, firestore }, { projectId }) => ({
    displayNames: get(firebase, 'data.displayNames'),
    recentActions: get(firestore, `ordered.recentActions-${projectId}`),
    environments: get(firestore, `data.environments-${projectId}`)
  })),
  // Show a loading spinner while actions are loading
  spinnerWhileLoading(['recentActions']),
  // Render NoRecentActions component if no recent actions exist
  renderWhileEmpty(['recentActions'], NoRecentActions),
  withProps(({ recentActions, displayNames, environments }) => ({
    orderedActions: map(recentActions, event => {
      const createdBy = get(event, 'createdBy')
      const envLabelFromEnvironmentValIndex = (envIndex = 0) => {
        const envKey = get(event, `eventData.environmentValues.${envIndex}`)
        const envName = get(environments, `${envKey}.name`)
        const envUrl =
          get(environments, `${envKey}.databaseURL`) ||
          get(event, `eventData.inputValues.${envIndex}.databaseURL`, '')
        const firebaseProjectName = databaseURLToProjectName(envUrl)
        return `${envName} (${firebaseProjectName})`
      }
      if (createdBy) {
        return {
          ...event,
          src: envLabelFromEnvironmentValIndex(0),
          dest: envLabelFromEnvironmentValIndex(1),

handleSelect={handleSelect}
                selectAll={selectAll}
              />
            )
            : null}
          {/* {scriptDisplay ?  : null} */}
          {/* {saveLoadDisplay ?  : null} */}
      
    );
    /* eslint-enable */
  }
}


// export default withRouter(MainContainer);
export default compose(
  withRouter,
  withStyles(),
)(MainContainer);

initMessage()}
                tipText={`Message ${user.name}`}
                tipLocation={'top-left'}
              />
            )}
          
        
      );
  }
};

const User = compose(
  displayLoadingCard,
  withRouter,
  withCurrentUser
)(UserWithData);
const mapStateToProps = state => ({
  initNewThreadWithUser: state.directMessageThreads.initNewThreadWithUser,
});
// $FlowFixMe
export default connect(mapStateToProps)(User);

style={{
          transform: `translate3D(0,0,0) scale(${scale}, ${scale})`,
        }}
      >
        <div>
          {text}
        </div>
      
    )
  }
  
);

export const clusterMarkerHOC = compose(
  defaultProps({
    text: '0',
    styles: clusterMarkerStyles,
    initialScale: 0.6,
    defaultScale: 1,
    hoveredScale: 1.15,
    hovered: false,
    stiffness: 320,
    damping: 7,
    precision: 0.001,
  }),
  // pure optimization can cause some effects you don't want,
  // don't use it in development for markers
  pure,
  withPropsOnChange(
    ['initialScale'],